Variable Scopes in JavaScript

In programming, the scope of a variable refers to the area of the code where a variable can be accessed and used.

In JavaScript, there are three main types of variable scope: global, local, and block.

Global variables

Global variables are variables that are accessible and modifiable from anywhere in the script, including within control statements and functions.

They are usually declared and initialized at the top of the script, and are used to store values that need to be shared across functions or for data that needs to maintain its state (or value) throughout the entire script execution, referred to as constants.

Example

Let's consider this script, that implements two functions named incrementCounter and resetCounter used to change the value of the global counter variable:

let counter = 0;

function incrementCounter() {
  counter = counter + 1;
}

function resetCounter() {
  counter = 0;
}

incrementCounter();
console.log(counter);

resetCounter();
console.log(counter);

When executed, it will:

1. Declare a global variable named counter and initialize it with 0.
2. Define a function named incrementCounter that increases the value of the global counter variable by 1.
3. Define a function named resetCounter that assigns 0 to the global counter variable.
4. Execute the incrementCounter function and output the value of the counter variable.
5. Execute the resetCounter function and output the value of the counter variable.

Which will produce this output:

$ node increment_counter.js
1
0

Local variables

Local variables are variables that are only accessible and modifiable from within the body of the function or loop they are defined in.

They are used to store temporary values that should be isolated from the rest of the script, and only exist for the duration of the function or loop execution.

Example

📚 Definition: In mathematics, the factorial of a non-negative integer n (written n!) is the product of all positive integers less than or equal to n.

n! = 1 x 2 x ... x n

For example: 3! = 1 x 2 x 3 = 6

Let's consider this script, that implements a function named factorial that calculates the factorial of a number:

function factorial(number) {
  let result = 1;

  for (let i = 1 ; i <= number ; i++) {
    result = result * i;
  }

  console.log(result);
}

factorial(5);
console.log(result);

When executed, it will:

1. Define a function named factorial that takes as parameter a number.

   • Declare a variable named result and initialize it with 1.
   • Start a for loop going from 1 to the value of the number parameter.
   • Multiply the value of the result variable by the current value of the i counter variable.
   • Output the value of the result variable within the function's scope it is defined in.

2. Execute the factorial function with the integer number 5.

3. Attempt to output the value of the result variable outside of the function's scope.

Which will produce this output:

$ node factorial.js
120
/Users/razvan/scripts/nodejs/factorial.js:12
console.log(result);
            ^

ReferenceError: result is not defined

As you can see here, the script will throw a ReferenceError error caused by an invalid access to the result variable outside of the factorial function's scope it was defined in.

Block variables

Block variables are variables that are only accessible from within the statement they are defined in, like an if statement or a for loop.

They are used to store temporary values, like counters, that should be isolated from the rest of the script.

Example

Let's consider this script, that implements a function named printMultiplicationTable that outputs the multiplication table of a number:

function printMultiplicationTable(number) {
  for (let i = 1 ; i < 10 ; i++) {
    console.log(number, 'x', i, '=', number * i);
  }

  console.log(i);
}

printMultiplicationTable(3);

When executed, it will:

1. Declare a new function named printMultiplicationTable that takes as parameter a number.

   • Start a for loop going from 1 to 10.
   • Output the value of the number parameter, the current value of the i counter variable, and the product of these variables.
   • Attempt to output the value of the i variable outside of the for loop scope.

2. Execute the printMultiplicationTable function with the integer number 3.

Which will produce this output:

$ node print_multiplication_table.js
3 x 1 = 3
3 x 2 = 6
3 x 3 = 9
3 x 4 = 12
3 x 5 = 15
3 x 6 = 18
3 x 7 = 21
3 x 8 = 24
3 x 9 = 27
/Users/razvan/scripts/nodejs/print_multiplication_table.js:7
  console.log(i);
              ^

ReferenceError: i is not defined

As you can see here, the script will throw a ReferenceError error caused by an invalid access to the i variable outside of the for loop's scope it was defined in.