Ekspresi fungsi adalah fungsi
dibuat di tempat ekspresi diharapkan. Anda akan sering menemukan ekspresi
fungsi sebagai nilai yang ditetapkan ke variabel. Meskipun deklarasi fungsi
selalu memerlukan nama, Anda dapat menggunakan ekspresi fungsi untuk membuat fungsi
anonim dengan menghapus ID dan mengikuti kata kunci function
dengan
sepasang tanda kurung yang berisi parameter opsional:
const myVariable = function() { };
Anda kemudian dapat memanggil ekspresi fungsi menggunakan ID variabel:
const myVariable = function() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
Anda juga dapat menggunakan ekspresi fungsi untuk membuat fungsi bernama menggunakan sintaksis mirip dengan deklarasi fungsi:
const myVariable = function myFunction() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
Namun, tidak seperti deklarasi fungsi, ekspresi fungsi bernama hanya dapat diakses berdasarkan nama fungsi dalam fungsi itu sendiri:
const myVariable = function myFunction() {
console.log( `I'm a ${ typeof myFunction }.`);
};
typeof myFunction;
> "undefined"
typeof myVariable;
> "function"
myVariable();
> "I'm a function."
Nama yang terkait dengan ekspresi fungsi terutama berguna untuk proses debug. J ekspresi fungsi bernama juga bisa memanggil dirinya sendiri secara rekursif, meskipun kasus penggunaan yang sangat umum dalam pengembangan modern:
const myVariable = function myFunction() {
console.log( "One second elapsed." );
setTimeout( myFunction, 1000 );
};
setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…
Ekspresi fungsi panah
Ekspresi fungsi panah (sering disebut "fungsi panah" atau, jarang, "fungsi lambda") diperkenalkan di ES6 untuk memberikan sintaksis ringkas guna membuat ekspresi fungsi anonim dengan beberapa perilaku unik.
Anda dapat membuat fungsi panah di mana pun ekspresi diharapkan, misalnya
sebagai nilai yang
ditetapkan ke variabel. Dalam bentuknya yang
paling umum, panah
{i>function<i} terdiri dari sepasang tanda kurung yang cocok yang berisi nol atau lebih
, panah yang terdiri dari satu tanda sama dengan dan karakter lebih besar dari
(=>
), dan sepasang tanda kurung kurawal yang cocok yang berisi isi fungsi:
const myFunction = () => {};
Dalam kondisi tertentu, Anda dapat membuat sintaksis yang lebih ringkas. Jika Anda hanya dengan menggunakan satu parameter, Anda dapat menghilangkan tanda kurung awal:
const myFunction = myParameter => {};
Jika Anda ingin isi fungsi menampilkan nilai ekspresi tunggal,
tidak menyertakan isi fungsi dalam tanda kurung kurawal maupun
kata kunci return
diperlukan:
const myFunction = () => 2 + 2
myFunction()
> 4
Fungsi panah bersifat unik karena mereka
tidak memiliki konteksnya sendiri untuk
arguments
atau
Nilai this
. Sebaliknya, mereka mewarisi
nilai dari fungsi panah
lingkungan yang melimpah secara leksik, lingkungan
fungsi penutup yang menyediakan konteks tersebut.
function myParentFunction() {
this.myProperty = true;
let myFunction = () => {
console.log( this );
}
myFunction();
};
let myInstance = new myParentFunction();
> Object { myProperty: true }
Fungsi panah panggilan
Fungsi panah tidak mengikat argumen dengan cara yang sama seperti
jenis fungsi lainnya.
Objek arguments
dalam isi fungsi panah mewarisi nilainya dari
fungsi panah itu
yang terdekat
lingkungan yang inklusif secara leksik:
function myFunction() {
let myArrowFunction = () => {
console.log( arguments[ 0 ] );
}
myArrowFunction( true );
};
myFunction( false );
> false
Dalam contoh ini, fungsi outer yang dipanggil dengan argumen false
memanggil
fungsi panah dalam dengan argumen true
. Karena objek arguments
di dalam fungsi panah me-resolve ke pengikatan di fungsi {i>outer<i},
fungsi {i>inner<i} mencatat false
fungsi {i>outer<i}.
Jika tidak ada objek arguments
yang akan diwarisi dari konteks induk, objek arguments
fungsi
panah tidak ditentukan, dan mencoba mengaksesnya akan menyebabkan
error:
let myArrowFunction = () => {
console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined
Segera Ekspresi Fungsi yang Dipanggil (IIFE)
Ekspresi Fungsi yang Segera Dipanggil (IIFE), yang terkadang juga disebut "fungsi anonim yang mengeksekusi sendiri", adalah ekspresi fungsi yang langsung dipanggil saat ditentukan. IIFE menggunakan ekspresi fungsi yang dibuat oleh menyertakan fungsi dalam operator pengelompokan. Sepasang tanda kurung kedua yang cocok kemudian memanggil fungsi, setelah definisi fungsi itu sendiri atau segera setelah pengelompokan, operator. Jika Anda menggunakan fungsi standar, tidak ada perbedaan praktis antara dua pendekatan:
(function() {
console.log( "IIFE.")
}
)();
> "IIFE."
(function() {
console.log( "IIFE.")
}
());
> "IIFE."
Contoh pertama memanggil ekspresi fungsi yang dikelompokkan. Contoh kedua memanggil deklarasi fungsi di dalam operator pengelompokan, dan hasil akhir kemudian dievaluasi sebagai ekspresi yang dikelompokkan. Hasilnya sama dalam kedua kasus.
Namun, ada perbedaan jika IIFE Anda adalah fungsi panah. Di sini huruf besar/kecil, tanda kurung yang digunakan untuk memanggil fungsi harus berada di luar pengelompokan operator, karena fungsi panah itu sendiri bukanlah ekspresi, tetapi harus dibuat dalam konteks di mana ekspresi diharapkan. Mencoba memanggil dari dalam cakupan operator pengelompokan akan berarti memanggil fungsi panah yang belum dibuat dalam konteks ekspresi:
( () => {
console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical
Karena operator pengelompokan mengharapkan ekspresi, fungsi panah di dalamnya ditentukan, sehingga tanda kurung yang mengikutinya memanggil ekspresi yang dikelompokkan:
( () => {
console.log( "IIFE." );
} )();
> "IIFE."
Aplikasi lama, sering menggunakan IIFE untuk mengelola cakupan, terutama untuk menghindari pencemaran cakupan global dengan variabel cakupan fungsi dan deklarasi fungsi. Sebelum pengenalan cakupan blok di ES6, adalah praktik yang umum untuk menggabungkan seluruh skrip dalam IIFE untuk mencegah polusi yang tidak disengaja dari ruang lingkup global.
Menguji pemahaman Anda
Dapatkah Anda memanggil ekspresi fungsi bernama berdasarkan nama di luar fungsi?