Web Development (Session 11)

Shape Image One

BLOCK SCOPE,
LET, AND
CONST

Introduction

In JavaScript, understanding variable scope is crucial for writing efficient and error-free code. Block scope, along with let and const, helps in managing variable visibility and lifecycle in different parts of your code

Variable Scope

1. Global Scope:

Variables declared outside any function are in the global scope. They are accessible from anywhere in the code.

var globalVar = “I am a global variable”;

function showGlobalVar() {

    console.log(globalVar);

}

showGlobalVar(); // Outputs: I am a global variable

2. Function Scope:

Variables declared within a function are in the function scope. They are only accessible within that function.

function showLocalVar() {

    var localVar = “I am a local variable”;

    console.log(localVar);

}

showLocalVar(); // Outputs: I am a local variable

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

3. Block Scope:

Variables declared inside a block (a pair of curly braces {}) are in the block scope. They are only accessible within that block. This is where let and const come into play.

let and const

1. let:

The let keyword declares variables that are block-scoped. It prevents variables from being hoisted to the top of their enclosing block.

function showBlockScope() {

    if (true) {

        let blockScopedVar = “I am block scoped”;

        console.log(blockScopedVar); // Outputs: I am block scoped

    }

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

}

showBlockScope();

2. const:

The const keyword declares block-scoped constants, meaning the value cannot be reassigned. However, const objects can have their properties modified.

function showConstScope() {

    if (true) {

        const constantVar = “I am a constant”;

        console.log(constantVar); // Outputs: I am a constant

    }

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

}

showConstScope();

Reassignment and Mutation:

const immutableVar = “Cannot be reassigned”;

// immutableVar = “Trying to reassign”; // Error: Assignment to constant variable

 

const mutableObject = { name: “John” };

mutableObject.name = “Doe”; // This is allowed

console.log(mutableObject.name); // Outputs: Doe

 

Differences Between var, let, and const

1. Scope:
  • var is function-scoped.
  • let and const are block-scoped.
2. Hoisting:
  • var declarations are hoisted to the top of their scope and initialized with undefined.
  • let and const are hoisted but not initialized.
3. Reassignment:
  • var and let variables can be reassigned.
  • const variables cannot be reassigned but can be mutated if they are objects.

Examples and Use Cases

1. Loop Variables:

Using let in loops to ensure the variable is block-scoped.

javascript

Copy code

for (let i = 0; i < 3; i++) {

    setTimeout(() => console.log(i), 1000); // Outputs: 0, 1, 2

}

2. Constant Configurations:

Using const for configuration objects that shouldn’t be reassigned.

const config = {

    apiUrl: “https://api.example.com”,

    timeout: 5000

};

// config = {}; // Error: Assignment to constant variable

config.timeout = 10000; // This is allowed

3. Temporal Dead Zone:

Demonstrating the temporal dead zone where let and const are not accessible before initialization.

console.log(tempVar); // Undefined (due to hoisting)

var tempVar = “I am a var”;

console.log(tempLet); // Error: Cannot access ‘tempLet’ before initialization

let tempLet = “I am a let”;

Additional Resources

Articles:
Videos:

Conclusion

Understanding block scope and the usage of let and const is essential for writing clean and efficient JavaScript code. They help prevent common errors related to variable scope and provide better control over your variables.

Optimized by Optimole
WhatsApp whatsapp
Messenger messenger
Instagram instagram
Call Us phone
chat