Closures dan Arrow Function pada JavaScript - Catatan Harian Day 6

    Hai, hari ini saya ingin mengulas ulang mengenai beberapa hal yang saya pelajari mengenai Closures dan Arrow Function pada JavaScript.

Oke, mari kita langsung saja ulas semuanya 😁

Memahami Closures dalam JavaScript

Closures adalah salah satu konsep penting dalam JavaScript. Mereka memungkinkan  function untuk mengakses variabel dari, bahkan setelah function tersebut selesai dieksekusi. Mari kita jelajahi apa itu closures, bagaimana cara kerjanya, dan mengapa mereka begitu berguna dengan contoh-contoh yang jelas.

Apa itu Closures?

Closure adalah kombinasi antara function dan lexical scope (posisi variabel) di mana function tersebut dideklarasikan. Dengan kata lain, closure memungkinkan sebuah function untuk "mengingat" dan mengakses variabel dari lingkup luarannya meskipun  function tersebut dieksekusi di luar.

Contoh Sederhana Closure

Mari kita lihat contoh berikut untuk memahami konsep closure:

// contoh closure

function trowSkill(skill) {

    return function(nama) {

        console.log(`user ${nama} terkena ${skill}`);

    }

}

let skill1 = trowSkill('Light Sword');

let skill2 = trowSkill('Dark Sword');

let skill3 = trowSkill('Heal Sword');

console.dir(skill3);

console.log(skill2('Haenzi'));

Output :

Dalam contoh di atas, fungsi `trowSkill` mengembalikan function yang menggunakan variabel `skill`. Meskipun `trowSkill` telah selesai dieksekusi, function yang dikembalikan tetap memiliki akses ke variabel `skill`. Inilah yang disebut dengan closure.

Contoh Closure Dinamis

Closures juga bisa digunakan untuk membuat function yang dinamis. Misalnya:

// Dinamis Closure

function init3() {

    function useSkill(skill) {

        console.log(skill);

    }

    return useSkill;

    // console.dir(useSkill); // cek closure

}

// Simple Dinamis Closure

function init4() {

    return function(skill) {

        console.log(skill);

    }

    // console.dir(useSkill); // cek closure

}

let cekSkill = init3();

let cekSkillQuick = init4();

cekSkill('Space Teleport');

cekSkillQuick('Gate');

Output :

Pada contoh ini, `init3` dan `init4` adalah function yang mengembalikan function lain, yang menciptakan closure. Ketika function yang dikembalikan dipanggil, function tersebut mengakses parameter `skill` melalui closure, memungkinkan function tersebut untuk mencetak nilai `skill` yang diteruskan kepadanya, bahkan setelah function luar (`init3` atau `init4`) selesai dieksekusi.

Perbedaan Closure dan Non-Closure

Sekarang mari kita bandingkan fungsi yang menggunakan closure dan yang tidak menggunakan closure untuk memahami perbedaannya:

Bukan Closure:

// Bukan Closure

function init1() {

    let skill = 'Water Barrier'

    function useSkill() {

        let skill = 'Light Barrier'

        console.log(skill);

    }

    useSkill();

    // console.dir(useSkill); // cek closure

}

Output :

Dalam contoh ini, `useSkill` mendefinisikan variabel `skill` di dalam scope-nya sendiri, sehingga ia tidak menggunakan variabel `skill` dari lingkup luar (`init1`). Hasilnya, yang tercetak adalah `'Light Barrier'`.

Closure:

// Closure

function init2() {

    let skill = 'Water Barrier'

    function useSkill() {

        console.log(skill);

    }

    useSkill();

    // console.dir(useSkill); // cek closure

}

Output :

Di sini, `useSkill` menggunakan variabel `skill` dari lingkup luar (`init2`), sehingga hasilnya adalah `'Water Barrier'`.

Memahami Arrow Function dalam JavaScript

Arrow function adalah salah satu fitur yang diperkenalkan dalam ECMAScript 6 (ES6) yang membawa cara baru dalam mendefinisikan fungsi di JavaScript. Mereka menawarkan sintaks yang lebih ringkas dibandingkan dengan function expression tradisional dan juga membawa perbedaan perilaku dalam penggunaan `this`.

Apa itu Arrow Function?

Arrow function adalah cara sederhana untuk menulis fungsi dalam JavaScript. Berikut adalah contoh perbandingan antara function expression dan arrow function:

// Function Expression

const tampilSkill = function (skill) {

    return `Skill: ${skill}`;

}

