İşlev, onu çağırdığınızda çalışan yeniden kullanılabilir bir kod parçasıdır. İşlevler, kodu daha modüler ve bakımı kolay hale getirerek yeniden kullanmanıza olanak tanır.
JavaScript'te işlevler oluşturmanın birkaç yolu vardır. Burada, işlevleri oluşturmanın farklı yollarını ve bunları nasıl kullanacağınızı öğreneceksiniz.
İşlev Bildirimleri: Basit Yol
JavaScript'te işlevler oluşturmanın bir yolu, işlev bildirimleridir. İşlev bildirimi, JavaScript'te aşağıdaki sözdizimini izleyen bir işlevdir.
işlevfonksiyon adı(parametreler) {
// kod buraya gelecek...
geri dönmek"Bu bir işlev bildirimidir";
}
Yukarıdaki kod bloğunun bileşenleri şunları içerir:
- bu işlev anahtar sözcük: Bu anahtar sözcük bir işlev bildirir.
- fonksiyon adı: Bu, işlevin adıdır. Uygulamada, işlevin ne yaptığını belirterek mümkün olduğunca açıklayıcı ve anlamlı olmalıdır.
- parametreler: Bu fonksiyon parametrelerini temsil eder. Parametreler, bir işlevi çağırdığınızda ona iletebileceğiniz isteğe bağlı bir değişkenler listesidir.
- Fonksiyon gövdesi: Bu, çağrıldığında fonksiyonun çalışacağı kodu içerir. Kıvırcık parantezlerle çevrilidir {} ve herhangi bir geçerli JavaScript kodu içerebilir.
- bu geri dönmek ifade: Bu ifade, bir işlevin yürütülmesini durdurur ve belirtilen değeri döndürür. Yukarıdaki durumda, işlevi çağırmak, "Bu bir işlev bildirimidir" dizesini döndürür.
Örneğin, aşağıdaki işlev bildirimi üç sayıyı parametre olarak alır ve bunların toplamını döndürür.
işlevÜçSayı ekle(bir, b, c) {
geri dönmek bir + b + c;
}
JavaScript'te bir işlev bildirimi çağırmak için, işlev adını ve ardından bir dizi parantez yazın (). İşlev herhangi bir parametre alırsa, bunları parantez içinde bağımsız değişken olarak iletin.
Örneğin:
üçSayı ekle(1, 2, 3) // 6
Yukarıdaki kod bloğu şunu çağırır: ekleÜçSayı işlev görür ve işleve argüman olarak 1, 2 ve 3'ü iletir. Bu kodu çalıştırırsanız, 6 değerini döndürür.
JavaScript kaldıraçları işlev bildirimleri, yani tanımlamadan önce onları arayabilirsiniz.
Örneğin:
isHoisted(); // Fonksiyon kaldırıldı
işlevisKaldırılmış() {
konsol.kayıt("Fonksiyon kaldırıldı");
geri dönmekdoğru;
}
Yukarıdaki kod bloğunda gösterildiği gibi, arama isKaldırılmış tanımlamadan önce bir hata atmaz.
İşlev İfadeleri: Değer Olarak İşlevler
JavaScript'te bir işlevi ifade olarak tanımlayabilirsiniz. Ardından, işlev değerini bir değişkene atayabilir veya başka bir işleve bağımsız değişken olarak kullanabilirsiniz.
Adları olmadığı için anonim işlevler olarak da bilinirler ve onları yalnızca atadığınız değişkenden arayabilirsiniz.
Bir işlev ifadesinin sözdizimi aşağıdadır:
sabit işlevAdı = işlev () {
geri dönmek"Fonksiyon ifadesi";
};
JavaScript'te bir işlev ifadesini çağırmak için, işleve atadığınız değişken adını ve ardından bir dizi parantez yazın (). İşlev herhangi bir parametre alırsa, bunları parantez içinde bağımsız değişken olarak iletin.
Örneğin:
fonksiyon adı(); // fonksiyon ifadesi
Diğer işlevlerde çalışan işlevler oluştururken işlev ifadeleri kullanışlıdır. Tipik örnekler, olay işleyicileri ve bunların geri aramalarını içerir.
Örneğin:
button.addEventListener("tıklamak", işlev (etkinlik) {
konsol.kayıt("Bir düğmeye tıkladınız!");
});
Yukarıdaki örnek, alan bir işlev ifadesi kullanmıştır. etkinlik için bir geri arama olarak argüman addEventListener işlev. Bir işlev ifadesini geri arama olarak kullandığınızda, işlevi açıkça çağırmanız gerekmez. Ebeveyn işlevi tarafından otomatik olarak çağrılır.
Yukarıdaki durumda, olay dinleyicisi bir tıklamak olay, geri arama işlevini çağırır ve etkinlik argüman olarak nesne.
İşlev bildirimlerinin aksine, işlev ifadeleri kaldırılmaz, bu nedenle onları tanımlamadan önce çağıramazsınız. Tanımlamadan önce bir işlev ifadesine erişmeye çalışmak, referans hatası.
Örneğin:
isHoisted(); // ReferenceError: Başlatmadan önce 'isHoisted'e erişilemiyor
sabit Kaldırıldı = işlev () {
konsol.kayıt("Fonksiyon kaldırıldı");
};
Ok İşlevleri: Kompakt ve Sınırlı
ES6, JavaScript'te ok işlevleri adı verilen anonim işlevler yazmak için bir kısayol tanıttı. Özellikle kısa, tek satırlık işlevlerle uğraşırken kodunuzu daha okunabilir hale getirebilecek özlü bir sözdizimine sahiptirler.
Diğer işlev oluşturma yöntemlerinin aksine, ok işlevleri işlev anahtar kelime. Bir ok işlevi ifadesi üç bölümden oluşur:
- Bir çift parantez (()) parametreleri içerir. İşlevin yalnızca bir parametresi varsa parantezleri atlayabilirsiniz.
- Bir ok (=>), eşittir işaretinden (=) ve büyüktür işareti (>).
- İşlev gövdesini içeren bir çift kaşlı ayraç. İşlev tek bir ifadeden oluşuyorsa kaşlı ayraçları atlayabilirsiniz.
Örneğin:
// Tek parametre, örtük dönüş
sabit işlevAdı = parametre =>konsol.kayıt("Tek parametreli ok işlevi")
// Birden çok parametre, açık dönüş
sabit işlevAdı = (parametre_1, parametre_2) => {
geri dönmek"Birden çok parametreli ok işlevi"
};
Kıvrımlı parantezleri atladığınızda, ok işlevi dolaylı olarak tek ifadeyi döndürür, bu nedenle geri dönmek anahtar kelime. Öte yandan, kaşlı ayraçları atlamıyorsanız, açıkça bir değer döndürmeniz gerekir. geri dönmek anahtar kelime.
Ok fonksiyonlarının da farklı bir Bu normal işlevlerle karşılaştırıldığında bağlama. Düzenli fonksiyonlarda, değeri Bu işlevi nasıl çağırdığınıza bağlıdır. Bir ok işlevinde, Bu her zaman bağlıdır Bu çevreleyen kapsamın değeri.
Örneğin:
sabit foo = {
isim: "Dave",
selamlaşmak: işlev () {
setTimeout(() => {
konsol.kayıt(“Merhaba, benim adım ${Bu.isim}`);
}, 1000);
},
};
foo.selam(); // 1 saniye sonra "Merhaba, benim adım Dave" yazılıyor
Yukarıdaki örnekte, içindeki ok işlevi selamlaşmak yöntemin erişimi var bu isim, rağmen setTimeout işlev onu çağırır. Normal bir fonksiyonun sahip olacağı Bu global nesneye bağlı.
Adından da anlaşılacağı gibi, hemen çağrılan bir işlev (IIFE), tanımlandığı anda çalışan bir işlevdir.
İşte bir IIFE'nin yapısı:
(işlev () {
// kod buraya
})();(() => {
// kod buraya
})();
(işlev (parametre_1, parametre_2) {
konsol.log (param_1 * param_2);
})(2, 3);
Bir IIFE, bir çift parantez içine alınmış bir işlev ifadesinden oluşur. İşlevi çağırmak için muhafazanın dışında bir çift parantez ile takip edin.
Kapsam oluşturmak, uygulama ayrıntılarını gizlemek ve birden çok komut dosyası arasında veri paylaşmak için IIFE'leri kullanabilirsiniz. Bir zamanlar olarak kullanıldılar JavaScript'te modül sistemi.
Birçok Farklı Şekilde Bir Fonksiyon Oluşturma
JavaScript'te işlevlerin nasıl oluşturulacağını anlamak çok önemlidir. Bu, basit bir hesaplama yapan temel bir işlev veya kodunuzun diğer bölümleriyle etkileşime giren karmaşık bir işlev için geçerlidir.
JavaScript'te işlevler oluşturmak ve kodunuzu yapılandırmak ve düzenlemek için yukarıda tartışılan teknikleri kullanabilirsiniz. Her birinin çeşitli faydaları ve uygulamaları olduğundan, taleplerinize en uygun yaklaşımı seçin.
