How to use var, let and const in block & function Scopes
Samuel K.M
Posted on January 7, 2022
While coding in Javascript you will mostly encounter two main scopes.
1. Block Scopes
You will encounter this mostly in if and for loops
{
// Block Scope
}
if (true) {
// Block Scope
}
for (var i = 1; i <= 10; i++) {
// Block Scope
}
2. Function Scopes
You will encounter this in Javascript functions.
function sum(a, b) {
// Function Scope
var result = a + b;
}
sum(4 + 3);
How do block and function scopes differ ?
The difference is in how variables are defined. We have three ways of defining variables. We can use var
, let
or const
.
When you use var
in block scope the variable can be accessed outside the block scope. See the image below , as you will note var i
prints 11 which was the last value of i
in the for loop
However when you use let
and try printing var i
you will get undefined
The major difference is that when you define a variable using var
in the function scope , the variable is only accessible in the function scope.
function sum(a, b) {
// Function Scope
var result = a + b;
}
sum(4 + 3);
Best practices
When defining variable in the block scope always use let
or const
this will prevent the variables from leaking from the block scope.
The const
variable and when should you use it ?
Use the const
keyword when you dont want the referenced value of the variable changed. This however doesn't mean that the value is immutable.
Objects and Arrays declared with the const
keyword can be mutated however this doesnt apply to string
and interger
types.
// Scalar values, This can be mutated
const answer = 42;
const greeting = 'Hello';
// Arrays and Objects, This can be mutated
const numbers = [2, 4, 6];
const person = {
firstName: 'John',
lastName: 'Doe',
};
Incase you dont want your const arrays and objects mutated . Use Object.freeze()
. This can also be used on let
variables
Array freezing example:
const a = [0];
Object.freeze(a); // The array cannot be modified now.
a[0] = 1; // fails silently
// In strict mode such attempt will throw a TypeError
function fail() {
"use strict"
a[0] = 1;
}
fail();
// Attempted to push
a.push(2); // throws a TypeError
Object Freezing
The result of calling Object.freeze(object) only applies to the immediate properties of object itself and will prevent future property addition, removal or value re-assignment operations only on object. If the value of those properties are objects themselves, those objects are not frozen and may be the target of property addition, removal or value re-assignment operations.
const employee = {
name: "Mayank",
designation: "Developer",
address: {
street: "Rohini",
city: "Delhi"
}
};
Object.freeze(employee);
employee.name = "Dummy"; // fails silently in non-strict mode
employee.address.city = "Noida"; // attributes of child object can be modified
console.log(employee.address.city) // Output: "Noida"
Incase you intend to freeze nested objects i would recommend the use of the immutable js library.
Posted on January 7, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.