Why Const Doesn’t Mean a Constant Value in JavaScript

“Javascript is one of the easiest languages to learn, but hardest to master “

is an adage that is echoed recurrently in the developer's community. Many concepts of Javascript are misunderstood by a majority of developers and are regarded as the “tricky parts” of the language, but every tricky part has a reason that corresponds to How the language actually works behind the scenes.

So, In this article, we will be exploring “Why const doesn't mean a constant value” and how exactly can we create one.

Introduction to let and const

With the release of ES6 or ES2015, developers were introduced to a new way of creating variables in Javascript. let was created for creating variables whose values can be changed. For example —

let age = 20;
age = 15;         
console.log(age)  //will print 15 to the console
let numbers = [1,2,3,4,5];
numbers = [6,7,8,9,10];
console.log(numbers)  // will print [6,7,8,9,10] to the console

While const was introduced for creating variables whose value can’t be changed. For example —

const age = 20;
age = 15;    //Uncaught TypeError: Assignment to constant variable
const numbers =[1,2,3,4,5];
numbers = [6,7,8,9,10];  //Uncaught TypeError: Assignment to constant variable.

So, everything is working as expected, but let us consider another example —

let numbers = [1,2,3,4,5,6];
numbers[0] = 40;
numbers[2] = 10;
numbers[4] = 15;
console.log(numbers);
// will print [40, 2, 10, 4, 15, 6] to the console
const numbers = [1,2,3,4,5,6];
numbers[0] = 40;
numbers[2] = 10;
numbers[4] = 15;
console.log(numbers);
// will print [40, 2, 10, 4, 15, 6] to the console

So, what just happened, the value of a const variable(numbers) just got changed(unexpected) which often creates confusion among developers. So, now let us shift our focus from What is happening to Why it is happening. In order to understand the reason we first need to understand how exactly memory gets managed in Javascript.

Javascript Memory Management

A variable is just a container that helps us in storing a value. A variable can store both primitives (strings, booleans, numbers, etc) and objects (arrays, objects, functions, etc) in them.

(In the below discussion, just ignore whether we have used let or const, Just focus on whether the variable created is a primitive or it is an object, and we will come back to it).

Primitives and Objects —

When we create variables containing a primitive or an object—

name = "Alok Sharma"; 
OR
numbers = [1, 2, 3, 4, 5];

Behind the scenes, the Identifier name and numbers get created which is associated with the memory location where the value “Alok Sharma” and [1,2,3,4,5] is stored.

Memory Management

Whenever a variable gets reassigned whether containing a primitive or an object as —

name = "John Sharma";
OR
numbers= [4, 5, 6, 7, 8];

New memory locations get created and the identifier name and numbers are now associated with the newly created memory locations respectively.

Location Reassignment

Also, Primitives in Javascript are immutable i.e. —

name = "Alok Sharma";
name[2] = "f";    //Will have no effect
consgole.log(name); //Will print Alok Sharma

On the other hand, objects can be mutated i.e. —

numbers = [1, 2, 3, 4, 5];
numbers[2] = 20;
console.log(numbers) //Will print [1, 2, 20, 4, 5]

When an object is mutated, no new memory location gets created, instead, the value gets changed at the very same memory location. (because only the index 2 — numbers[2] get reassigned to 20, so only the location for that particular index got changed and not the whole object(numbers)).

So, in simple terms only when a variable gets reassigned, a new memory location gets created and not in case of mutation.

Now coming back to let and const, When a variable is declared with let it is allowed to change its memory location, But when a variable gets declared with const it is not allowed to change its memory location which is why —

let name = "Alok Sharma"
name = "John Sharma";
let numbers = [1, 2, 3, 4, 5];
numbers = [6, 7, 8, 9, 10];
//Valid 
Using let the variable is allowed to change its memory location, On the other hand
const name = "Alok Sharma"
name = "John Sharma";
const numbers = [1, 2, 3, 4, 5];
numbers = [6, 7, 8, 9, 10];
//Uncaught TypeError: Assignment to constant variable.
Using const the variable is not allowed to change its memory location
Also,
const numbers = [1,2,3,4,5,6];
numbers[0] = 40;
numbers[2] = 10;
numbers[4] = 15;
console.log(numbers);
//Valid
As, mutating variable doesn't create a new memory location

Conclusion — So, It is not the value, but behind the scenes, it is the memory location that is allowed to change with let and not allowed to change with const. Now coming to how can we exactly create a constant object.

How to Create a true constant object

Now in order to create a true constant object, array, etc, We can use 3 methods depending upon our need.

• Object.preventExtensions — It prevents the addition of new items to an object. Note — Removing and Mutating items is still possible. Example -

const numbers = [1,2,3,4,5,6];
Object.preventExtensions(numbers);
numbers.push(7); // Uncaught TypeError: Cannot add property 10, object is not extensible
numbers.pop(); //Valid
numbers[2] = 10; //Valid

• Object.seal — It prevents the addition as well as the removal of items to an object. Note — Mutating items is still possible

const numbers = [1,2,3,4,5];
Object.seal(numbers);
numbers.push(6); // Uncaught TypeError: Cannot add property 5, object is not extensible
numbers.pop(); //Uncaught TypeError: Cannot delete property ‘4’ of [object Array]
Note- '5' and ‘4’ refers to the index 5 and 4 respectively;
numbers[2] = 10; //Valid

• Object.freeze — It prevents addition removal as well as mutation of items to an object.

const numbers = [1,2,3,4,5,6];
Object.freeze(number);
numbers.push(7); // Uncaught TypeError: Cannot add property 10, object is not extensible
numbers.pop(); //Uncaught TypeError: Cannot delete property ‘5’ of [object Array]
Note- ‘5’ refers to the index 5;
numbers[2] = 10; // Will not throw error, but will not change the value

That’s it for this article, If you find this article helpful just do let me know. Stay Tuned.!!