When to use const with objects in JavaScript?

Question

I recently read about ES6 const keyword and I can understand its importance when having something like this:

(function(){
    const PI = 3.14;
          


        

Answer 1

let and const are meant for type safety. There is no situation where you must use them, but they can be handy and reduce hard to spot bugs.

One example of a situation where const would be useful for an object that you don't want to turn into another type.

const x = {"hello":"world"};

// This is OK
x.hello = "stackoverflow";

// This is not OK
x = JSON.stringify(x);

Answer 2

it is a common misconception around the web, CONST doesn't creates immutable variables instead it creates immutable binding.

eg.

 const temp1 = 1;
 temp1  = 2 //error thrown here.

But

 temp1.temp = 3 // no error here. Valid JS code as per ES6

so const creates a binding to that particular object. const assures that variable temp1 won't have any other object's Binding.

Now coming to Object. we can get immutable feature with Object by using Object.freeze

const temp3 = Object.freeze( {a:3,b:4})
temp3.a = 2 // it wont update the value of a, it still have 3
temp3.c = 6 // still valid but wont change the object

Answer 3

If you work with an object and want to make sure that identity of the object is never changed say:

const a = {};

a.b = 1;

// ... somewhere in the other part of the code or from an async call
// suddenly

someAjaxCall().then(() => { a = null; }) // for preventing this

Also using const is a good hint for javascript compiler to make optimisations about your code, thus making execution much faster then with let or var because the identity never changes,

BUT

beware of using const/let in loops for performance reasons, because it might slowdown the performance due to creation of a variable per loop, but in most cases the difference is negligible.

Answer 4

According to ES6-Features.org, constants are used to make "variables which cannot be re-assigned new content". The const keyword makes a variable itself immutable, not its assigned content. When the content is an object, this means the object itself can still be altered.

Therefore, it's possible to change the content of the object that is declared with const variable, but you cannot assign a new object to a const variable.

You are still allowed to add new attributes to your object.

const myVar = "someValue";
const myObj = {"name": "nameValue", "age": 14}

console.log(myVar); //someValue
console.log(myObj.name); //nameValue

myObj.name = "newNameValue"; 
console.log(myObj.name); //newNameValue

myObj.someNewAttr = "newAttrValue";
console.log(myObj.someNewAttr); //newAttrValue

myObj = {"newNameAttr": "newNameValue"}; //Uncaught TypeError: Assignment to constant variable.
console.log(myObj.newNameAttr);

myVar = "newValue"; //Uncaught TypeError: Assignment to constant variable.
console.log(myVar);

You can also see on this fiddle: https://jsfiddle.net/am2cbb00/1/

Answer 5

const actually creates immutable binding instead of making the variables immutable.

Since primitive data-types (Boolean, null, undefined, String, and Number) are passed by value, they themselves become immutable and hence can't be re-assigned to some other value.

In the case of complex data-types (Array, Function, and Object), they are passed by reference. When we change or modify their properties/elements, we not changing their binding, hence const doesn't throw any error.