JavaScript'te Fonksiyonlar

Bu makale JavaScript'teki fonksiyonları açıklar.

YouTube Video

JavaScript'te Fonksiyonlar

JavaScript'teki fonksiyonlar, belirli görevleri gerçekleştirmek için kullanılan tekrar kullanılabilir kod bloklarıdır. Fonksiyon kullanımı kodun okunabilirliğini artırır ve bakımını kolaylaştırır. Fonksiyonlar çeşitli şekillerde tanımlanabilir ve argümanlar ile dönüş değerleri kullanılarak esnek bir şekilde yönetilebilir.

Fonksiyon Tanımlama Yöntemleri

Fonksiyon Bildirimi

Fonksiyonlar function anahtar kelimesi kullanılarak tanımlanabilir. Fonksiyon bildirimleri kod çalışmadan önce yükseltilir, bu nedenle tanımlanmadan önce çağrılabilirler.

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

Bu örnekte, greet fonksiyonu bildirimi yapılmadan önce çağrıldığı için Hello, Everyone ve Hello, Alice görüntülenir.

Fonksiyon İfadesi

Fonksiyonlar bir değişkene atanarak da tanımlanabilir. Bu durumda, fonksiyon yükseltilmez ve yalnızca tanımlandıktan sonra çağrılabilir.

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

Bu örnekte Hello, Bob görüntülenecektir.

Ok Fonksiyonu

Ok fonksiyonları, daha kısa bir sözdizimiyle fonksiyon tanımlamanın bir yoludur. Bunlar özellikle anonim fonksiyonlar (adlandırılmamış fonksiyonlar) kullanıldığında faydalıdır. Ayrıca ok fonksiyonları, this anahtar kelimesiyle ilgili farklı bir davranış sergiler.

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

Bu örnekte fonksiyonlar greet ve greetShort olarak tanımlanabilir. Eğer fonksiyon tek satır ise, greetShort gibi {} (kıvırcık parantezler) kaldırılabilir.

Bir Fonksiyonun Unsurları

Argümanlar

Bir fonksiyona geçirilen değerlere argümanlar denir. Bir fonksiyon tanımlarken argümanları belirtirseniz, fonksiyonu çağırdığınızda değerler geçirebilirsiniz.

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

Varsayılan Argümanlar

Argümanlara herhangi bir değer iletilmezse varsayılan bir değer belirtebilirsiniz.

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

Bu örnekte, greet() çağrılırsa varsayılan olarak Misafir kullanılır.

Dönüş Değeri

return ifadesini kullanarak bir fonksiyondan bir dönüş değeri döndürebilirsiniz. return ifadesi yoksa, fonksiyon tanımsız (undefined) değerini döndürür.

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

Bu örnekte, greet bir değer döndürmediğinden dönüş değeri tanımsız (undefined) olur.

Anonim Fonksiyon

İsmi olmayan bir fonksiyon anonim fonksiyon olarak adlandırılır. Genellikle fonksiyon ifadeleri veya ok fonksiyonları olarak kullanılırlar.

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

Hemen Çalıştırılan Fonksiyon İfadesi (IIFE)

Hemen Çalıştırılan Fonksiyon İfadesi (IIFE), tanımlandığı anda çalıştırılan bir fonksiyondur. Genellikle kapsamı kontrol etmek için kullanılır.

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

Tanımlandığı anda çalıştırılır.

Geri Çağırım Fonksiyonu

Bir fonksiyona, daha sonra çalıştırılması için başka bir fonksiyonu argüman olarak geçirme işlemine geri çağırım fonksiyonu denir. Genellikle asenkron işlem ve olay yönetiminde kullanılır.

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

Bu örnekte, konsola bir değer yazdıran bir fonksiyon geri çağırım fonksiyonu olarak geçirilir.

Özyinelemeli Fonksiyon

Bir fonksiyonun kendi kendini çağırmasına özyineleme denir ve bunu kullanarak tekrarlayan işlemler yapan bir fonksiyona özyinelemeli fonksiyon denir. Örneğin, bir faktöriyel hesaplama fonksiyonu şu şekilde özyineleme kullanılarak uygulanabilir.

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

5 sayısının faktöriyeli olan 120 bu örnekte gösterilecektir.

this Anahtar Kelimesi

Bir fonksiyon içinde kullanılan this, fonksiyonun hangi nesneye atıfta bulunduğunu belirtir. Normal bir fonksiyonda çağıran nesneye atıfta bulunurken, ok fonksiyonlarında tanımlandığı kapsamın this değerini korur.

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

obj değişkeninin greet özelliği function anahtar kelimesi kullanılarak tanımlanmıştır. Bu nedenle, this anahtar kelimesi obj değişkeninin nesnesini ifade eder. Diğer yandan, obj2 değişkeninin greet özelliği bir ok fonksiyonu (arrow function) kullanılarak tanımlanmıştır. Bu nedenle, this anahtar kelimesi dış kapsamda bulunan nesneyi ifade eder ve bu örnekte undefined olur.

Fonksiyon Kapsamı ve Closure'lar

Bir fonksiyon içinde tanımlanan değişkenlere, fonksiyonun dışından erişilemez. Bu durum fonksiyon kapsamı (function scope) olarak adlandırılır. Bir fonksiyon tanımlandığı andaki kapsamı koruyan closure adlı bir özellik de vardır.

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

Bu örnekte, inner fonksiyonu, tanımlandığı kapsamı koruduğu için outerVar değişkenine erişebilir.

Özet

• Fonksiyon deklarasyonları, fonksiyon ifadeleri ve ok fonksiyonları dahil olmak üzere fonksiyonları tanımlamanın çeşitli yolları vardır.
• Fonksiyonlar argümanlar alabilir ve değerler döndürebilir.
• Callback fonksiyonları ve özyinelemeli fonksiyonlar gibi özel kullanımlar da vardır.
• this anahtar kelimesinin kullanımı konusunda dikkatli olunmalıdır, çünkü ok fonksiyonları ile normal fonksiyonlar farklı davranır.
• Closure'lar, kapsamın dışından iç değişkenlere erişim sağlamak için kullanılabilir.

Fonksiyonlar, JavaScript'in esnek yapısından yararlanan önemli kavramlardan biridir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video