- Published on
The const keyword does not create immutable variables
const
keyword
An introduction to the The value of a variable created with the const
keyword can't be changed. Although this statement is true in the case of primitive values, it is complicated when it comes to objects and arrays.
For objects and arrays, only the reference to the memory location that contains the data is stored in the variable. So the data underneath can be changed without changing the reference
Example:
const foodsILike = ['Shwarma']
foodsILike.push('Jalebi')
console.log(foodsILike) // => ["Shwarma", "Jalebi"]
In this example, we created an array with the const
keyword and were still able to add items to it
What is immutability and why is it important?
Functional programming techniques and design patterns are very common in the Javascript world. We have tools like RxJS which bring reactivity to Javascript. Redux also depends on its state to be immutable. As a JS developer, you must take care that you do not mutate the state directly while updating it. In Redux, our reducers are never allowed to mutate the original / current state values!.
To prevent issues like these from occurring, you want to make your data immutable.
Object.freeze()
method
Using the The Object.freeze()
method freezes
an object (duh!). What does this exactly mean? A frozen object cannot be edited. New properties cannot be added and existing properties cannot be removed or modified in any way.
'use strict'
const obj = {
prop: 42,
}
Object.freeze(obj)
obj.prop = 33
// => TypeError: "prop" is read-only
// => will fail silently in non strict mode
There is however, a flaw to this approach
'use strict'
const obj = {
prop: 42,
propObject: {
name: null,
},
}
Object.freeze(obj)
obj['propObject']['name'] = 'Burhan'
console.log(obj)
/**
{
prop: 42,
propObject: {
name: "Burhan"
}
}
*/
This works perfectly fine since we are not modifying any properties of the frozen object directly.
You could use the deep-freeze package that recursively freezes all your objects
var deepFreeze = require('deep-freeze')
deepFreeze(Buffer)
Buffer.x = 5
console.log(Buffer.x === undefined)
Buffer.prototype.z = 3
console.log(Buffer.prototype.z === undefined)
/**
true
true
*/
This will help you prevent issues with mutations
Conclusion
The const
keyword creates a read-only reference to a value. It does not mean that the value itself is immutable. It's just that the variable identifier cannot be reassigned
If you plan on using immutable objects with React or Redux, check out ImmerJS. It enables you to create new objects without writing extra code for deep clones. It also has some great utility hooks to use with React