JavaScript'te Ok İşlevlerini Kullanırken Neden Dikkatli Olmalısınız?

Ok işlevi sözdizimi, ES6 olarak da bilinen ECMAScript 2015'in piyasaya sürülmesiyle geldi. Bugün, ok işlevleri birçok JavaScript programcısının favori özelliği haline geldi. Ok işlevlerine olan bu sevgi, "this" anahtar sözcüğünün özlü sözdiziminden ve basit davranışından kaynaklanmaktadır.

Ancak ok fonksiyonlarının bazı dezavantajları vardır. Ok işlevleri ile normal işlevler arasındaki temel farklar hakkında bilgi edinin ve çoğu durumda normal işlevlere bağlı kalmanın neden daha iyi olduğunu öğrenin.

1. Kullanmadan Önce Bir Ok Fonksiyonu Tanımlamalısınız

Bir ok işlevini kaldıramazsınız. JavaScript'in varsayılan kaldırma kuralları bir işlevi tanımlamadan önce çağırmanıza izin verir, ancak ok işlevlerinde durum böyle değildir. İşlevlere sahip bir JavaScript dosyanız varsa, bu, tüm önemli kodun dosyanın altında olacağı anlamına gelir.

Örneğin aşağıdaki JavaScript kodunu göz önünde bulundurun:

sabit doubleNumbers = (sayılar) { 
 sayılar.harita(N => N * 2)
}
sabit yarıyaSayılar = (sayılar) { 
 sayılar.harita(N => N / 2)
}
sabit toplamSayılar = (sayılar) { 
 sayılar.azalt((toplam, n) => { 
geri dönmek toplam + n; 
 }, 0)
}
sabit sayılar = [1, 20, 300, 700, 1500]
sabit doubled = doubleNumbers (sayılar)
konsol.log (Sayıları yarıya indir (iki katına çıktı))
konsol.log (sumNumbers (sayılar))

Yukarıdaki kod bloğunda, önemli kod en alttadır. Yardımcı işlevlerin tümü yürütme noktasından önce tanımlanır. zorunda olmak JavaScript işlevlerinizi oluşturun İşi yapan gerçek kodu görmek için aşağı kaydırmanız gerekeceğinden, dosyanın üst kısmında yer alan bilgiler rahatsız edici olabilir.

Yardımcı işlevleri en alta ve gerçek kodu en üste taşıdıysanız, bir referans hatası alırsınız. Çalışma zamanı, işlevi bir değişken olarak ele alır. Bu nedenle, erişmeden veya çağırmadan önce onu tanımlamanız gerekir. Ancak tüm ok işlevlerini normal işlevlere dönüştürdüyseniz ( işlev anahtar kelime), o zaman kodunuz iyi çalışır. Aynı zamanda, önemli kod, onu bulabileceğiniz yerde üstte kalır.

Bu, ok işlevlerini kullanmanın en büyük sorunlarından biridir. Herhangi bir barındırma davranışı göstermezler. Başka bir deyişle, onları kullanacağınız asıl yerden önce tanımlamanız gerekir. Öte yandan, normal işlevleri kaldırabilirsiniz.

2. Ok İşlevleri Bazı Kişiler İçin Kafa karıştırıcı Olabilir

Ok işlevleri yerine normal işlevleri kullanmanın bir başka nedeni de okunabilirliktir. Düzenli işlevlerin okunması daha kolaydır çünkü açıkça kullanırlar. işlev anahtar kelime. Bu anahtar kelime, söz konusu kodun bir işlev olduğunu tanımlar.

Öte yandan, değişkenlere ok işlevleri atarsınız. Yeni başlayan biri olarak bu, kodun bir işlevden çok bir değişken olduğunu düşünmenize neden olabilir.

Aşağıdaki iki işlevi karşılaştırın:

sabit yarıyaSayılar = (sayılar) => {
geri dönmek sayılar.harita(N => N / 2)
}
işlevsayıları yarıya indirmek(sayılar) { 
geri dönmek sayılar.harita(N => N / 2)
}

İlk bakışta, ikinci kod parçasının bir işlev olduğunu kolayca anlayabilirsiniz. Sözdizimi, kodun bir işlev olduğunu açıkça ortaya koymaktadır. Bununla birlikte, ilki belirsizdir - bunun bir değişken mi yoksa bir işlev mi olduğunu kolayca söyleyemeyebilirsiniz.

3. Ok İşlevlerini Yöntem Olarak Kullanamazsınız

