Once and for all: const in JavaScript is not immutable

Valentino Gagliardi - Jul 12 '19 - - Dev Community

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;
Enter fullscreen mode Exit fullscreen mode

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 and const 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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

and this code throws as well:

const name = "John";
name = "Valentino";

// TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

How is that immutable? Here's an array:

const list = [1, 1, 3, 2, 5];

list.shift();

console.log(list); // [ 1, 3, 2, 5 ]
Enter fullscreen mode Exit fullscreen mode

Again, not immutable. Next time someone says "const is immutable", show him/her a couple of tricks.

Happy coding!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .