JavaScript - Closures (Terjemahan)

Hai teman-teman, bakal bintang coding di masa depan! ? Hari ini, kita akan memulai perjalanan menarik ke dunia closure di JavaScript. Jangan khawatir jika itu terdengar sedikit menakutkan - saya berjanji, pada akhir tutorial ini, Anda akan menjadi ahli closure! Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita masuk ke dalam!

Apa Itu Closure?

Bayangkan Anda memiliki sebuah kotak magis yang ingat semua yang ada didalamnya, bahkan setelah Anda menutupnya. Itu sebenarnya adalah apa itu closure di JavaScript!

Closure adalah sebuah fungsi yang memiliki akses ke variabel di lingkungan leksikal eksternalnya, bahkan setelah fungsi eksternal tersebut telah mengembalikan nilai. Itu seperti fungsi membawa seutas ransel variabel yang bisa digunakan kapanpun itu 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(); // Output: 15

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

Lexical Scoping

Sebelum kita mendalamkan diskusi tentang closure, kita perlu memahami lexical scoping. Itu adalah istilah yang indah yang berarti sebuah fungsi bisa mengakses variabel dari lingkungan eksternalnya.

let name = "Alice";

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

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

Di sini, greet bisa mengakses variabel name karena lexical scoping. Itu seperti greet bisa 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(); // Output: 1
counter(); // Output: 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 bahwa fungsi bisa 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)); // Output: 10
console.log(double(3)); // Output: 6

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

Dilema Counter

Mari kita lihat masalah umum yang closure bisa solvikan:

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

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

Di sini, closure memungkinkan kita memiliki variabel pribadi (count) yang hanya bisa diakses melalui metode yang disediakan.

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));  // Output: 7
console.log(add10(2)); // Output: 12

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

Contoh

Ini adalah contoh praktis lainnya tentang closure:

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

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

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

Contoh ini menunjukkan bagaimana closure bisa 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 bisa membuat variabel pribadi	function counter() { let count = 0; return { increment: () => ++count, getValue: () => count }; }
Pabrik fungsi	Membuat fungsi dengan parameter awal	function multiply(x) { return (y) => x * y; }
Menyimpan state	Mengikuti data di antara pemanggilan fungsi	function createGame() { let score = 0; return { addPoint: () => ++score, getScore: () => score }; }

Dan begitulah, teman-teman! Kita telah melintasi negeri closure, dari dasar hingga konsep yang lebih tingkat tinggi. Ingat, seperti keterampilan lainnya, menguasai closure memerlukan latihan. Jadi jangan frustasi jika itu belum beresonasi segera - terus coding, terus berlatih, dan segera Anda akan bisa menggunaan kekuatan closure seperti seorang ahli JavaScript! ?‍♂️✨

Credits: Image by storyset