Bir ok işlevini kullandığınızda, Bu anahtar kelime, içinde bulunduğumuz şeyin dışında ne varsa ona karşılık gelir. Çoğu durumda, pencere nesnesidir.

Aşağıdaki nesneyi göz önünde bulundurun:

sabit kişi = {
 ilk adı: "Kyle",
 soy isim: "Aşçı",
 yazdırAdı: () => {
konsol.kayıt(`${Bu.ilk adı}``${Bu.soy isim}` )
 }
}
kişi.printName()

Kodu çalıştırırsanız, tarayıcının yazdırdığını fark edeceksiniz. Tanımsız hem ad hem de soyadı için. Bir ok işlevi kullandığımız için, Bu anahtar kelime, pencere nesnesine karşılık gelir. Ayrıca, yok ilk adı veya soy isim Orada tanımlanan özellik.

Bu sorunu çözmek için bunun yerine normal bir işlev kullanmanız gerekir:

sabit kişi = {
 ilk adı: "Kyle",
 soy isim: "Aşçı",
 yazdırAdı: işlev() {
konsol.kayıt(`${Bu.ilk adı}``${Bu.soy isim}` )
 }
}
kişi.printName()

Bu iyi çalışacak çünkü Bu ifade eder kişi nesne. Bu tür nesne yönelimli programlamayı çok yapacaksanız, normal işlevleri kullandığınızdan emin olmanız gerekir. Ok işlevleri çalışmayacaktır.

Ok İşlevleri Ne Zaman Kullanılır?

Ok işlevlerini esas olarak anonim bir işleve ihtiyaç duyduğunuz yerlerde kullanın. Böyle bir senaryonun bir örneği, bir geri çağırma işleviyle uğraşmaktır. Bir geri arama yazarken bir ok işlevi kullanmak daha iyidir, çünkü sözdizimi tam bir işlev yazmaktan çok daha basittir.

Bu ikisini karşılaştırın ve hangisinin daha basit olduğuna karar verin:

işlevsayıları yarıya indirmek(sayılar) {
geri dönmek sayılar.harita(N => N / 2)
}
işlevsayıları yarıya indirmek(sayılar) {
geri dönmek sayılar.harita(işlev(N) {
geri dönmek N / 2
 })
}

Her iki durumda da map() yöntemine bir geri çağırma işlevi iletilir. Ancak ilk geri arama bir ok işleviyken, ikincisi tam bir işlevdir. İlk işlevin ikinci işlevden nasıl daha az kod satırı kapladığını görebilirsiniz: üçe karşı üç. beş.

Ok işlevlerini kullanmanın diğer zamanı, belirli bir "bu" sözdizimiyle uğraşmak istediğiniz zamandır. "Bu" nesne, belirli şeyler için normal işlevler mi yoksa ok işlevleri mi kullandığınıza bağlı olarak değişecektir.

Aşağıdaki kod bloğu, belge nesnesinde iki "tıklama" olay dinleyicisini kaydeder. İlk örnek, geri arama olarak normal bir işlev kullanırken, ikincisi bir ok işlevi kullanır. Her iki geri çağırmanın içinde kod, yürütme nesnesini (bu) ve olay hedefini günlüğe kaydeder:

belge.addEventListener("tıklamak", işlev(e) {
konsol.kayıt("İŞLEV", Bu, e.hedef)
})
belge.addEventListener("tıklamak", (e) => {
konsol.kayıt("OK", Bu, e.hedef)
})

Bu komut dosyasını çalıştıracak olsaydınız, "bu" referansın her ikisi için de farklı olduğunu fark edeceksiniz. Normal işlev için bu özellik, belgeyle aynı olan belgeye başvurur. e.hedef mülk. Ancak ok işlevi için bu, pencere nesnesine başvurur.

Normal bir işlevi geri arama olarak kullandığınızda, bu, olayı tetiklediğimiz öğeye atıfta bulunur. Ancak bir ok işlevi kullandığınızda, bu anahtar sözcük varsayılan olarak pencere nesnesine atanır.

Ok İşlevleri ve Normal İşlevler Hakkında Daha Fazla Bilgi Edinin

Normal işlevler ile ok işlevleri arasında birkaç ince fark daha vardır. Her iki işlev türünde de uzmanlaşmak, JavaScript'te ustalık kazanmanın temelidir. Birini ne zaman, diğerini ne zaman kullanacağınızı öğrenin; JavaScript'inizde normal bir işlev veya bir ok işlevi kullanmanın sonuçlarını anlayacaksınız.