blog posts

JavaScript’te işlev tanımı

JavaScript, tüm önemli web tarayıcıları tarafından desteklenir, bu da onu ön uç web geliştirme için önemli bir teknoloji haline getirir. İşlevler, JavaScript programlamada temel öğeler olarak hareket eder ve web uygulamalarının oluşturulmasını kolaylaştırır. Kavramsal olarak, JavaScript’teki bir işlev, bir dizi talimatın gruplandırılmasına izin verir ve bunların bir birim olarak yürütülmesini mümkün kılar. Bu makalede, JavaScript işlevlerinin temel yönlerini inceleyeceğiz ve bunları uygulamaya yönelik etkili teknikleri gözden geçireceğiz.

İşlev JavaScript’te ne yapar?

JavaScript’teki bir işlev, belirli bir görevi gerçekleştiren bir tür bağımsız kod bloğudur. Bir daire oluşturan ve ona renk uygulayan bir program yazmak istediğinizi düşünün. Bunu yapmak için aşağıdaki iki işlevi kullanabilirsiniz:

• Bir daire çizmekten sorumlu olan bir işlev.
• Daireyi renklendirmeye adanmış başka bir işlev.

Karmaşık sorunları daha küçük, yönetilebilir görevlere ayırmak, kodun okunabilirliğini ve yeniden kullanılabilirliğini artırır. JavaScript ayrıca çok çeşitli yerleşik işlevler sağlar. Örneğin, Math.sqrt() işlevi belirli bir sayının karekökünü hesaplar. Bu yerleşik işlevler, programlama görevlerini basitleştirmek için kullanışlı, kullanıma hazır işlevler sağlar.

JavaScript’te İşlev Sözdizimi

JavaScript’te bir işlev bildirirken aşağıdaki komut kullanılır:

function nameOfFunction() {

    // function body

}

Function anahtar sözcüğü bir işlevi bildirmek için kullanılır. Bunu, istenen işlev adı ve ardından parantez () takip eder. İşleviniz için işlevini ve amacını doğru şekilde yansıtan açıklayıcı bir ad seçmek her zaman en iyisidir. Örneğin, bir fonksiyonun iki sayıyı toplaması amaçlanıyorsa, onu add veya addNumbers olarak adlandırabilirsiniz. İşlev gövdesi, işlev çağrıldığında yürütülmesi gereken talimatları içerir ve {} parantezleri içine alınır. İşte bu noktayı açıklayacak bir örnek:

// declaring a function named greet()

function greet() {

    console.log("Hello Maktabkhooneh");

}

Yukarıdaki kod parçacığında, konsola Hello Maktabkhooneh mesajını kaydeden greet adlı bir fonksiyon deklare ediyoruz.

JavaScript’te işlevleri kullanmanın avantajları

JavaScript’teki işlevler programlama için çeşitli avantajlar sunar; bunlardan en önemlileri şunlardır:

• Yeniden Kullanılabilirlik : JavaScript işlevleri, bir kod bloğunu bir kez tanımlamanıza ve onu uygulamanızda birden çok kez kullanmanıza olanak tanır.
• Modülerlik : Kodunuzu daha küçük işlevlere bölerek karmaşık görevleri yönetilebilir birimlere ayırırsınız.
• Okunabilirlik : İşlevler, net bir yapı ve mantıksal akış sağlayarak kodunuzun okunabilirliğini artırır.
• Kapsülleme : İşlevler bir dizi talimatı içerir ve ilgili kodu birlikte gruplamanıza olanak tanır.
• Kod bakımı : Programınızı daha küçük, bağımsız işlevlere bölerek, programın tamamını etkilemeden kodun belirli bölümlerinde değişiklik veya güncelleme yapabilirsiniz.

Kısacası, JavaScript’teki İşlevler yeniden kullanılabilirlik, modülerlik, gelişmiş okunabilirlik, kapsülleme ve kod bakımı sağlar. Daha temiz ve daha düzenli kod yazmanıza olanak tanır ve yazılım geliştirmede en iyi uygulamaları teşvik eder.

JavaScript’te İşlev nasıl bildirilir

JavaScript’te bir işlev yazmak, Function anahtar sözcüğüyle başlar, ardından işlev adı ve bir çift parantez gelir. Parantezler içinde, işlevin kabul ettiği, bağımsız değişken olarak da adlandırılan herhangi bir giriş parametresini belirtebilirsiniz. Bu argümanlar genellikle isteğe bağlıdır. Daha sonra, işlevin çağrıldığında yürüteceği talimatları tanımlayan {} parantezlerinin içine bir kod bloğu eklersiniz. Giriş olarak iki sayı alan ve bunların toplamını döndüren temel fonksiyona ilişkin aşağıdaki örneği göz önünde bulundurun:

function addNumbers(a, b) {

  return a + b;

}

Yukarıdaki kod parçasında “addNumbers” isimli fonksiyonun “a” ve “b” isimli iki parametresi bulunmaktadır. İşlev gövdesinin içindeki kod, bu iki parametreyi basitçe toplar ve sonucu döndürür.

JavaScript’te bir işlev nasıl çağrılır

JavaScript, diğer işlevlere argüman olarak iletilen işlevler olan geri çağırma işlevlerinin kullanılmasına izin verir. Çarpma işleminin sonucunu kaydetmek için işlev çağrısının kullanımını gösteren bir örnek:

function multiplyByTwo(n, callback) {

  var result = n * 2;
  callback(result);
}

function logResult(result) {

  console.log(result);

}

multiplyByTwo(5, logResult); // logs 10

Sağlanan kodda,multipByTwo işlevi iki bağımsız değişkeni kabul eder: bir n sayısı ve bir geri çağırma işlevi. “multiplyByTwo” işlevi sayıyı 2 ile çarpar ve ardından geri çağırma işlevini çağırır ve elde edilen değeri argüman olarak gönderir. Sonuç olarak “logResult” fonksiyonu çalıştırılır ve sonucu konsola yazdırır.

JavaScript’teki geri çağırma işlevine başka bir örnek

JavaScript’te bir işlev bildirdikten sonra, kodu gövdesinde çalıştırmak için onu çağırmalısınız. Fonksiyonu çağırmak için adını parantez () ile yazmanız yeterlidir. Daha önce bahsedilen greet() fonksiyonunun nasıl çağrılacağına dair bir örnek:

// function call

greet();

Yukarıdaki kod parçacığında greet() fonksiyonu adının ardından parantezlerin yazılmasıyla çağrılıyor. Bu, işlev gövdesindeki kodu çalıştırır ve bu durumda “Merhaba” mesajını konsola kaydeder. Bir işlevi çağırmak, işlevin gövdesinde kod yürütülmesine olanak tanıyarak işlevi kullanmanıza ve işlev tarafından tanımlanan belirli görevleri gerçekleştirmenize olanak tanır.

JavaScript’teki işlev parametreleri

JavaScript’teki işlevler ayrıca parametrelere varsayılan değerler atamanıza olanak tanıyan varsayılan parametreleri de destekler. Bu, işlev çağrıldığında bunlar sağlanmadıysa geçerlidir. Varsayılan parametreler, bir parametrenin açıkça aktarılmamış olsa bile bir değere sahip olduğundan emin olmak istediğinizde kullanışlıdır. Bir fonksiyon parametrelerle de bildirilebilir. Parametre, bir işlev bildirildiğinde iletilen bir değerdir.

Aşağıdaki örnek, JavaScript’te İşlev parametrelerinin nasıl kullanılacağını gösterir:

// declaring a function with a parameter

function greet(name) {

    console.log("Hello " + name + " :)");

}


// taking input from the user

let name = prompt("Enter a name: ");


// calling the function and passing the argument

greet(name);

Yukarıdaki kodda greet fonksiyonu name parametresi ile bildirilmektedir. Fonksiyon çağrıldığında ona bir argüman iletilecektir. Prompt fonksiyonu kullanıcıdan girdi alıp bunu isim değişkenine atamak için kullanılır. Daha sonra selamlama işlevi, argüman olarak isim değişkeniyle çağrılır. Fonksiyonun yürütülmesi sağlanan argümanla gerçekleştirilecek ve çıktı aşağıdaki resme benzer olacaktır:

Enter a name: Simon

Hello Simon :)

Bu örnekte name parametresi, çalışma zamanında kullanıcı tarafından sağlanan değeri alarak işlevin karşılama mesajını kişiselleştirmesine olanak tanır. Daha iyi anlamak için aşağıdaki örneği de göz önünde bulundurun:

function greet(name = "John Doe") {

    console.log(`Hello, ${name}!`);

}

greet(); // Hello, John Doe!

greet("Jane Smith"); // Hello, Jane Smith

Yukarıdaki kodda, selamlama fonksiyonunun name adında tek bir parametresi vardır. Adın varsayılan değeri “John Doe” olarak ayarlanmıştır. İşlev herhangi bir argüman sağlamadan çağrılırsa, varsayılan “John Doe” değerini kullanır ve “Merhaba, John Doe” yazdırır. Ancak Jane Smith gibi bir argüman aktarılırsa bunun yerine bu değeri kullanacak ve “Merhaba Jane Smith” yazacaktır.

Javascript’te yapıcı işlevi nasıl kullanılır?

JavaScript’teki bir İşlev türü, öncelikle nesneler oluşturmak için kullanılan Yapıcı İşlevini sağlar. JavaScript‘te bir yapıcı işlevi tanımlamak için Function anahtar sözcüğü ve ardından büyük harfle başlayan bir ad kullanılacaktır. JavaScript’teki yapıcı işlevler genellikle New anahtar sözcüğü kullanılarak çağrılır. Burada, name ve age özelliklerine sahip bir nesne oluşturan Person adlı yapıcı işlevinin tanımını gösteren bir örnek verilmiştir:

function Person(name, age) {

  this.name = name;

  this.age = age;

}

let person = new Person("John Smith", 30);

console.log(person.name); // Output: "John Smith"

console.log(person.age); // Output: 30

Sağlanan kodda, Kişi yapıcı işlevi ad ve yaş olmak üzere iki parametreyi kabul eder. İşlev gövdesinde, özellik adı ve yaş değerleri This anahtar sözcüğü kullanılarak atanır. Constructor fonksiyonu New anahtar sözcüğü ile çağrıldığında yeni bir nesne oluşturur ve verilen değerleri onun özelliklerine atar.

Yukarıdaki örnekte, Person yapıcısını “John Smith” ve “30” argümanlarıyla çağırarak yeni bir Person nesnesi oluşturuyoruz. Daha sonra, nokta gösterimini kullanarak Kişi nesnesinin özelliklerine erişebiliriz, örneğin “kişi.adı” ve “kişi.yaş”, sırasıyla “John Smith” ve “30” çıktısını verecektir.

JavaScript’te kapatma işlevi

Kapamalar, ana işlevin yürütülmesi bittikten sonra bile ana kapsamlarındaki değişkenlere erişimi sürdüren JavaScript’teki işlevlerdir. Değişkenlerin işlev çağrıları arasında kalıcı olmasını sağlar, güçlü yetenekler sağlar ve nesne yönelimli programlama gibi gelişmiş programlama modellerini etkinleştirir. Sayaç oluşturan bir Kapatma işlevini gösteren aşağıdaki örneği düşünün:

function createCounter() {

  let count = 0;

  return function() {

    return count++;

  };

}

const myCounter = createCounter();

console.log(myCounter()); // Output: 0

console.log(myCounter()); // Output: 1

Sağlanan kodda, “createCounter” işlevi yerel değişkenlerin sayısını tanımlar ve dahili bir işlev döndürür. Dahili işlev, kapatma yoluyla sayım değişkenine erişimi korur.

“createCounter”ı çağırarak, döndürülen dahili işlevi “myCounter” değişkenine atarız. “myCounter”a yapılan sonraki çağrılar count değişkenini artırır ve değerini döndürür. Verilen örnekte, myCounter’a yapılan ilk çağrı onu “0”a, ikinci çağrı ise “1”e ayarlayacaktır. JavaScript’te kapatma, sayım değişkeninin işlev çağrıları arasında korunmasını ve güncellenmesini sağlar.

 JavaScript’te daha yüksek dereceli işlevler

JavaScript, işlevlerin diğer işlevlere argüman olarak aktarılmasına izin verir ve sonuç olarak, bir işlev daha yüksek dereceli işlev olarak bilinir. İşte bu kavramı açıklamak için bir örnek:

function performOperation(a, b, operation) {

    return operation(a, b);

}

function addNumbers(a, b) {

    return a + b;

}

let result = performOperation(5, 10, addNumbers);

console.log(result);  // Output: 15

Yukarıda verilen kodda, “performOperation” işlevi “a”, “b” ve “operasyon” olmak üzere üç argümanı kabul eder. İşlem argümanının iki argüman alan ve sonuç döndüren bir fonksiyon olması beklenir. Bu durumda, işlem argümanı olarak “addNumbers” işlevini “performOperation”a aktarırız. Sonuç olarak, PerformOperation işlevi addNumbers işlevini a ve b bağımsız değişkenleriyle çağırır ve sonuç olarak 15 dönüş değeri elde edilir. Daha sonra bu değer sonuç değişkeninde saklanır ve konsola kaydedilir.

JavaScript’te daha üst düzey işlevler kullanarak, farklı işlevleri bağımsız değişken olarak sağlayarak bir JavaScript işlevinin davranışını dinamik olarak değiştirebilirsiniz. Bu esneklik kodun yeniden kullanılabilirliğini artırır ve karmaşık mantık ve algoritmaların uygulanmasına olanak tanır.

Javascript’te dönüş işlevi

JavaScript’teki Return deyimi veya işlevi, bir işlev çağrıldığında döndürülmesi gereken değeri belirtmek için kullanılır. Return işleviyle ilgili bazı önemli noktalar şunlardır:

• Return deyimi, işlevin yürütülmesinin sonu anlamına gelir. Return deyiminden sonra yazılan hiçbir kod çalıştırılmayacaktır.
• Return deyimi, bir işlevin sonucu olarak belirli bir değeri veya ifadeyi döndürmek için kullanılabilir.
• Bir fonksiyonda açık bir return ifadesi sağlanmazsa, otomatik olarak tanımlanmamış bir değer döndürür.
• Bir fonksiyonun yalnızca bir dönüş ifadesi olabilir. Return deyimiyle karşılaşıldığında işlev hemen çıkar ve belirtilen değeri döndürür.

Aşağıdaki örnek bu kavramı göstermektedir:

// function to calculate the square of a number

function square(num) {

    return num * num; // return statement

}

let result = square(5); // calling the function and storing the returned value

console.log(result); // Output: 25

Yukarıdaki örnekte square fonksiyonu bir num parametresi alır ve bu sayının karesini döndürür. “Return return num * num” komutu karenin alanını hesaplar ve onu işlev çağrısının sonucu olarak döndürür. Daha sonra dönüş değeri sonuç değişkenine atanır ve bunu 25 sayısını veren “console.log(result)” kullanarak görüntüleyebiliriz. Return komutunu kullanarak bir fonksiyonun sonucunu alabilir ve kodumuzun diğer kısımlarında kullanabiliriz.

JavaScript’te bir dönüş işlevi örneği

Aşağıda, JavaScript’te bir işlev kullanılarak iki sayının toplamını gösteren bir örnek verilmiştir:

// declaring a function to add two numbers

function add(a, b) {

    return a + b;

}

// taking input from the user

let number1 = parseFloat(prompt("Enter the first number: "));

let number2 = parseFloat(prompt("Enter the second number: "));

// calling the add function and storing the result

let result = add(number1, number2);

// displaying the result

console.log("The sum is " + result);

Yukarıdaki kodda, add işlevi a ve b olmak üzere iki parametre alır ve Return komutunu kullanarak bunların toplamını döndürür. İstem fonksiyonu kullanıcıdan 1 ve 2 sayılarına ilişkin girdi almak için kullanılır. Daha sonra argüman olarak sağlanan sayılarla add işlevi çağrılır ve döndürülen toplam, sonuç değişkeninde saklanır.

Son olarak toplam, console.log(“Toplam ” + sonuç);” kullanılarak konsolda görüntülenir. Program çalışırken kullanıcıdan iki sayı girmesini ister. Sayılar girildikten sonra toplam, toplama işlevi kullanılarak hesaplanır ve çıktı olarak görüntülenir:

Bu örnek, belirli bir görevi gerçekleştirmek ve programda daha fazla kullanılabilecek bir sonuç döndürmek için bir işlevin nasıl kullanılacağını gösterir.

JavaScript’teki işlev ifadeleri

JavaScript’teki işlevler ifadeler olarak da tanımlanabilir. Bu, fonksiyonun tıpkı diğer değerler gibi değişkene atanabileceği anlamına gelir. İşte bu noktayı açıklayacak bir örnek:

// defining a function expression to find the square of a number

let x = function (num) {

  return num * num;

};

console.log(x(4)); // Output: 16

// using the function expression as the value of another variable

let y = x(3);

console.log(y); // Output: 9

Yukarıdaki kodda fonksiyon bir ifade olarak bildirilmiş ve x değişkenine atanmıştır. Bu, x’in değerinin bir fonksiyon olduğu anlamına gelir. Fonksiyon bir sayı parametresi alır ve bu sayının karesini döndürür.

Fonksiyonu çağırmak için tıpkı normal bir fonksiyon gibi x değişkenini ve ardından parantezleri kullanırız. İlk komut olan “console.log(x(4))”‘de fonksiyona 4 argümanını iletiyoruz ve fonksiyon 4’ün karesini yani 16’yı döndürüyor. İkinci komut olan “console.log(y)”de, x fonksiyonunun 3 numaralı argümanla çağrılmasının sonucunu y değişkenine atarız. Yani y, 3’ün karesi olan 9 değerini taşır. İşlev İfadeleri genellikle bir değişkene bir işlev atamak veya onu başka bir işleve argüman olarak aktarmak istediğinizde kullanılır. İşlevlerin JavaScript’te nasıl tanımlandığı ve kullanıldığı konusunda esneklik sağlarlar.

