JavaScript'te function expressions ve function declarations

2019-08-12

Bugün JavaScript'te kullanılan iki fonksiyon yazma yöntemi arasındaki farkları öğreniyor olacağız. Eğer belli bir süredir JavaScript ile kod yazıyorsanız şimdiye kadar aşağıdaki gibi iki farklı şekilde fonksiyon yazılabildiğine şahit olmuşsunuzdur.

// Function declaration
function topla(sayi1, sayi2) {
  return sayi1 + sayi2;
}

// Function expression
const topla = function(sayi1, sayi2) {
  return sayi1 + sayi2;
};

İkisi de aşağı yukarı aynı işi yaparlar. Fakat yine de aralarında küçük ama önemli bir fark vardır. Şimdi kısaca ondan bahsedelim.

Hoisting

Web tarayıcısı ile herhangi bir JavaScript kullanan web sitesine girdiğinizde hiçbir kod çalışmadan önce function declaration yöntemiyle tanımlanmış bütün fonksiyonlar deyim yerindeyse kaynak kod satırlarının en başına sıralanır. Aslında bir nevi hiçbir JavaScript kodu çalışmadan önce bütün fonksiyonlar kendisini tanıtmış olur. Bu da bir fonksiyonu tanımlamadan önce çağırmanıza olanak sağlar ki çoğu programlama dilinde mümkün değildir.

// Bu başarılı bir şekilde çalışır!
function topla(sayi1, sayi2) {
  return sayi1 + sayi2;
}
topla(arg1, arg2); // Geriye "arg1 + arg2" işleminin sonucu döner.

// Bu da başarılı bir şekilde çalışır!
carp(arg1, arg2); // Geriye "arg1 * arg2" işleminin sonucu döner.
function carp(sayi1, sayi2) {
  return sayi1 * sayi2;
}

Yukarıdaki örneklerden de gördüğünüz üzere function declaration yöntemi ile tanımladığınız bir fonksiyon tanımlanmadan önce çağırılabiliyor. Peki bu fonksyionları diğer yöntem olan function expression yöntemiyle tanımlamış olsaydık sonuç nasıl olurdu?

// Bu başarılı bir şekilde çalışır!
const topla = function(sayi1, sayi2) {
  return sayi1 + sayi2;
};
topla(arg1, arg2); // Geriye "arg1 + arg2" işleminin sonucu döner.

// Bu kod çalışmaz!
carp(arg1, arg2); // Geriye hata mesajı döndürür!
const carp = function(sayi1, sayi2) {
  return sayi1 * sayi2;
};

Hangi yöntemi kullanmalı?

Tamamen kişiden kişiye göre değişecek bir tercih. Burada işin püf noktası bir yönteme sadık kalıp sürekli onu kullanıyor olmak. Ben genelde function expression yapısını kullanmayı tercih ediyorum. Bir fonksiyonu tanımlamadan önce çağıramayacağımı bilerek hareket ediyor, programın alt satırlarında kullandığım bir fonksiyonun muhtemelen üst satırlarda tanımlandığına emin olabiliyorum.

Not: JavaScript'te fonksiyon yazmanın bir başka yolu da "arrow function" yapısıdır. Bu yazıda ondan bahsetmeyelim ve daha fazla kavram kargaşası yaratmayalım istedim.