-
Notifications
You must be signed in to change notification settings - Fork 3
/
D-nestedfunc.js
153 lines (114 loc) · 4.91 KB
/
D-nestedfunc.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
// ----------------------
// FUNCTIONAL SCOPE - NESTED FUNCTIONS
// ----------------------
/* consider nested functions */
let globalVar = 'I am global';
// console.log(outerVar, innerVar);
function outer() {
let outerVar = 'I am outer'; // locally scoped to outer()
// console.log(innerVar);
function inner() {
let innerVar = 'I am inner';
console.log(globalVar, outerVar, innerVar);
}
inner();
}
outer();
/*
Variables
---------
globalVar: global variable, can be accessed from anywhere on the page
outerVar: locally-scoped variable, can be accessed from anywhere inside the outer() function
innerVar: also a locally scoped variable, can be accessed from anywhere inside the inner() function
Functions
---------
outer(): global function, can be accessed from anywhere on the page
inner(): locally-scoped function, can be accessed from anywhere inside the outer() function
*/
// ----------------------
// NESTED FUNCTIONS PART 2
// ----------------------
// let collision = 'I am global';
// function outer(collision) {
// // let collision = 'I am outer';
// function inner() {
// let collision = 'I am inner';
// console.log(collision); // which collision variable will be printed out here?
// }
// inner();
// }
// outer('I am outer');
// ----------------------
// NESTED FUNCTIONS PART 3
// ----------------------
// let collision = 'I am global';
// function outer(collision) {
// // let collision = 'I am outer';
// function inner() {
// console.log(collision); // which collision variable will be printed out here?
// }
// inner();
// }
// outer('I am outer');
// ----------------------
// NESTED FUNCTIONS PART 4
// ----------------------
// let collision = 'I am global';
// function outer() {
// function inner() {
// console.log(collision); // which collision variable will be printed out here?
// }
// inner();
// }
// outer('I am outer');
// ----------------------
// NESTED FUNCTIONS PART 5 - RESTRICTIONS
// ----------------------
/* note the inner function can access the scope of the outer function, but the opposite is NOT true */
// function outer() {
// let outerVar = 'I am outer';// outerVar is locally scoped to the outer() function, which means it can only be accessed from anywhere inside the outer() function
// function inner() {
// let innerVar = 'I am inner';
// console.log(outerVar, innerVar);
// // outerVar can be accessed from within the inner() function because the inner() function is declared within the outer() function
// }
// inner();
// console.log('------------------')
// console.log(innerVar); // innerVar is locally scoped to the inner() function, which means it can only be accessed from anywhere inside the inner() function -> therefore, trying to access innerVar while not inside the inner() function, will give you a ReferenceError
// }
// outer();
// ----------------------
// NESTED FUNCTIONS PART 6
// ----------------------
/* the inner function still looks for a local declaration of the variable name before looking at the next level of scope */
// function outer() {
// let outerVar = 'I am outer';
// function inner(outerVar) {
// // let outerVar = undefined;
// let innerVar = 'I am inner';
// console.log(outerVar, innerVar); // which outerVar will be printed here?
// }
// inner();
// }
// outer();
/*
Recap:
How does JS look for the value for a given variable?
---------------------------
1- check locally (ex. within the same function/code block, or the argument passed into the function)
2- check the function/code block that the function is contained inside of
3 - etc.
4 - check global scope
5 - if not found -> ReferenceError
*/
/*
Possible analogy for how to think about which scopes can access which variables (can use as needed for however many nested scopes you have)
--------------------------------------------------------------------
- assume for this example that there is the global scope, then an outer function, and an inner function (that is defined inside of the outer function)
- think of the global scope as the grandparent
- think of the outer function as the parent
- think of the inner function as the child
- a child looks up to its parents & grandparents: therefore the inner function (child) has access to all of the functions/variables that exist in the parent (outer function) scope and in the grandparent (global) scope
- a parent looks up to the grandparents: therefore the outer function (parent) has access to al of the functions/variables that exist in the grandparent (global) scope; however, because a parent does NOT look up to the child, the outer function does NOT have access to any of the functions/variables declared in the child (inner function) scope
- a grandparent does NOT look up to its children or its grandchildren: therefore the global scope does NOT have access to any of the functions/variables declared in the parent (outer function) scope or the child (inner function) scope
*/