Function Declarations vs. Function Expressions

Perbedaan utama antara function expression dan function declaration, yaitu pada function expression nama fungsi dapat dihilangkan dan disebut sebagai anonymous functions.

Function Declarations

Function yang dibuat dengan function declaration adalah function object dan memiliki semua properti, metode, dan perilaku dari function objects. Buka link ini untuk informasi lebih jelas tentang function. Berikut adalah contoh function declaration:

function lebarKaliPanjang(lebar, panjang) {
  return lebar * panjang;
}

console.log(lebarKaliPanjang(2, 7));
// logs 14

Function Expression

Function expression sangat mirip dan memiliki syntax yang hampir sama dengan function declaration. Function expression dapat digunakan sebagai IIFE (Immediately Invoked Function Expression) yang dapat berjalan segera setelah didefinisikan. Berikut adalah contoh function expression:

const lebarKaliPanjang = function (lebar, panjang) {
  return lebar * panjang;
}

console.log(lebarKaliPanjang(2, 7));
// logs 14

Contoh dengan penggunaan arrow function:

const lebarKaliPanjang = (lebar, panjang) => {
  return lebar * panjang;
}

console.log(lebarKaliPanjang(2, 7));
// logs 14

Hoisting

Hoisting adalah mekanisme JavaScript dimana variabel dan function declaration dipindahkan ke atas script. Akan tetapi hoisting tidak berlaku untuk function expression. Untuk variable, hoisting hanya berlaku pada variable yang dibuat dengan var, tapi tidak berlaku pada variable dengan cakupan block seperti let dan const.

Seperti diuraikan di atas bahwa hoisting berlaku pada function declaration, contoh sebagai berikut:

wkwk(); // logs "berhasil!"

function wkwk() {
  console.log('berhasil!');
}

Hoisting tidak berlaku pada function expression, contoh sebagai berikut:

gakTau(); // logs Error: gakTau is not a function

var gakTau = function () {
  console.log('apapun');
};

Variable Hoisting

Contoh hoisting pada variable:

var namaSaya; // declaration
namaSaya = 'Aho';
console.log(namaSaya); // logs Aho

Contoh berikut akan manghasilkan output yang sama dengan contoh di atas:

namaSaya = 'Aho';
var namaSaya;
console.log(namaSaya); // logs Aho

Contoh hoisting tidak berlaku pada variable dengan keyword let dan const:

namaSaya = 'Aho';
let namaSaya;

console.log(namaSaya); // logs Error: Cannot access 'namaSaya' before initialization

namaAnda = 'Aho';
const namaAnda;
console.log(namaAnda); // logs Error: Missing initializer in const declaration

Credit

Image by Joan Gamellfrom Unsplash

Function Declarations vs. Function Expressions