An Introduction to Object.Freeze and Const for Javascript Developers

Prerequisites

1. Basic knowledge of javascript
2. Javascript Objects

In the world of javascript, Object is everything. W3School puts it this way: “If you understand objects, you understand JavaScript”. But what is a javascript object and why is it so important?
Javascript Object is a set of associations between keys and values. Objects can hold values to the “Primitive” data types (String, Number, Boolean, Null, Undefined) or in the form of a function.
You can learn more here. Now let's do some codding:

let student = {
   firstName: 'John',
   lastName: 'Doe',
   gpa: 3.7,
   print: ()=>{
       console.log(`Student Name: ${student.firstName} ${student.lastName},
       GPA: ${student.gpa}`);
   }
};

student.print();

In the code above we created an object called student with 4 properties (keys) and then we ran the “print” function inside our object. So that's basically how you can create an object in javascript.

let student = {
   firstName: 'John',
   lastName: 'Doe',
   gpa: 3.7,
   print: ()=>{
       console.log(`Student Name: ${student.firstName} ${student.lastName},
       GPA: ${student.gpa}`);
   }
};
student.print();

student.firstName = 'Jared';
student.lastName = 'James';

student.print();

In the code above, as you can see, we can modify the values of student’s properties directly. There would be a situation where you don’t wanna allow yourself or other developers to modify your object. This can be either you want to follow the Immutability paradigm (You can learn more from one of my previews entries) or your object is carrying some sensitive global information such as configuration.

Const

ES6 introduced the concept of “Constants”. If you are familiar with Object-oriented, it’s when you declare a variable as “final”, you cannot reassign that variable or modify its value. The same goes for “const” in javascript. In Javascript (ES6+) When you initiate a variable with const, you no longer can re-assign that variable. If you want to be able to re-assign a variable, you should use the let keyword.

let name = 'John';
console.log(name);
name = 'James';
console.log(name);
const name2 = 'Joe';
name2 = "Jack"

You may think now, the problem is solved, now I can define my student object with const and nobody can modify its property. That’s somehow true. If you define your student object with const, no one would be able to re-assign it with other objects but you still can modify its properties.

const student = {
   firstName: 'John',
   lastName: 'Doe',
   gpa: 3.7,
   print: ()=>{
       console.log(`Student Name: ${student.firstName} ${student.lastName},
       GPA: ${student.gpa}`);
   }
};
student.print();

student.firstName = 'Jared';
student.lastName = 'James';

student.print();

student = {};

If you run the above code, You’ll see it runs up to the last line when you reassign the student object to an empty object. That’s where it throws errors. So what is the solution?

Object.freeze

const student = {
   firstName: 'John',
   lastName: 'Doe',
   gpa: 3.7,
   print: ()=>{
       console.log(`Student Name: ${student.firstName} ${student.lastName},
       GPA: ${student.gpa}`);
   }
};

Object.freeze(student);
student.print();

student.firstName = 'Jared';
student.lastName = 'James';

student.print(); 

Object.Freeze is one of the Object’s methods. If you run the above code, you will see the result of the second print is identical to the first print. The reason is: after I created the student object, I used Object.freeze to “freeze” my object. In another word, when an object gets frozen by Object.freeze, you no longer would be able to add, modify or delete the properties of that particular object. But there is a pitfall, consider the following code:

const student = {
   name:{
       first: 'John',
       last: 'Doe'
   },
   print: ()=>{
       console.log(`Student Name: ${student.name.first} ${student.name.last}`)
   }
};

Object.freeze(student);
student.print();

student.name.first = 'Jared';
student.name.last = 'James';

student.print();

You would expect the result of the two prints to be identical. The difference is: Object.freeze is not freezing the name object under student.
Here how you can fix it:

const student = {
   name:{
       first: 'John',
       last: 'Doe'
   },
   print: ()=>{
       console.log(`Student Name: ${student.name.first} ${student.name.last}`)
   }
};

Object.freeze(student);
Object.freeze(student.name);

student.print();

student.name.first = 'Jared';
student.name.last = 'James';

student.print();

Conclusion

We talked about how to create an object in javascript, Then we talked about creating a constant. We talked about why we need Object.freeze and what the limitations are. Next, I’ll talk about queues in node.js and introduce RabbitMQ