JavaScript Scope

JavaScript has several types of scope that determine the accessibility and visibility of variables and functions within your code. In JavaScript, there are two main types of scope: global scope and local scope.

1. Global Scope: Variables and functions declared outside of any function or block have global scope. They are accessible from anywhere in your code, including inside functions or blocks.

var globalVariable = 'I am a global variable';

function globalFunction() {
  console.log(globalVariable); // Accessible within the function
}

console.log(globalVariable); // Accessible outside the function

2. Local Scope: Variables and functions declared inside a function or block have local scope. They are accessible only within the function or block in which they are defined.

function localFunction() {
  var localVariable = 'I am a local variable';
  console.log(localVariable); // Accessible within the function
}

localFunction();
console.log(localVariable); // Error: localVariable is not defined

JavaScript has function-level scope, which means that variables declared with the var keyword are scoped to the nearest function, regardless of where they are declared within the function. However, with the introduction of ES6 (ECMAScript 2015), two new keywords were introduced to declare variables: let and const.

3. Block Scope (let and const): Variables declared with let and const keywords have block-level scope. Block scope refers to variables that are accessible within the block in which they are defined, including loops, conditionals, and functions.

function blockFunction() {
  if (true) {
    let blockVariable = 'I am a block variable';
    console.log(blockVariable); // Accessible within the block
  }

  console.log(blockVariable); // Error: blockVariable is not defined
}

blockFunction();

Here’s a tabular format that summarizes the different scopes in JavaScript:

Note: let allows you to declare variables that can be reassigned, while const declares variables that cannot be reassigned once they are defined.

JavaScript Scope example

Here’s an example that demonstrates different scopes in JavaScript:

var globalVariable = 'I am a global variable';

function outerFunction() {
  var outerVariable = 'I am an outer variable';

  function innerFunction() {
    var innerVariable = 'I am an inner variable';

    console.log(innerVariable); // Accessible within innerFunction
    console.log(outerVariable); // Accessible within innerFunction
    console.log(globalVariable); // Accessible within innerFunction
  }

  innerFunction();

  console.log(innerVariable); // Error: innerVariable is not defined
  console.log(outerVariable); // Accessible within outerFunction
  console.log(globalVariable); // Accessible within outerFunction
}

outerFunction();

console.log(outerVariable); // Error: outerVariable is not defined
console.log(globalVariable); // Accessible globally

Output:

In this example, we have three nested scopes:

1. Global Scope:
   • globalVariable is declared in the global scope and is accessible throughout the code.
2. Function Scope (outerFunction):
   • outerVariable is declared within the outerFunction and is accessible within the function.
   • innerFunction is defined within outerFunction, and it has access to the variables in the outerFunction scope.
3. Function Scope (innerFunction):
   • innerVariable is declared within the innerFunction and is accessible only within the innerFunction scope.
   • It has access to the variables in both the innerFunction and outerFunction scopes.

Comment if you have any doubts or suggestions on this Js scope topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version