When to use const with objects in JavaScript?

Javascript

Javascript Problem Overview


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

(function(){
    const PI = 3.14;
    PI = 3.15; //  Uncaught TypeError: Assignment to constant variable
})();

So, nobody can change my PI variable.

The misunderstanding I have is that I don't understand in which situation the use of const with objects can make sense (other than preventing people to do myObj = newValue;).

(function(){
    const obj = {a:1 ,b: 2, c:3};
    //obj = {x:7 , y:8, z: 9}
    //This is good
    //TypeError: Assignment to constant variable.

    obj.a=7; obj.b=8 ; obj.c=9;
    console.log(obj); //outputs: {a: 7, b: 8, c: 9}
})();

So when declaring an object: when should I say: Now I must declare my object with const?

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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/

Solution 3 - Javascript

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);

Solution 4 - Javascript

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.

Solution 5 - Javascript

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.

Solution 6 - Javascript

const makes the name AND content immutable UNLESS the content is an object, then only the content can be changed.


const n = 1; 
n = 2; // Uncaught type error
let n = 2 // Already assigned


Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAla Eddine JEBALIView Question on Stackoverflow
Solution 1 - JavascriptShekhar PankajView Answer on Stackoverflow
Solution 2 - JavascriptburakView Answer on Stackoverflow
Solution 3 - JavascriptDaniel VestølView Answer on Stackoverflow
Solution 4 - JavascriptKaren GrigoryanView Answer on Stackoverflow
Solution 5 - JavascriptJaspreet SinghView Answer on Stackoverflow
Solution 6 - Javascriptuser7296390View Answer on Stackoverflow