JavaScript’te ok işlevleri

ECMAScript 6’da (ES6) sunulan Ok İşlevleri , JavaScript’te İşlevler oluşturmak için daha kısa bir sözdizimi sağlar. => ok simgesinin kullanılması nedeniyle ok işlevleri olarak da bilinirler. Bu tür fonksiyonları anlamak için aşağıdaki örnek verilmiştir:

// Regular function expression
let addNumbers = function(a, b) {
  return a + b;
};
console.log(addNumbers(2, 3)); // Output: 5

// Arrow function expression
let addNumbersArrow = (a, b) => a + b;
console.log(addNumbersArrow(2, 3)); // Output: 5

Yukarıdaki kodda, a ve b olmak üzere iki parametre alan ve bunların toplamını döndüren normal bir “addNumbers” işlevi tanımlarız. Daha sonra, => ok işaretini kullanarak “addNumbersArrow”a eşdeğer bir ok fonksiyonu ifadesi tanımlarız. Ok işlevi, işlev anahtar sözcüğünü, {} parantezlerini ve return ifadesini kaldırır. Doğrudan a + b ifadesini değerlendirir ve sonucu döndürür.

Ok işlevlerinin daha kısa bir sözdizimi vardır ve bu değeri çevreleyen bağlama göre örtülü olarak bağlar. Ancak normal fonksiyonlara göre nesne argümanlarını bağlamamaları ve yapıcı olarak kullanılamamaları gibi bazı farklılıkları vardır. Ok işlevleri, olay işleyicileri ve çağırma işlevlerinin yanı sıra, harita(), filtre() ve azalt() gibi dizi yöntemleri gibi kısa ve basit işlevlerin gerekli olduğu senaryolarda yaygın olarak kullanılır.

JavaScript’teki fabrika işlevi

Fabrika işlevi, nesneleri oluşturmak ve döndürmek için bir işlevin kullanıldığı, JavaScript’teki bir tasarım modelidir. Bu Fabrika, nesne oluşturma mantığını JavaScript’te kapsüller ve aynı nesnenin farklı değerlere veya yapılandırmalara sahip birden çok örneğini oluşturmanın bir yolunu sağlar. İşte JavaScript’teki Fabrika İşlevinin bir örneği:

function createPerson(name, age) {
  return {
    name: name,
    age: age,
    greet: function() {
      console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
  };
}

let person1 = createPerson("John", 30);
let person2 = createPerson("Jane", 25);

person1.greet(); // Output: Hello, my name is John and I am 30 years old.
person2.greet(); // Output: Hello, my name is Jane and I am 25 years old.

Yukarıdaki kodda CreatePerson işlevi, parametre olarak adı ve yaşı alan ve bir kişiyi temsil eden nesneyi döndüren bir Fabrika işlevidir. Her nesnenin kendi adı ve yaş özellikleri vardır ve ayrıca nesnenin özelliklerini kullanarak bir selamlamayı kaydeden bir selamlama yöntemine sahiptir. “createPerson” fonksiyonunu farklı argümanlarla çağırarak, her biri kendi benzersiz ad ve yaş değerlerine sahip birden fazla Person nesnesi örneği oluşturabiliriz.

JavaScript’teki Factory işlevleri, New anahtar sözcüğünü ve yapıcı işlevlerini açıkça kullanmaya gerek kalmadan, benzer özelliklere ve davranışlara sahip birden çok nesne oluşturmak istediğinizde kullanışlıdır. Kodun yeniden kullanılabilirliğini ve nesne oluşturma mantığının kapsüllenmesini desteklerler.

son söz

İşlevler, JavaScript programlamanın önemli bir yönüdür. Kod organizasyonuna, yeniden kullanılabilirliğe ve gelişmiş okunabilirliğe olanak tanırlar. JavaScript’te işlevler, function anahtar sözcüğü kullanılarak bildirilebilir ve işlevlere değer aktarmak için parametreler kullanılabilir. Return deyimi bir fonksiyondan değer göndermek için kullanılır. Ek olarak, işlevler ifadeler olarak tanımlanabilir, değişkenlere atanabilir ve üst düzey işlevlere argüman olarak kullanılabilir. Genel olarak, JavaScript’teki işlevlerin kullanımı modüler ve bakımı yapılabilir kodların geliştirilmesini teşvik eder.

• JavaScript çerçevelerine aşinalık