JavaScript'te ok işlevleri - Verimli Kullanım

Fonksiyonlar, JavaScript'in kalbidir. Daha önce function anahtar kelimesine bağlı olanlar, ES6 ile yeni ve daha zarif bir yazım olan Ok-fonksiyonları getirdi. Bu yeni sözdizimi, kodunuzu sadece daha kısa hale getirmekle kalmaz, aynı zamanda this bağlamıyla ilgili bazı sorunları da çözer. Arrow-fonksiyonları hakkında bilmeniz gereken her şeyi bu kılavuzda öğreneceksiniz.

En Önemli Bulgular

• Arrow-fonksiyonları, geleneksel fonksiyonlara göre daha kısa bir sözdizimi sunar.
• Kendine ait bir this bağlamı yoktur, bu da onları geriçağırma fonksiyonlarında kullanmak için özellikle uygun hale getirir.
• Fonksiyon yalnızca bir ifade döndürüyorsa, süslü parantezleri ve return ifadesini çıkarmak mümkündür.

Ok-Fonksiyonlarına Giriş

Genellikle kodu daha okunabilir ve kompakt hale getirmek için Ok-fonksiyonları kullanılır. function yerine yazarak, fonksiyonu daha kısa bir şekilde tanımlamanızı sağlayan yeni sözdizimini kullanabilirsiniz.

Ok-fonksiyonları nedir öğrenmek için geleneksel fonksiyonları bir başlangıç noktası olarak kullanabilirsiniz. Bir fonksiyonu function anahtar kelimesiyle tanımladığınızda, genellikle biraz daha uzun ve daha az zariftir. İşte JavaScript'te bir Standart Fonksiyon örneği:

function doIt() { console.log("Yapılıyor");
}

Bu, Ok-fonksiyonlarına geçtiğimiz başlangıç ​​noktasıdır.

Adım 1: Bir Ok-fonksiyonu Tanımlama

function anahtar kelimesinin yerine basitçe parametreleri parantez içine alabilir ve ardından bir ok kullanarak, onu izleyen fonksiyon gövde ifadesini yazabilirsiniz. İşte bir önceki fonksiyonun Ok-fonksiyonu olarak nasıl göründüğü:

const doIt = () => { console.log("Yapılıyor");
};

Gördüğünüz gibi, sözdizimi çok daha kompakttır. İlk denemeden sonra, fonksiyonun doğru şekilde çalışıp çalışmadığını kontrol edebilirsiniz.

Adım 2: Dizilerle Ok-fonksiyonlarını Kullanma

Ok-fonksiyonlarının başka bir büyük avantajı, dizilerle kullanımlarındaki görülmektedir. Bir örnekle açıklayalım. Diyelim ki sayıların bir dizisi var ve belirli bir sayının pozisyonunu bulmak istiyorsunuz. İşte index'i bulmak için findIndex metodunu kullandığımız bir örnek:

const numbers = [2, 3, 4, 5];
const index = numbers.findIndex((element) => element === 3);
console.log(index);

Ok-fonksiyonu, kodun okunabilirliğini büyük ölçüde artırır ve ekstra bir function anahtar kelimesine ihtiyaç duyulmaz.

Adım 3: Ok-fonksiyonlarını Kısaltma

Bir Ok-fonksiyonu yalnızca bir ifade içeriyorsa, süslü parantezleri ve return anahtar kelimesini çıkarabilirsiniz. Şu şekilde görünür, eğer findIndex fonksiyonunu daha da kısaltırsak:

const index = numbers.findIndex(element => element === 3);

Bu sadece daha kısa değil, aynı zamanda daha zariftir. Fonksiyonu test edebilir ve hala doğru şekilde çalıştığını görüntüleyebilirsiniz.

Adım 4: this Anahtar Kelimesiyle İşlemler

Ok-fonksiyonlarının çok önemli bir avantajı this bağlamının işlenmesidir. Klasik fonksiyonlarda this genellikle tahmin edilemez hale gelir, özellikle fonksiyon geriçağırma olarak kullanıldığında. Ancak Ok-fonksiyonlar this'i tanımlandıkları bağlama bağlar.

Aşağıdaki örneğe bakın:

const obj = { text: "Metin", print: function() { console.log(this.text); }
};

obj.print(); // "Metin" çıktısını verir

Ancak setTimeout'yi geleneksel bir fonksiyonla kullanırsanız, this bağlamı değişir:

setTimeout(function() { console.log(this.text);
}, 1000); // undefined çıktısını verir

setTimeout içinde Ok-fonksiyonu kullanarak, this bağlamını kaybetmeden klasik fonksiyondan elde edilen aynı sonucu alırsınız:

setTimeout(() => { console.log(this.text);
}, 1000); // "Metin" çıktısını verir

Adım 5: this Atamasını Koruma

Ayrıca, this'i bir değişkene bağlayarak ona erişimi sağlamak mümkündür. Ancak bu kalıp genellikle Ok-fonksiyonlarının kullanımından daha az zariftir.

const self = this;
setTimeout(function() { console.log(self.text);
}, 1000);

Okçuluk Fonksiyonlarının Avantajları

• Her kök fonksiyon deklarasyonuna kıyasla daha kısa ve daha zariftirler.
• Kendi this bağlamına sahip değil, bu da geri çağrı fonksiyonlarında kullanımı kolaylaştırır.
• Sözdizimi, kodunuzu daha okunabilir hale getirmenize olanak tanır.

Özet

Okçuluk fonksiyonları, JavaScript fonksiyonlarını verimli bir şekilde tanımlamanın pratik bir yolunu sağlar. Yeni sözdizimi ile sadece okunabilirlik artmaz, aynı zamanda bu bağlamın işlenmesi de büyük ölçüde kolaylaşır. Özellikle geri çağrı fonksiyonları veya kısa fonksiyon ifadeleri gerektiğinde Okçuluk Fonksiyonlarını kullanmalısınız.