In the Functions chapter, we saw that where variables are declared and initialized in the code affects when they can be used. This idea is called scope, and it describes the ability of a program to access or modify a variable.
Example
1let a = 0;
2
3function coolFunction() {
4 let b = 2;
5 return a + b;
6}
a is accessible inside and outside of coolFunction().
b is only accessible inside of coolFunction().
Let's add some console.log statements to explore this code snippet.
Example
1let a = 0;
2console.log(a);
3
4function coolFunction() {
5 let b = 2;
6 console.log(`a = ${a}, b = ${b}.`);
7 return a + b;
8}
9
10a += 1;
11console.log(a);
12
13coolFunction();
14console.log(b);
Console Output
0
1
a = 1, b = 2.
ReferenceError: b is not defined
a.coolFunction(), and line 6 prints the values of a and
b. This shows that both variables are accessible within the function.b is not accessible
outside of coolFunction.Local scope refers to variables declared and initialized inside a function
or block. A locally scoped variable can only be referenced inside of the
block or function where it is defined. In the example above, b has a local
scope limited to coolFunction(). Referencing or attempting to update b
outside of the function leads to a scoping error.
Try It!
The following code block has an error related to scope. Try to fix it!
1function myFunction() {
2 let i = 10;
3 return 10 + i;
4}
5
6console.log(i);
Global scope refers to variables declared and initialized outside of a
function and in the main body of the file. These variables are accessible to
any function within a file. In the first example above, a has global scope.
Global scope is the default in JavaScript. If you assign a value to a variable
WITHOUT first declaring it with let or const, then the variable
automatically becomes global.
Example
1// Code here CAN use newVariable.
2
3function coolFunction() {
4 newVariable = 5;
5 return newVariable;
6}
7
8// Code here CAN use newVariable.
Warning
In the loop for (i = 0; i < string.length; i++), leaving off the
let from i = 0 means that i is treated as a global variable.
ANY other portion of the program can access or modify i, which could
disrupt how well the loop operates.
Execution context refers to the conditions under which a variable is executed---its scope. Scoping affects the variable's behavior at runtime. When the code is run in the browser, everything is first run at a global context. As the compiler processes the code and finds a function, it shifts into the function context before returning to global execution context.
Let's consider this code:
1let a = 0;
2
3function coolFunction() {
4 let b = 2;
5 return a + b;
6}
7
8function coolerFunction() {
9 let c = 5;
10 c += coolFunction();
11 return c;
12}
13
14console.log(coolFunction());
15console.log(coolerFunction());
Now, let's consider the execution context for each step.
First, the global execution context is entered as the compiler executes the code.
Once coolFunction() is hit, the compiler creates and executes
coolFunction() under the coolFunction() execution context.
Upon completion, the compiler returns to the global execution context.
The compiler stays at the global execution context until the creation and
execution of coolerFunction().
Inside of coolerFunction() is a call to coolFunction(). The compiler
will go up in execution context to coolFunction() before returning down
to coolerFunction()'s execution context. Upon completion of that
function, the compiler returns to the global execution context.
Both of the concept checks refer to the following code block:
1function myFunction(n) {
2 let a = 100;
3 return a + n;
4}
5
6let x = 0;
7
8x = myFunction(x);
Question
What scope is variable x?
Question
In what order will the compiler execute the code?