JavaScript - Closures

Hai there, bakal bakat coding superstars! ? Hari ini, kita bakal melangkah ke dalam dunia menarik JavaScript closures. Jangan khawatir jika ini terdengar menakutkan - saya berjanji, pada akhir tutorial ini, Anda akan menjadi ahli closure! Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita masuk ke dalam!

Apa Itu Closure?

Bayangkan Anda punya kotak ajaib yang ingat semua yang di dalamnya, bahkan setelah Anda menutupnya. Itu sebenarnya apa itu closure di JavaScript!

Sebuah closure adalah fungsi yang memiliki akses ke variabel di lingkungan leksikal eksternalnya, bahkan setelah fungsi eksternalnya selesai dieksekusi. Itu seperti fungsi membawa sebuat tas kecil variabel yang bisa digunakan kapan saja saat ia membutuhkannya.

mari kita lihat contoh sederhana:

function outerFunction(x) {
let y = 10;
function innerFunction() {
console.log(x + y);
}
return innerFunction;
}

let closure = outerFunction(5);
closure(); // Outputs: 15

Dalam contoh ini, innerFunction adalah closure. Itu "ingat" nilai x dan y bahkan setelah outerFunction selesai dieksekusi.

Lexical Scoping

Sebelum kita mendalami closure, kita perlu memahami lexical scoping. Ini adalah istilah yang keren yang berarti fungsi dapat mengakses variabel dari lingkungan eksternalnya.

let name = "Alice";

function greet() {
console.log("Hello, " + name + "!");
}

greet(); // Outputs: Hello, Alice!

Di sini, greet dapat mengakses variabel name karena lexical scoping. Itu seperti greet dapat melihat semua yang ada di lingkungannya.

Fungsi Bersarang

Closure sering melibatkan fungsi bersarang. Mari kita lihat contoh:

function outer() {
let count = 0;
function inner() {
count++;
console.log(count);
}
return inner;
}

let counter = outer();
counter(); // Outputs: 1
counter(); // Outputs: 2

Di sini, inner bersarang di dalam outer. Magic terjadi karena inner ingat variabel count dari lingkungan eksternalnya, bahkan setelah outer selesai dieksekusi.

Mengembalikan Fungsi

Salah satu hal menarik tentang JavaScript adalah fungsi dapat mengembalikan fungsi lain. Ini adalah aspek penting dari closure.

function multiplier(x) {
return function(y) {
return x * y;
};
}

let double = multiplier(2);
console.log(double(5)); // Outputs: 10
console.log(double(3)); // Outputs: 6

Dalam contoh ini, multiplier mengembalikan fungsi yang ingat nilai x. Fungsi ini adalah closure.

Dilema Counter

Mari kita lihat masalah umum yang closure dapat solve:

function createCounter() {
let count = 0;
return {
increment: function() {
count++;
},
getCount: function() {
return count;
}
};
}

let counter = createCounter();
counter.increment();
counter.increment();
console.log(counter.getCount()); // Outputs: 2

Di sini, closure memungkinkan kita memiliki variabel privat (count) yang hanya dapat diakses melalui metode yang diberikan.

Contoh: JavaScript Closures

Mari kita masuk ke contoh yang lebih kompleks untuk memperkuat pemahaman kita:

function makeAdder(x) {
return function(y) {
return x + y;
};
}

let add5 = makeAdder(5);
let add10 = makeAdder(10);

console.log(add5(2));  // Outputs: 7
console.log(add10(2)); // Outputs: 12

Dalam contoh ini, makeAdder membuat closure yang "ingat" nilai x. Kita dapat membuat beberapa fungsi penambahan dengan nilai awal yang berbeda.

Contoh

Ini adalah contoh praktis lain dari closure:

function createGreeter(greeting) {
return function(name) {
console.log(greeting + ", " + name + "!");
};
}

let greetHello = createGreeter("Hello");
let greetHi = createGreeter("Hi");

greetHello("Alice"); // Outputs: Hello, Alice!
greetHi("Bob");      // Outputs: Hi, Bob!

Contoh ini menunjukkan bagaimana closure dapat digunakan untuk membuat fungsi yang disesuaikan.

Manfaat Closure

Closure menawarkan beberapa manfaat:

1. Privasi data
2. Pabrik fungsi
3. Menyimpan state

Mari kita lihat ini dalam tabel:

Manfaat	Deskripsi	Contoh
Privasi data	Closure dapat membuat variabel privat	function counter() { let count = 0; return { increment: () => ++count, getValue: () => count }; }
Pabrik fungsi	Membuat fungsi dengan parameter awal yang tetap	function multiply(x) { return (y) => x * y; }
Menyimpan state	Mengelola data selama panggilan fungsi	function createGame() { let score = 0; return { addPoint: () => ++score, getScore: () => score }; }

Dan itu saja, teman-teman! Kita telah melintasi negeri closure, dari dasar hingga konsep yang lebih maju. Ingat, seperti keterampilan lainnya, memahami closure memerlukan latihan. Jadi jangan frustasi jika itu tidak langsung berjalan - terus coding, terus eksperimen, dan segera Anda akan bisa menggunaan kekuatan closure seperti seorang ahli JavaScript! ?‍♂️✨

Credits: Image by storyset