I know that's been said hundred of times, but I still see people proclaiming (even in some JavaScript books) that const
is immutable. It is not.
const in JavaScript is not immutable
In JavaScript, values can be stored in a variable with the var
keyword, the most compatible way for declaring variables:
var greet = "Hello";
var year = 89;
var not = false;
I said compatible because with ECMAScript 2015 we have two other options: let
and const
. Older browsers may not support these new keywords and unless using a "transpiler" like Babel you may run into errors. In newer browser instead you can reap the benefits of let
and const
which differ from var
in two ways:
- both
let
andconst
create their own "bubble" (scope) -
const
cannot be re-assigned, nor re-declared
By "bubble" I mean that a variable declared with let
or const
do not overlap with the same variable name declared in an enclosing or in an outer "bubble". For example:
let name = "John";
{
let name = "Valentino";
console.log(name); // "Valentino"
}
console.log(name); // "John"
Here name
seems a duplicate, but in reality it is two different variables in their own bubble. const
has the same behaviour:
const name = "John";
{
const name = "Valentino";
console.log(name); // "Valentino"
}
console.log(name); // "John"
The same code with var
instead behaves in a different way:
var name = "John";
{
var name = "Valentino";
console.log(name); // "Valentino"
}
console.log(name); // "Valentino"
As I said const
cannot be reassigned, nor re-declared in the same bubble. If you try to re-declare a const
you get "SyntaxError: Identifier has already been declared". And if you reassign some value to the same constant you get "TypeError: Assignment to constant variable". The following example throws an error:
const name = "John";
const name = "Valentino";
// SyntaxError: Identifier 'name' has already been declared
and this code throws as well:
const name = "John";
name = "Valentino";
// TypeError: Assignment to constant variable.
But please, pay attention because when we say "const cannot be reassigned, nor re-declared" that does not mean const
is immutable. That's a topic that trips up literally every JavaScript developer I talk to. In fact any slightly more complex JavaScript data structure like array or object is more than mutable even when assigned to a const
:
const person = {
name: "John",
age: 21
};
person.name = "Valentino";
console.log(person);
// { name: 'Valentino', age: 21 }
// Oh, I wish I was 21 for real!
How is that immutable? Here's an array:
const list = [1, 1, 3, 2, 5];
list.shift();
console.log(list); // [ 1, 3, 2, 5 ]
Again, not immutable. Next time someone says "const is immutable", show him/her a couple of tricks.
Happy coding!