Scope in JavaScript

Published on June 20, 2024

Last updated on April 4, 2025

The scope is where values and expressions are available for use. Scopes can be treated as a pyramid where child scopes have access to parent scopes.

JavaScript has 3 types of scope:

Global scope
Function scope
Block scope

Global Scope

The scope that contains and is accessible in all other scopes

const someVar = 'declared in the global scope';

function someFunction() {
  console.log(someVar); // accessible inside the function scope
}

someFunction();

Function Scope

The scope created with a function

function someFunction() {
  const someVar = 'declared inside a function';
  console.log(someVar);
}

someFunction();

console.log(someVar); // Reference error, (accessible only inside the function scope)

Variables created inside a function scope cannot be accessed from outside the function

Block Scope

The scope created with a pair of curly braces

function someFunction() {
  const someVar = 'declared inside a function';

  if (someVar) {
      const someVar2 = 'declared inside a block';
  }

  console.log(someVar2); // Reference error (accessible only inside the block scope)
}

someFunction();

Variables created inside a block scope cannot be accessed from outside the block

Hoisting

Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during compilation. This means they can be used before they appear in the code.

Blocks only scope let and const declarations, but not var declarations due to hoisting. When you declare a variable with var inside a block, it's actually hoisted to the function or global scope that contains it, not the block scope.

This is one of the key reasons why modern JavaScript recommends using let and const over var.

{
  var someVar = 1;
}

console.log(someVar); // 1

{
  const someVar = 1;
}

console.log(someVar); // ReferenceError: someVar is not defined

Key Takeaways

Scope Types
- Global scope: Accessible everywhere
- Function scope: Limited to function boundaries
- Block scope: Limited to block boundaries
Variable Declaration
- var declarations are function-scoped
- let and const are block-scoped
- Block scope only affects let and const
- var declarations are affected by hoisting
Best Practices
- Use const by default
- Use let when reassignment is needed
- Avoid var in modern JavaScript
- Be mindful of scope boundaries

References

GET IN TOUCH

Let's work together

I build exceptional and accessible digital experiences for the web

WRITE AN EMAIL

or reach out directly at hello@mohammadshehadeh.com