Ekspresi fungsi

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?

Ya
Tidak