Scoping in JavaScript

Photo by Jess Bailey on Unsplash

Scoping in JavaScript

Scope in JavaScript determines the accessibility (visibility) of variables from different parts of the code.

Global Scope:

  • Variables declared at the top of a program or outside of any function or block are considered to be global variables:

      var globalVariable = 'Hello, global scope!';
      function foo() {
      foo(); // Output: Hello, global scope!
  • Variables declared without var, let and const keywords are considered to be automatically global. The following code example will declare a global variable carName, even if the value is assigned inside a function.

      // code here can use carName
      function myFunction() {
        carName = "Volvo";

NOTE: In "Strict Mode", undeclared variables are not automatically global.

  • Variables in the global scope can be accessed and changed from anywhere in the code, including inside the function or block:

      function incrementGlobal() {
      var globalCounter = 0;
      console.log(globalCounter); // Output: 1
  • Variables declared with var, let and const are quite similar when declared outside a block. They all have Global Scope:

      const constVar = "const";
      function global() {
          console.log(`Variables declared outside a block with 
          ${varVar}, ${letVar} and ${constVar} have global scope!`); // 
      var varVar = "var";
      let letVar = "let";
      // Variables declared outside a block with var, let and const have global scope!
  • Global variables exist during the whole program;

NOTE: It's generally recommended to avoid using global variables because the value of a global variable can change in different areas in the program. It can introduce unknown results in the program. Instead, encapsulate data within local scopes whenever possible.

Local Scope:

  • Variables declared inside a function or block have local scope;

  • Local variables are accessible only within the function or block in which they are defined;

  • Local variables have a limited lifetime that exists as long as the function or block is executing.

Function Scope:

  • Variables declared inside the function have function scope meaning that they can only be accessible inside the function and can not be accessed by other functions. Therefore, variables with the same name can be used in different functions.

  • Each function creates a new scope.

  • When a function starts, local variables will be created and deleted when the function ends;

  • Variables declared with var, let and const are quite similar when declared inside a function. They all have Function Scope:

      function myFunction() {
          var carName = "Volvo";   // Function Scope
      console.log(carName); //ReferenceError: carName is not defined
      function myFunction() {
          let color = "red";   // Function Scope
      console.log(color); //ReferenceError: color is not defined
      function myFunction() {
          const name = "Alice";   // Function Scope
      console.log(name); //ReferenceError: name is not defined

Block Scope:

  • Variables declared inside curly braces { } with let and const keywords have a block scope and cannot be accessed from outside the block. For example:

          let x = 2;
      console.log(x); //ReferenceError: x is not defined
          const y = 2;
      console.log(y); //ReferenceError: y is not defined
  • Variables declared with the var keyword does NOT have a block scope and can be accessed from outside the block:

          var z = 2; 
      console.log(z); // 2


1. JavaScript Scope w3school

2. JavaScript Variable Scope

3. Scope MDN