29/10/2024
Closures are an essential feature of many programming languages, especially in JavaScript. At their core, closures allow a function to "remember" the environment in which it was created, retaining access to variables even when that function is executed in a different scope. Let's break this down in a way that's easy to digest:
A closure is created when a function is defined within another function and it captures the variables from the outer function’s scope. This means the inner function can use those variables, even after the outer function has completed execution. Essentially, closures enable a function to have "private" data.
To understand how closures work, let’s take a look at the following example:
function outerFunction() { let outerVariable = 'I am from outer scope'; function innerFunction() { console.log(outerVariable); // Accessing outerVariable } return innerFunction; } const closureFunction = outerFunction(); closureFunction(); // Output: I am from outer scope
outerFunction
. Inside this function, we have a variable called outerVariable
.innerFunction
that logs outerVariable
to the console.outerFunction
, which means we can now store it in a variable (closureFunction
).outerFunction
has finished executing, closureFunction
still has access to outerVariable
due to the closure. When we call closureFunction()
, it accesses and logs outerVariable
.Closures are commonly utilized in several scenarios, such as:
Data Privacy: Closures allow developers to create private variables. For example, you can create object-like structures without exposing internal state.
function createCounter() { let count = 0; // Private variable return { increment: function() { count++; return count; }, decrement: function() { count--; return count; }, getCount: function() { return count; } }; } const counter = createCounter(); console.log(counter.increment()); // Output: 1 console.log(counter.increment()); // Output: 2 console.log(counter.getCount()); // Output: 2
Event Handlers: Closures are particularly useful in event handling, where you may want to access certain variables when an event occurs.
Currying: You can use closures to build functions with pre-set parameters (partial applications).
By well understanding closures, developers can write more expressive and flexible code, creating maintainable and clean applications.
17/11/2024 | VanillaJS
17/11/2024 | VanillaJS
17/11/2024 | VanillaJS
17/11/2024 | VanillaJS
29/10/2024 | VanillaJS
17/11/2024 | VanillaJS
17/11/2024 | VanillaJS