Chapter 2: Understanding var, let, and const in ES6
In this chapter, you will learn what the var, let, and const keywords are and when to use each. The var keyword has been part of JavaScript since its inception, but let and const were introduced in ES6 to solve some of its limitations.
🔒 The const Keyword
If you’re familiar with JavaScript variables, you know their values can typically be changed. But when you want a value that remains constant throughout the program, const is used.
For example:
// Invalid usage of const
const x = 100;
const x = 200; // ❌ Error: Identifier 'x' has already been declared
console.log(x);
Output:
Uncaught SyntaxError: Identifier 'x' has already been declared
This happens because const does not allow re-declaration or re-assignment.
🧱 The let Keyword
The let keyword allows you to declare block-scoped variables. This means the variable only exists within the block (curly braces { }) it’s defined in. Unlike var, it does not pollute the global or function scope.
Consider the following example:
<!DOCTYPE html>
<html>
<body>
<h2>Using let and var keywords in JavaScript</h2>
A value from Let Keyword:
<p id="result_let"></p>
<br>
A value from var Keyword:
<p id="result"></p>
<script>
var a = 10;
// Here 'a' is 10
if(a == 10){
let a = 2;
// Here 'a' is 2 within the if block
document.getElementById("result_let").innerHTML = a;
}
// Outside block, 'a' is still 10
document.getElementById("result").innerHTML = a;
</script>
</body>
</html>
Output:
- result_let: 2
- result: 10
📌 Summary
var: Function or global scope. Allows re-declaration.let: Block scope. No re-declaration within the same block.const: Block scope. No re-declaration or reassignment.
Using let and const makes your code more predictable and easier to debug compared to var. As a best practice, prefer const by default, and use let only when reassignment is needed.
🧪 Practice Exercises: ES6 – var, let, and const
✅ Exercise 1: Block Scope with let
Objective: Understand how let behaves inside and outside of code blocks.
let color = "blue";
if (true) {
let color = "red";
console.log("Inside block:", color); // Expected output: ?
}
console.log("Outside block:", color); // Expected output: ?
👉 Task:
- Predict the two outputs.
- Explain why the values are different.
✅ Exercise 2: const Reassignment Error
Objective: Observe the error that occurs when trying to reassign a const variable.
const user = "admin";
user = "guest";
console.log(user);
👉 Task:
- Run the code and observe the error.
- Explain in one line why this happens.
- Fix the error while keeping the constant intention intact.
✅ Exercise 3: var Hoisting
Objective: Understand how var behaves when used before its declaration.
console.log(city); // What will this print?
var city = "Mumbai";
👉 Task:
- Predict and explain the output.
- Rewrite the same code using
letand compare the results.
✅ Exercise 4: Variable Shadowing with var and let
Objective: See how let creates block-scoped variables that shadow outer variables.
var age = 30;
function checkAge() {
var age = 25;
if (true) {
let age = 18;
console.log("Inside block:", age); // ?
}
console.log("Inside function:", age); // ?
}
checkAge();
console.log("Global scope:", age); // ?
👉 Task:
- Predict all three output values.
- Explain how
varandletbehave in nested scopes.