Scope

Variable scope is the availability of variables in a certain part of code.

Global scope is used by default. Everyone has access to the variables declared in it. For example, the variable value is declared in the global scope, that is, outside any block, and is available anywhere after the declaration.

const value = 5;

if (true) {
  console.log("Block scope: ", value); // 5
}

console.log("Global scope: ", value); // 5

Any construct using curly braces {} (conditions, loops, functions, etc.) creates a new local scope, and variables declared in this scope using let or const are not available outside this block.

if (true) {
  const value = 5;
  console.log("Block scope: ", value); // 5
}

console.log("Global scope: ", value); // ReferenceError: value is not defined

The nesting depth of scopes is not limited, and they will all use the same principle: the scope has access to all variables declared higher in the nesting hierarchy, but cannot access variables declared in nested scopes.

Let's create several scopes and name them for clarity.

• Global is the default; create the global variable in it
• Next, using the if statement, create a block scope called block A
• Inside this block A scope, put another if statement, which will create a nested scope, block B
• On the same level as block A, create another scope, block C, using the if statement

const global = "global";

if (true) {
  const blockA = "block A";

  // You see global + local A
  console.log(global); // 'global'
  console.log(blockA); // block A

  // Variables blockB and blockC cannot be found in the available scopes.
  // You will see a variable accessing error.
  console.log(blockB); // ReferenceError: blockB is not defined
  console.log(blockC); // ReferenceError: blockC is not defined

  if (true) {
    const blockB = "block B";

    // You see global + external A + local B
    console.log(global); // global
    console.log(blockA); // block A
    console.log(blockB); // block B

    // Variable blockC cannot be found in the available scopes.
    // You will see a variable accessing error.
    console.log(blockC); // ReferenceError: blockC is not defined
  }
}

if (true) {
  const blockC = "block C";

  // You see global + local C
  console.log(global); // global
  console.log(blockC); // block C

  // Variables blockA and blockB cannot be found in the available scopes.
  // You will see a variable accessing error.
  console.log(blockA); // ReferenceError: blockA is not defined
  console.log(blockB); // ReferenceError: blockB is not defined
}

// You see only the global one
console.log(global); // global

// Variables blockA, blockB and blockC cannot be found in the available scopes.
// You will see a variable accessing error.
console.log(blockA); // ReferenceError: blockA is not defined
console.log(blockB); // ReferenceError: blockB is not defined
console.log(blockC); // ReferenceError: blockC is not defined

Note

Be careful when using block scopes and variables declared in them. It is this mistake, along with carelessness, that often becomes a beginner's headache.