scope

Introduction

Scope in JavaScript defines the accessibility of variables, objects, and functions in different parts of your code. Understanding scope is important for writing efficient and bug-free code.

This guide covers various types of scope in Javascript, including global, local, block, and function scope, as well as basics of closures.

Global Scope

Variables declared outside any function or block have global scope, meaning they can be accessed from anywhere in the code.

const globalVar = "I'm global";
 
function checkScope() {
  console.log(globalVar); // Accessible here
}
 
checkScope();
console.log(globalVar); // Accessible here too

globalVar is accessible both inside the function checkScope and in the global context.

Function Scope

Variables declared within a function are local to that function and cannot be accessed outside of it.

function checkScope() {
  const localVar = "I'm local";
  console.log(localVar); // Accessible here
}
 
checkScope();
console.log(localVar); // ReferenceError: localVar is not defined

localVar is only accessible within the checkScope function.

Block Scope

Variables declared with let or const within a block {} (such as if, for loop) are local to that block.

{
  let blockVar = "I'm block scoped";
  const anotherBlockVar = "I'm also block scoped";
  console.log(blockVar); // Accessible here
  console.log(anotherBlockVar); // Accessible here
}
console.log(blockVar); // ReferenceError: blockVar is not defined
console.log(anotherBlockVar); // ReferenceError: anotherBlockVar is not defined

blockVar and anotherBlockVar are only accessible within the block they are declared in.

Closures

For in-depth guide about closures check this article: Closures in Javascript

A closure is a function that retains access to its outer scope even after the outer function has finished executing.

function outerFunction() {
  let outerVar = "I'm from outer scope";
  
  function innerFunction() {
    console.log(outerVar);
  }
  
  return innerFunction;
}
 
const closureFunction = outerFunction();
closureFunction(); // Output: I'm from outer scope

innerFunction has access to outerVar even after outerFunction has finished executing.

Block Scope vs Function Scope

Variables declared with var are function-scoped, while those declared with let and const are block-scoped.

function checkScope() {
  if (true) {
    var functionScoped = "I'm function scoped";
    let blockScoped = "I'm block scoped";
  }
  console.log(functionScoped); // Accessible here
  console.log(blockScoped); // ReferenceError: blockScoped is not defined
}
 
checkScope();

functionScoped is accessible outside the if block, but blockScoped is not.

Scope in ES6 Classes

In ES6 classes, variables can be declared within the class body, but they are scoped to the class.

class MyClass {
  constructor() {
    this.classVar = "I'm a class variable";
  }
  
  logClassVar() {
    console.log(this.classVar);
  }
}
 
const myInstance = new MyClass();
myInstance.logClassVar(); // Output: I'm a class variable
console.log(myInstance.classVar); // Output: I'm a class variable

Resources

MDN Web docs

On this page