console.log(tampilSkill('Thunder Slash'));

// Arrow Function

const tampilSkill = (skill) => { return `Skill: ${skill}`};

console.log(tampilSkill('Bajra Gun'));

Output Function Expression :

Output Arrow Function :

Dalam contoh di atas, kita bisa melihat bahwa arrow function mengurangi kebutuhan untuk menulis kata kunci `function` dan memberikan cara penulisan yang lebih ringkas.

Kegunaan Arrow Function

1. Sintaks yang Lebih Sederhana:

   Arrow function memberikan cara yang lebih ringkas dan mudah dibaca untuk menulis fungsi, terutama fungsi satu baris.

const tampilSkill3 = skill => `Skill: ${skill}`;

   Pada contoh ini, jika fungsi hanya memiliki satu parameter, tanda kurung bisa dihilangkan, dan jika fungsi hanya mengembalikan nilai, kita bisa menghilangkan `return` serta kurung kurawal.

2. Penggunaan `this`:

Function Expression

Pertama, kita buat sebuah objek `Character` yang memiliki properti `skills` dan metode `getSkills` untuk menampilkan daftar skill.

// this pada arrow funcution

function Character(name, skills) {

    this.name = name;

    this.skills = skills;

}

Character.prototype.getSkills = function() {

    return this.skills.map(function(skill) {

        return `Skill: ${skill}`;

    });

};

const zoro = new Character('Zoro', ['One Sword Style', 'Two Sword Style', 'Three Sword Style']);

console.log(zoro.getSkills());

Output :

Pada contoh di atas, `this` di dalam metode `getSkills` masih merujuk ke objek `Character` (`zoro`) karena `map` menggunakan function expression biasa. Jadi, `this.skills` akan merujuk ke array `skills` dari objek `zoro`.

Arrow Function

Sekarang, kita ubah `getSkills` menjadi menggunakan arrow function dalam `map`:

function Character(name, skills) {

    this.name = name;

    this.skills = skills;

}

Character.prototype.getSkills = function() {

    return this.skills.map(skill => `Skill: ${skill}`);

};

const zoro = new Character('Zoro', ['One Sword Style', 'Two Sword Style', 'Three Sword Style']);

console.log(zoro.getSkills());

Output :

Dengan menggunakan arrow function, `this` tetap merujuk ke objek `Character` (`zoro`) karena arrow function tidak memiliki `this` sendiri dan mengambil `this` dari konteks di mana `getSkills` didefinisikan.

Menggunakan Arrow Function untuk `this` dalam Objek

Jika kita menggunakan arrow function langsung di dalam objek atau class:

// this pada arrow funcution

function Character(name, skills) {

    this.name = name;

    this.skills = skills;

}

Character.prototype.getSkills = () => {

    return this.skills.map(skill => `Skill: ${skill}`);

};

const zoro = new Character('Zoro', ['One Sword Style', 'Two Sword Style', 'Three Sword Style']);

console.log(zoro.getSkills());

Output :

Dalam contoh ini, arrow function digunakan dalam `getSkills`. Namun, karena arrow function tidak memiliki `this` sendiri dan hanya mengambil `this` dari lexical scope di mana fungsi tersebut didefinisikan, `this.skills` akan menjadi `undefined` atau akan melempar error karena `this` tidak merujuk ke instance `Character` (`zoro`), melainkan ke global object atau `undefined` dalam strict mode.

Contoh Penggunaan Arrow Function

Berikut adalah beberapa contoh penggunaan arrow function:

1. Fungsi Satu Baris:

// tanpa parameter

const tampilSkill4 = () => `Skill: -`;

console.log(tampilSkill4());

Output :

2. Menggunakan dalam `map`:

let skills2 = ['Slime Sword', 'Iron Sword', 'Invisible Sword'];

let jumlahHuruf2 = skills2.map(skill => skill.length);

console.log(jumlahHuruf2);

Output :

3. Mengembalikan Objek:

let skills3 = ['Slime Shield', 'Iron Shield', 'Invisible Shield'];

let jumlahHuruf3 = skills3.map(skill => ({ skill: skill, jmlHuruf: skill.length}));

console.table(jumlahHuruf3);

Output :

Jadi, itulah sedikit ulasan mengenai pembelajaran saya hari ini tentang Closures dan Arrow Function di JavaScript. Jika ada yang salah mohon untuk koreksi dengan komen di bawah ini untuk diskusi nya

Terimakasih 😁