A Closure in Javascript is when a function enclosed inside another function is returned by enclosing function. A closure is formed when the inner function maintains access to variable outside its scope aka lexical scope; access to variables and arguments of the outer/parent function even after it has executed.
Let's create a tax calculator closure function to calculate taxes of alcoholic and non-alcoholic drinks based on their tax rates.
const taxCalculator = (vat ) => {
return function taxableAmount (amount) {
const tax = amount * vat / 100;
return tax
}
}
//alcoholic drinks have their on VAT, lets say 16%
const alcoholTax = taxCalculator(16)
const alcoholA = alcoholTax(1200) // an Alcohol that costs 12,00
const alcoholB=alcoholTax(800) // an Alcohol that costs 8,00
//non-alcoholic have their own VAT, let say 12%
const nonAlcoholTax = taxCalculator(12);
const water = nonAlcoholTax(500)
const Juice=nonAlcoholTax(300)
As you can see, each drink will always remember their tax rate based on the whether it is alcoholic drink or non-alcoholic.
In react js, JavaScript UI library, event handlers are declared inline on the JSX as such.
<button onClick={handleClick}>Click me</button>
If the event handler has an argument, it will then be invoked inside a function as such.
function ActionButtons(){
const actions = ["Create", "Edit", "Delete"]
const handleAction = (action) => {
switch (action) {
case action[0]:
//do something
break;
case action[1]:
//do something
break;
case action[2]:
//do something
break;
default:
// do nothing
break;
}
}
return (
<div className="flex flex-col md:flex-row w-full p-4 gap-4 ">
{ actions.map(action =>
<button className="w-full md:w-60" onClick={()=>handleAction(action)}>{action}</button>)}
</div>)
}
Note the handleAction is encapsulated by an arrow function when assigning it to the onclick event handler.
With closure we can simply call handleAction with a action argument then return an inner function that grabs the action argument and performs the rest of the actions like so.
function ActionButtons() {
const actions = ["Create", "Edit", "Delete"];
const handleAction = (action) => {
return () => {
console.log(` ${action} Action button clicked`);
switch (action) {
case action[0]:
//do something
break;
case action[1]:
//do something
break;
case action[2]:
//do something
break;
default:
// do nothing
break;
}
};
};
return (
<div className="flex flex-col md:flex-row w-full p-4 gap-4 justify-between">
{actions.map((action) => (
<button className="w-full md:w-60" onClick={handleAction(action)}>
{action}
</button>
))}
</div>
);
}
Notice how we invoke the handleAction directly on the OnClick event? also notice we have refactored the handleAction function so that it returns an arrow function performing the necessary actions?
The handleAction is invoked when the component mounts, a closure occurs when the arrow function returned inside handleAction grabs and holds onto to the value of the argument on handleAction even though it (handleAction) executed during the first render.
It is a neat way of handling events in Javascript.