Understanding Scope in JavaScript

June 23, 2023 — Code, Javascript — 6 min read

In this post, we'll discuss one of the most important concepts in the JavaScript programming language, namely "scope". Scope determines the visibility and accessibility of variables within a JavaScript program. This concept might sound a bit complicated at first, but don't worry, because we'll use analogies and code examples to help you understand it better. Let's get started!

What Is Scope?

Some of us may already know what scope is and have probably used it before. But to make the explanation easier, for now let's just say scope is a region for carrying out activity.

Let's imagine we're inside a big library. Inside this library, there are several different rooms. Each room has bookshelves containing various kinds of books. Well, we can compare this library to "scope" in JavaScript. Each room in the library has its own boundaries, and only the people inside that room can access the books on its shelves.

Originally, scope was divided into 2 parts: Global Scope and Local Scope. However, since ECMAScript 6 (ES6) was released, Local Scope has been split into two: Function Scope and Block Scope. This block scope concept was introduced alongside new ways of declaring variables using const and let.

Global Scope

Global Scope is the scope where a variable is declared outside of all functions or code blocks. A variable declared in the global scope can be accessed from anywhere in the program, both inside and outside functions.

var globalVariable = "This is a global variable";

function exampleGlobalScope() {
  console.log(globalVariable); // Output: This is a global variable
}

exampleGlobalScope();

console.log(globalVariable); // Output: This is a global variable

In the code example above, the variable globalVariable is declared outside of all functions, so it has global scope. We can access this variable both inside the exampleGlobalScope function and outside of it.

A variable with global scope can also be accessed and modified from other functions in the program, as long as the variable is accessed correctly.

Keep in mind that the use of global variables should be limited to avoid mixing with, and potential conflicts with, local variables inside functions.

Local Scope

Local scope is the scope where a variable is declared inside a code block, such as a function or an if/else block. A variable declared within a local scope can only be accessed within that scope, i.e., inside the function or code block where it was declared.

function exampleLocalScope() {
  var x = 10; // variable x has local scope inside the exampleLocalScope function
  console.log(x); // Output: 10

  if (true) {
    var y = 20; // variable y has local scope inside the if block
    console.log(y); // Output: 20
  }

  console.log(y); // Output: 20 (y is still accessible inside the if block)
}

exampleLocalScope();

console.log(x); // Error: x is not defined (cannot be accessed outside the function)
console.log(y); // Error: y is not defined (cannot be accessed outside the if block)

In the code example above, the variable x is declared inside the exampleLocalScope function, so it can only be accessed within that function. Likewise, the variable y is declared inside the if block, so it can only be accessed within that if block. Outside the function or the if block, we cannot access the variables x and y, and we'll get an error.

Block Scope

Block scope means that a variable declared inside a specific code block can only be accessed within that block. A code block in JavaScript is usually marked using curly braces {}. Common examples of code blocks are if blocks, for blocks, or while blocks.

function exampleBlockScope() {
  if (true) {
    var x = 10; // variable x can only be accessed inside this if block
    let y = 20; // variable y can only be accessed inside this if block
    const z = 30; // variable z can only be accessed inside this if block

    console.log(x); // Output: 10
    console.log(y); // Output: 20
    console.log(z); // Output: 30
  }

  console.log(x); // Output: 10 (still accessible outside the if block)
  console.log(y); // Error: y is not defined (cannot be accessed outside the if block)
  console.log(z); // Error: z is not defined (cannot be accessed outside the if block)
}

exampleBlockScope();

In the code example above, the variable x, declared with the var keyword, can be accessed outside the if block because var variables have "function scope". However, the variable y, declared with the let keyword, and the variable z, declared with the const keyword, can only be accessed inside the if block, because both have "block scope".

Function Scope

Function scope means that a variable declared inside a function can only be accessed within that function. A variable declared outside a function has "global scope" and can be accessed from anywhere in the program.

function exampleFunctionScope() {
  var x = 10; // variable x can be accessed inside this function

  if (true) {
    var y = 20; // variable y can be accessed inside this function
    console.log(x); // Output: 10
    console.log(y); // Output: 20
  }

  console.log(x); // Output: 10
  console.log(y); // Output: 20 (y is still accessible outside the if block)
}

exampleFunctionScope();
console.log(x); // Error: x is not defined (cannot be accessed outside the function)
console.log(y); // Error: y is not defined (cannot be accessed outside the function)

In the code example above, the variables x and y, declared with the var keyword, have "function scope". They can be accessed inside that function, including inside the if block. However, when we try to access the variables x and y outside the function, we'll get an error because those variables can't be accessed outside the function scope.

Well, besides Global Scope and Local Scope which we've already covered, JavaScript also has another scope concept called Lexical Scope. Going back to our earlier library-and-books analogy, imagine you're inside a library room that has a VIP room and a special shelf inside it. Then what we mean by Lexical Scope is a book that isn't placed on any shelf, but instead placed near the entrance of the library room. That way, everyone (whether in the VIP room or the regular room) can read that book.

Lexical Scope (Static Scope)

Lexical scope means that a variable's scope is determined by where it is physically declared in the code, i.e., at the time the code is written. In lexical scope, when we create a function inside another function, the nested (inner) function will have access to variables declared inside its parent (outer) function.

function outerFunction() {
  var x = 10;

  function innerFunction() {
    console.log(x); // Output: 10 (variable x is accessed from the lexical scope)
  }

  innerFunction();
}

outerFunction();

In the code example above, the variable x is declared inside the outerFunction function. Then, the innerFunction function inside it has access to the variable x because that variable lies within its lexical scope. When we call innerFunction, the variable x can be accessed and printed to the console.

That wraps up our discussion on Understanding Scope in JavaScript. Hopefully this article is useful for those of you who want to understand scope even better. See you in the next article. Thank you :)