CODEWITHSUNDEEP
javascript
Ala Eddine JEBALI
Ala Eddine JEBALI

Reputation: 7841

When to use const with objects in JavaScript?

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?

Upvotes: 64

Views: 99051

Answers (6)

burak
burak

Reputation: 4064

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, or even delete attributes.

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

delete myObj.name
console.log(myObj.name); // undefined

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

Upvotes: 24

user7296390
user7296390

Reputation: 180

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

Upvotes: 0

Jaspreet Singh
Jaspreet Singh

Reputation: 1762

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.

Upvotes: 1

Shekhar Pankaj
Shekhar Pankaj

Reputation: 9145

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

Upvotes: 125

Karen Grigoryan
Karen Grigoryan

Reputation: 5432

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.

Upvotes: 4

Daniel Vestøl
Daniel Vestøl

Reputation: 489

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

Upvotes: 10

Related Questions