Difference in const and Object.freeze() in JavaScript

This post describes the best practices to define constants and configuration values in JavaScript using const and Object.freeze() and the difference between them.

When we define constants and configuration values in our JavaScript applications. They should have following characteristics:-

1. Accessible across application
2. Value of the variable should be immutable
3. Reference of variable should be immutable

Now we will try to implement these characteristics…

Use let

Let’s define the variable using let and see,

let APP_NAME = "Coding N Concepts";

function getApplicationName() {
  APP_NAME = "Unkown App";
  return APP_NAME;
}

getApplicationName(); // Unkown App

In the above example, function getApplicationName() has changed the value of APP_NAME. How do we prevent changing value of a global variable?

Use const

We can use const to define a constant variable instead of let to prevent it from changing value.

const APP_NAME = "Coding N Concepts";

function getApplicationName() {
  APP_NAME = "Unkown App"; // This will throw TypeError
  return APP_NAME;
}

Trying to change value of a variable defined using const resulting into this error:

“TypeError: Assignment to constant variable.”

So this is it? Let’s find out

const fruits = ['mango', 'apple'];
fruits.push('banana');
console.log(fruits); // ['mango', 'apple', 'banana']

const constants = {
  APP_NAME : "Coding N Concepts"
};
constants.APP_NAME = "Unknown App";
console.log(constants.APP_NAME); // "Unknown App"

You can see in the above two examples that you can change the value of an array or an object even if you are using const because:

const does not make the value of the variable immutable but instead makes the binding of the variable immutable.

All primitive types like integer, boolean and string binding data by value whereas types like array and object binding data by reference.

Now we know that in case of array and object, we cannot change the reference but can change the value.

So how do we prevent changing value of array and object?

Use Object.freeze()

Here is where Object.freeze() comes into play. Object.freeze ignore the change in value of object and array.

let constants = Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants.APP_NAME = "Unknown App";

console.log(constants.APP_NAME); // "Coding N Concepts"

You can see in example that it doesn’t throw any error if you try to change the value but it won’t affect the object state.

Object.freeze() prevents from changing value of an object but we can still change the reference as below:-

let constants = Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants = { 
  APP_NAME : "Unknown App"
};

console.log(constants.APP_NAME); // "Unknown App"

If we summarize:-

const doesn’t allow to change reference of object or array though you can change the value.

Object.freeze() ignores the change in value of object or array

Combining them together will prevent change in both reference and value of an object or array

Use const and Object.freeze() together

const constants = Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants.APP_NAME = "Unknown App"; // This is ignored

constants = { 
  APP_NAME : "Unknown App" 
}; // This will throw TypeError

The above example shows that combining both const and Object.freeze() is very useful to define constants and configuration in JavaScript.