Ekspresi fungsi

Ekspresi fungsi adalah fungsi yang dibuat tempat sebuah ekspresi diharapkan. Anda akan sering menemukan ekspresi fungsi sebagai nilai yang ditetapkan ke sebuah 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() { };

Selanjutnya, Anda dapat memanggil ekspresi fungsi tersebut 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 yang 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 oleh 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. Ekspresi fungsi bernama juga dapat memanggil dirinya sendiri secara rekursif, meskipun ini bukan 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 disebut "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, fungsi panah terdiri dari sepasang tanda kurung yang cocok yang berisi nol atau beberapa parameter, 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 hanya menggunakan satu parameter, Anda dapat mengecualikan tanda kurung awal:

const myFunction = myParameter => {};

Jika Anda ingin isi fungsi menampilkan nilai ekspresi tunggal, Anda tidak harus menyertakan isi fungsi dalam tanda kurung kurawal maupun kata kunci return:

const myFunction = () => 2 + 2

myFunction()
> 4

Fungsi panah bersifat unik karena tidak memiliki konteksnya sendiri untuk nilai arguments atau this. Sebaliknya, keduanya mewarisi kedua nilai dari lingkungan yang melingkupi secara leksik fungsi panah, fungsi kurung terdekat yang menyediakan konteks tersebut.

function myParentFunction() {
    this.myProperty = true;
    let myFunction = () => {
            console.log( this );
    }
    myFunction();
};

let myInstance = new myParentFunction();
> Object { myProperty: true }

Memanggil fungsi panah

Fungsi panah tidak mengikat argumen dengan cara yang sama seperti jenis fungsi lainnya. Objek arguments dalam isi fungsi panah mewarisi nilainya dari lingkungan terdekat yang mencakup fungsi panah yang terdekat dari fungsi panah:

function myFunction() {
    let myArrowFunction = () => {
            console.log( arguments[ 0 ] );
    }
    myArrowFunction( true );
};

myFunction( false );
> false

Dalam contoh ini, fungsi luar yang dipanggil dengan argumen false memanggil fungsi panah dalam dengan argumen true. Karena objek arguments di dalam fungsi panah me-resolve ke binding di fungsi luar, fungsi dalam akan mencatat false fungsi luar.

Jika tidak ada objek arguments yang akan diwarisi dari konteks induk, objek arguments fungsi panah tidak akan ditentukan, dan mencoba mengaksesnya akan menyebabkan error:

let myArrowFunction = () => {
    console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined

Ekspresi Fungsi yang Segera Dipanggil (IIFE)

Ekspresi Fungsi Segera Dipanggil (IIFE), yang terkadang juga disebut "fungsi anonim yang dieksekusi sendiri", adalah ekspresi fungsi yang dipanggil segera setelah ditentukan. IIFE menggunakan ekspresi fungsi yang dibuat dengan menyertakan fungsi dalam operator pengelompokan. Sepasang tanda kurung kedua yang cocok kemudian memanggil fungsi, baik segera setelah definisi fungsi itu sendiri atau segera setelah operator pengelompokan. Jika Anda menggunakan fungsi standar, tidak ada perbedaan praktis antara kedua pendekatan tersebut:

(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 akhirnya kemudian dievaluasi sebagai ekspresi yang dikelompokkan. Hasilnya sama untuk kedua kasus tersebut.

Namun, ada perbedaan jika IIFE Anda berupa fungsi panah. Dalam hal ini, tanda kurung yang digunakan untuk memanggil fungsi harus berada di luar operator pengelompokan, karena fungsi panah itu sendiri bukan merupakan ekspresi, tetapi harus dibuat dalam konteks yang diharapkan merupakan ekspresi. Mencoba memanggil fungsi panah dari dalam cakupan operator pengelompokan 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 akan ditentukan, sehingga tanda kurung yang mengikutinya akan memanggil ekspresi yang dikelompokkan:

( () => {
    console.log( "IIFE." );
} )();
> "IIFE."

Aplikasi lama, yang sering menggunakan IIFE untuk mengelola cakupan, khususnya untuk menghindari pencemaran cakupan global dengan variabel cakupan fungsi dan deklarasi fungsi. Sebelum cakupan blok diperkenalkan di ES6, sudah menjadi praktik yang umum untuk menggabungkan seluruh skrip dalam IIFE untuk mencegah polusi yang tidak disengaja pada cakupan global.

Menguji pemahaman Anda