When to use const with objects in 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
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.
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);
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/