DEV Community

Cover image for The const keyword does not create immutable variables
Burhanuddin Udaipurwala
Burhanuddin Udaipurwala

Posted on • Originally published at burhanuday.com

The const keyword does not create immutable variables

An introduction to the const keyword

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"]
Enter fullscreen mode Exit fullscreen mode

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.

Using the Object.freeze() method

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
Enter fullscreen mode Exit fullscreen 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"
  }
}
*/
Enter fullscreen mode Exit fullscreen mode

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
*/
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)