15.2. Using Scope

Scope allows programmers to control the flow of information through the variables in their program. Some variables you want to set as constants (like pi), which can be accessed globally. Others you want to keep secure to minimize the danger of accidental updates. For example, a variable holding someone's username should be kept secure.

15.2.1. Shadowing

Variable shadowing is where two variables in different scopes have the same name. The variables can then be accessed under different contexts. However, shadowing can affect the variable's accessibility. It also causes confusion for anyone reviewing the code.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
const input = require('readline-sync');

function hello(name) {
   console.log('Hello,', name);
   name = 'Ruth';
   return doubleName(name);
}

function doubleName(name){
   console.log(name+name);
   return name+name;
}

let name = input.question("Please enter your name: ");

hello(name);
doubleName(name);
console.log(name);

So, what is the value of name in line 4, 10, 16, 17, and 18?

Yikes! This is why shadowing is NOT a best practice in coding. Whenever possible, use different global and local variable names.

Try It!

If you are curious about the name values in the example, feel free to run the code here.

15.2.2. Variable Hoisting

Variable hoisting is a behavior in JavaScript where variable declarations are raised to the top of the current scope. This results in a program being able to use a variable before it has been declared. Hoisting occurs when the var keyword is used in the declaration, but it does NOT occur when let and const are used in the declaration.

Note

Although we don't use the var keyword in this book, you will see it a lot in other JavaScript resources. Variable hoisting is an important concept to keep in mind as you work with JavaScript.

15.2.3. Check Your Understanding

Question

What keyword allows a variable to be hoisted?

  1. let

  2. var

  3. const

Question

Consider this code:

1
2
3
4
5
6
let a = 0;

function myFunction() {
   let a = 10;
   return a;
}

Because there are two separate variables with the name, a, under the two different scopes, a is being shadowed.

  1. True

  2. False