📄 Table of Contents

◉ Closures

🔹 But, why to use Closures at all ?

const getSecret = (secret) => {
return {
get: () => secret
};
};

Event listeners

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Closures in event listeners
</body>
<script>
const body = document.body;
const initButtons = () => {
let button;
for (var i = 0; i < 5; i++) {
button = document.createElement("button");
button.innerHTML = "Button " + i;
button.addEventListener("click", (e) => {
alert(i);
});
body.appendChild(button);
}
};
initButtons();
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Closures in event listeners
</body>
<script>
const body = document.body;
const initButton = (name, alertMessage) => {
button = document.createElement("button");
button.innerHTML = "Button " + name;
button.addEventListener("click", (e) => {
alert(alertMessage);
});
body.appendChild(button);
};
for (var i = 0; i < 5; i++) {
initButton(i, i);
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Closures in event listeners
</body>
<script>
const body = document.body;
const initButtons = () => {
let button;
for (let i = 0; i < 5; i++) {
button = document.createElement("button");
button.innerHTML = "Button " + i;
button.addEventListener("click", (e) => {
alert(i);
});
body.appendChild(button);
}
};
initButtons();
</script>
</html>

🔹 Disadvantages of using Closures in javascript.

// dev is NOT accessible herefunction someFunc() {
// dev is accessible here
const dev = 'to';
}
// dev is NOT accessible here
// Parent functionfunction parent() {
// Local variable of the parent function
const prefix = 'I am a ';
// Child function
return function(noun) {
// The child function depends on the variables of the parent function.
return prefix + noun;
};
}
// Store the returned child function
const getSentence = parent();
// At this point, `parent()` has finished executing.
// Despite that, the `prefix` variable is still
// accessible to the child function. More on that later.
const job = getSentence('programmer');// What is the value of `job`?
console.log(job); // 'I am a programmer'

A closure is like a “snapshot” of the environment a function is in when it is executed. Its closure is its own internal copy of the environment.

Closures in action.

var counter = 0; function increase() {
counter += 1; // increment its current value.
console.log(counter);
}
increase();
increase();
increase();
// The counter is now equal to 3.
function increase() {
var counter = 0;
counter += 1; // increment its current value.
console.log(counter);
}
increase();
increase();
increase();
// We expect the value of the count variable is 3, but it will be 1.
var increase = (function() {
var counter = 0;
return function () {
return counter += 1;
}
console.log(counter);
})(); //* IIFE Auto-invoked function.increase();
increase();
increase();
// The counter is now equal to 3.

A common mistake

function count() {
var i;
for (i = 1; i <= 3; i ++) {
setTimeout (function () {
console.log ('The count value is '+ i);
}, 1000); // 1000 milliseconds = 1 second
}
}
count();
function count() {
var i;
function display(j) {
return function () {
console.log ('The counter value is ' + j);
}
};
for (i = 1; i <= 3; i ++) {
setTimeout (display(i), 1000);
}
}
count();

🔹 Alternative of Closures ?

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.