How Scope Works in JavaScript

JavaScript

Learn about how Scope works in JavaScript and the difference between Global Scope, Local Scope, and Lexical Scope.

Scope refers to the context in which functions or variables are accessible. JavaScript has three scope types, global scope, local scope, lexical scope:

  • A global variable is a variable declared outside a code block
  • A local variable is a variable declared inside a code block

Good to know: functions can access variables and other functions that are set outside themselves — but not variables that are set inside other functions.

It will make sense in a minute.

Global Scope

Any variable or function in the global scope is accessible inside other functions:

// Global scope
let dogBreed = "Labrador"

let getDogBreed = function() {
  // dogBreed is accessible because it’s in the global scope
  console.log(dogBreed)
  // "Labrador"
}

// Run function
getDogBreed()

That includes functions inside of functions:

// Global scope
let dogBreed = "Labrador"

let getDogBreed = function() {
  // function inside function
  let getDogBreedFromGlobalScope = function() {
    // accesses dogBreed from the global scope
    console.log(dogBreed)
    // "Labrador"
  }
  // Run function
  getDogBreedFromGlobalScope()
}

// Run function
getDogBreed()

Local Scope

A variable or function with a local scope is only accessibility from within it’s own context (scope):

let getDogBreed = function() {
  // local variable scope
  let dogBreed = "Labrador"
  // We can access the dogBreed variable because it’s local
  console.log(dogBreed)
  // "Labrador
}

The variable dogBreed has a local scope, and it can only be accessed from within its scope (inside the curly braces{ .. })

Here’s the same code as above, but this time we move the console.log(dogBreed) outside of the local scope, so it’s now in the global scope:

let getDogBreed = function() {
  // local variable scope
  let dogBreed = "Labrador"
}

// Try to access a locally scoped variable
console.log(dogBreed)
// Uncaught ReferenceError: dogBreed is not defined

You get a reference error, that says “dog breed is not defined”, because you’re trying to log out a locally scoped variable from the global scope.

Lexical scope

When you nest functions (put functions within functions), the variables and functions within the parent function (the outermost function) can be accessed by the inner functions. This is referred to as the lexical scope.

However, the parent (outermost) function itself, cannot access variables or functions within the inner functions. It can sound more confusing than it is, let’s look at an example, then it will make sense:

// Global scope
let animals = function() {
  // Lexical scope
  let dogBreed = "Labrador"
  // Nested function
  let getAnimals = function() {
    // We can access dogBreed because it's in the lexical scope
    console.log(dogBreed)
    // "Labrador"

    // Here’s a locally scoped variable
    let catBreed = "Persian"
    console.log(catBreed)
    // "Persian"
  }
  // Run function
  getAnimals()

  // This works because the dogBreed variable is in the lexical scope
  console.log(dogBreed)
  // "Labrador"

  // This won’t work, because catBreed is not in the lexical scope, it’s local to the getAnimals() function
  console.log(catBreed)
  // Uncaught ReferenceError: catBreed is not defined
}

animals()

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi

Share & Discuss on

Subscribe to Newsletter