Scope of Variables in JavaScript

In JavaScript, scope is the context that determines where variables can be accessed, helping write cleaner and error-free code.

// Declaring a global variable
let x = 10;

function func() {
    
    // Declaring a local variable
    let y = 20;

    // Accessing Local and Global
    // variables
    console.log(x,",", y);
}

func();

TechCorp , Alice

There are mainly different types of scopes of a variable. Let us understand these one by one.

1. Global and Local Scope

The image below shows Global and Local Scope in JavaScript to help understand their accessibility.

Global Scope

A global variable refers to a variable that is declared outside any function or block, so it can be used anywhere in the program, both inside functions and in the main code.

// Global Variable accessed from within a function 
const x = 10;

function fun1() {
    console.log(x);
}

fun1();

GFG

Explanation: In the program, the variables outside the function and now we can access those variables from anywhere in the JavaScript program.

Function(Local) Scope

A local variable is a variable declared inside a function, making it accessible only within that function. It cannot be used outside the function.

• Functions and Objects are also variables in JavaScript.

function fun2(){
    
    // This variable is local to fun2() and 
    // cannot be accessed outuside this function
    let x = 10;
    console.log(x);
}

fun2();

10

Explanation: In the Program, the code defines a function fun2 with a local variable x, which is accessible only inside the function, and prints its value when the function is called.

• Before ES6 (Released in 2015), variables were declared only with var, which is function-scoped (accessible within the function) and global Scoped (Accessible everywhere) and prone to issues like hoisting and global pollution.
• let and const were introduced with ES6. Variables declared with let and const are either block scoped or global-scooped.

2. Block and Lexical Scope

The image below shows Block and Lexical Scope in JavaScript to help understand their accessibility.

Block Scope

In JavaScript, block scope refers to variables declared with let or const inside a { } block. These variables are accessible only within that block and not outside it.

Variables declared with var do not have block scope. A var variable declared inside a function is accessible throughout that entire function, regardless of any blocks (like if statements or for loops) within the function. If var is declared used outside of any function, it creates a global variable.

{
    
    // Var can Accessible inside & outside the block scope 
    var x = 10;
    
    // let , const Accessible only inside the block scope
    const y = 20;
    let z = 30;
    
    console.log(x);
    console.log(y);
    console.log(z);
}

console.log(x);

10
20
30
10

Explanation: In the Program, we have successfully accessed the variable with the var keyword because var does not have a block scope.

Lexical Scope

The variable is declared inside the function and can only be accessed inside that block or nested block is called lexical scope.

function func1() {
    const x = 10;

    function func2() {
        const y = 20;
        console.log(`${x} ${y}`);
    }

    func2();
}

func1();

Output:

Hello Geeks

Explanation: This code shows lexical scope where innerFunc accesses outerVar from outerFunc and prints "Hello Geeks".

Modular Scope:

Introduced in ES6, ES Modules are the standard way to organize JavaScript code into reusable and maintainable chunks. Each module has its own scope, and anything declared within a module is private by default unless explicitly exported.

Suggested Quiz

6 Questions

What is the primary purpose of scope in JavaScript?

• A
  To determine the data type of variables
• B
  To manage memory allocation
• C
  To control the accessibility of variables
• D
  To optimize code execution speed

Explanation:

Which type of scope allows a variable to be accessed throughout an entire JavaScript program?

• A
  Local scope
• B
  Block scope
• C
  Global scope
• D
  Lexical scope

Explanation:

What is the main difference between variables declared with 'var' and 'let' in JavaScript?

• A
  'var' is block-scoped while 'let' is function-scoped
• B
  'var' is function-scoped while 'let' is block-scoped
• C
  Both are block-scoped
• D
  Both are function-scoped

Explanation:

Which of the following statements about local variables is true?

• A
  They can be accessed from anywhere in the program
• B
  They can only be accessed within the function they are defined in
• C
  They are automatically global variables
• D
  They cannot be used in nested functions

Explanation:

What defines a block scope in JavaScript?

• A
  Variables declared with 'var'
• B
  Variables declared with 'let' or 'const'
• C
  Variables declared inside functions
• D
  Variables declared globally

Explanation:

What is the characteristic of lexical scope in JavaScript?

• A
  It allows variables to be accessed globally
• B
  It restricts variable access to the block they are defined in
• C
  It enables access to variables from nested functions
• D
  It is only applicable to global variables

Explanation:

Quiz Completed Successfully

Your Score :   2/6

Accuracy :  0%

Login to View Explanation

1/6 1/6 < Previous Next >