Skip to content

Commit 45f436f

Browse files
adityar45adityar45
committed
JS-Closure
1 parent 1d3e53e commit 45f436f

8 files changed

Lines changed: 169 additions & 0 deletions

File tree

‎JavaScript/JavaScript-Practice/07-BlockScope-and-Shadowing/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Scope of variable</title>
7+
<script src="index.js"></script>
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>

‎JavaScript/JavaScript-Practice/07-BlockScope-and-Shadowing/index.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
//Block scope and Shadowing
2+
3+
var a = 10; //Global Scope
4+
let b = 20; //In script scope not as global
5+
const c = 30; //In script scope not as global
6+
7+
{
8+
var a = 100;
9+
let b = 200;
10+
const c = 300;
11+
console.log(a); //100
12+
console.log(b); //200
13+
console.log(c); //300
14+
}
15+
16+
//Known as Shadowing
17+
console.log(a); //100
18+
console.log(b); //20
19+
console.log(c); //30
20+
21+
22+
//Illegal shadowing let -> var but vice versa will work
23+
//var -> let possible
24+
25+
26+
//Scope rule is same for normal function and arrow function

‎JavaScript/JavaScript-Practice/08-Closure/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Scope of variable</title>
7+
<script src="index.js"></script>
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>

‎JavaScript/JavaScript-Practice/08-Closure/index.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
//Closures in JS ->
2+
//A function bundled together with its lexical scope forms a closure
3+
/*Uses :
4+
*Module Design pattern
5+
*Currying
6+
*Function like once
7+
*maintaining state in async world
8+
*setTimeouts
9+
*Iterators
10+
*and many more
11+
*/
12+
function x() {
13+
var a = 7;
14+
function y() {
15+
console.log(a);
16+
}
17+
return y; //returning a function y()
18+
}
19+
20+
var z = x();
21+
console.log(z); //it will return the whole function y
22+
z(); //7 as z contains function alongwith its lexical parent scope and there a is present.
23+
24+
function a() {
25+
var b = 7;
26+
function c() {
27+
console.log(b);
28+
}
29+
var b = 100;
30+
return c; //returning a function y()
31+
}
32+
33+
var d = a();
34+
console.log(d); //returns the function c
35+
d(); //Here b will point to its reference so the value is 100

‎JavaScript/JavaScript-Practice/09-setTimeout/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Scope of variable</title>
7+
<script src="index.js"></script>
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>

‎JavaScript/JavaScript-Practice/09-setTimeout/index.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
//setTimeout - using var
2+
//Here, copy of i refers to the same memory location
3+
function x() {
4+
for(var i = 0; i <= 5; i++) {
5+
setTimeout( function () {
6+
console.log(i)
7+
}, i * 1000);
8+
}
9+
console.log("Hello JavaScript from x()");
10+
}
11+
//x();
12+
13+
14+
//How to fix this ?
15+
//it shouldn't refer to the same memory location everytime
16+
//wrap the setTimeout in another function and pass the value
17+
18+
function z() {
19+
for(var k = 0; k <= 5; k++) {
20+
21+
function close(k) {
22+
setTimeout( function () {
23+
console.log(k)
24+
}, k * 1000);
25+
}
26+
close(k);
27+
}
28+
console.log("Hello JavaScript from z()");
29+
}
30+
z();
31+
32+
//setTimeout - using let
33+
// j refers to a separate copy each time its value is change.
34+
//coz j is block scope it creates new copy everytime the loop is executed
35+
function y() {
36+
for(let j = 0; j < 5; j++) {
37+
setTimeout( function () {
38+
console.log(j)
39+
}, j * 1000);
40+
}
41+
console.log("Hello JavaScript from y()");
42+
}
43+
//y();
44+

‎JavaScript/JavaScript-Practice/10-JSInterviewPrep/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Scope of variable</title>
7+
<script src="index.js"></script>
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>

‎JavaScript/JavaScript-Practice/10-JSInterviewPrep/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
function outer() {
2+
3+
var a = 10;
4+
5+
function inner() {
6+
console.log(a);
7+
}
8+
9+
a = 20;
10+
11+
return inner;
12+
}
13+
14+
//use of double parantheses
15+
outer()();
16+

0 commit comments

Comments
 (0)