JavaScript Variable Scope

Scope refers to the context in which variables are declared and accessed in JavaScript.

Variables can have different scopes, which determine their visibility and lifetime within a program.

Understanding scope is crucial for writing clean and maintainable code. Let's explore the various aspects of scope with code examples:

JavaScript allows you to define both a global and a local version of the variable.

Global Scope

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

Here's example:

let globalVar = "I'm a global variable";
function great(){ 
  console.log(globalVar);// Output: "I'm a global variable"
}

great();

In the above example, globalVar is accessible inside the greet()function because it's declared in the global scope.

Example

let globalVar = "I'm a global variable";
function great(){ 
  console.log(globalVar);// Output: "I'm a global variable"
}

great();

Local Scope

Variables declared inside a function have local scope, meaning they can only be accessed within that function.

Here's example:

function great(){ 
  let localVar = "I'm a local variable";
  console.log(localVar); // Output: "I'm a local variable"
  }
  
great();
console.log(localVar); // Output: ReferenceError: localVar is not defined

In the above example, localVar is accessible only inside the greet()function and is not accessible outside of it.

Example

function great(){ 
  let localVar = "I'm a local variable";
  console.log(localVar); // Output: "I'm a local variable"
  }
  
great();
console.log(localVar); // Output: ReferenceError: localVar is not defined

Function Scope

JavaScript has function-level scope, which means variables declared within a function are not accessible outside of that function.

Here's example:

if (true){ 
  var x = 10;
}
  
console.log(x); // Output: 10

In the above example, even though xis declared within the ifblock, it's accessible outside of the block due to JavaScript's function-level scope.

Example

if (true){ 
  var x = 10;
}
  
console.log(x); // Output: 10

Block Scope (ES6 and later)

With the introduction of ES6 (ECMAScript 2015), JavaScript introduced block-level scope using letand costkeywords.

Here's example:

if (true){ 
  let y = 20;
}
  
console.log(y); // ReferenceError: x is not defined

In the above example, yis declared with letinside the if block, making it accessible only within that block.

Example

if (true){ 
  let y = 20;
}
  
console.log(y); //ReferenceError: x is not defined

Lexical Scope

Lexical scope refers to the ability of nested functions to access variables declared in their outer scope.

Here's example:

function outer(){ 
  var outerVar = "I'm in outer scope";
  
  function inner(){ 
    console.log(outerVar); // Output: "I'm in outer scope"
  }
  inner();
}
outer();
  

In the above example, the inner()function has access to the outerVarvariable declared in the outer()function due to lexical scope.

Example

function outer(){ 
  var outerVar = "I'm in outer scope";
  
  function inner(){ 
    console.log(outerVar); // Output: "I'm in outer scope"
  }
  inner();
}
outer();