-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathclosures.js
155 lines (138 loc) · 3.68 KB
/
closures.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
// TODO closure
// closure are property which states, the inner function has access to the variable that are declared in the outer function
// closure is combination of function + lexical environment in which the function is created
// var i = 10;
// function outer() {
// var j = 20;
// console.log(i, j);
// function inner() {
// var k = 30;
// console.log(j, k);
// }
// inner();
// }
// outer();
// output
// 10 20
// 20 30
//now instead of calling inner inside outer let's return inner function
// var i = 10;
// function outer() {
// var j = 20;
// console.log(i, j);
// var inner = function () {
// var k = 30;
// console.log(j, k);
// }
// return inner;
// }
// var inner = outer();
// inner()
// output
// 10 20
// 20 30
// now how the output is same
// ideally the variable j should be cleaned up from memory because execution is over
// but due to the closure property it will be there. here j will be there.
// Let's update the above code to explore more on closure
// var i = 10;
// function outer() {
// var j = 20;
// console.log(i, j);
// var inner = function () {
// var k = 30;
// console.log(j, k);
// j++;
// k++;
// }
// return inner;
// }
// var inner = outer();
// inner()
// inner()
// k is not updated in the second call
// if we do j++ than it will be get updated
// now let's print i as well and increment it as well.
// var i = 10;
// function outer() {
// var j = 20;
// console.log(i, j);
// var inner = function () {
// var k = 30;
// console.log(i, j, k);
// i++;
// j++;
// k++;
// }
// return inner;
// }
// var inner = outer();
// inner()
// inner()
// here i will also be incremented
// output
// 10 20 30
// 11 21 30
// now let's do even more, make an another call to outer and then to inner
// var i = 10;
// function outer() {
// var j = 20;
// console.log(i, j);
// var inner = function () {
// var k = 30;
// console.log(i, j, k);
// i++;
// j++;
// k++;
// }
// return inner;
// }
// var inner = outer();
// inner()
// inner = outer()
// inner()
// here only i is getting incremented and shown
// j,k will not, because in another call to outer j will be 20.
// output
// 10 20 30
// 11 20 30
// * closures and let
// for(var i = 1;i <= 5; i++){
// setTimeout(function () {
// console.log(i);
// }, 1000);
// }
//this will print 6 five times.
//loop will continue to run but the function will be called after 1 sec only.
// so when that function will be called after delay, i will be 6
// we can use let to resolve this.
// for(let i = 1;i <= 5; i++){
// setTimeout(function () {
// console.log(i);
// }, 1000);
// }
// so now, the i has a block scope
// in the every iteration new i will be declared and used,
// every function is bind with the new i within the iteration
// now we've question, if i is declared new in each iteration, how increment is performed?
// consider this piece of code
// var arr = new Array(6)
// for (let i = 1; i <= 5; i++) {
// i++;
// array[i] = function () {
// console.log(i)
// }
// i--;
// }
// so for each iteration another function is called and in there new instance of that var is created.
// * Arrow functions
// consider below code
// var multiply = function (x, y) {
// return x*y
// }
// console.log(multiply(4,6))
// so this will be easy using arrow functions
var multiply = (x,y) => {return x * y};
console.log(multiply(4,6))
// if there is single statement we can omit {}
// and even if the one statement is return, than we can omit return i.e. (x,y) => x*y