Object.freeze() in JavaScript
Tags: javascript, todayilearned, codenewbie, 100daysofcode
Published: 2020-11-12 19:37:37

Many of us have the same doubts regarding "How `Object.freeze()` method works in JavaScript?" 🤔

Isn't it? 🙄

A couple of days back, I received a Developer Newsletter email from [Auth0](https://auth0.com/) & got to know about the November Coding Challenge (will share the challenge later in this blog) they have rolled out. That challenge has to do with `Object.freeze()` and I faced the same question at that time and thought of writing a blog on that. ✍️

So, here it is! 🎉

> Before we try that Coding Challenge, Let's first understand `Object.freeze()` method's working. ⚙️

### Object.freeze() Method

The `Object.freeze()` method freezes an object. By freezing I mean, that object can no longer be mutated i.e., freezing an object will prevent the addition of new property, deletion of any property, or altering the existing property.

You would have gained a basic understanding of what `Object.freeze()` method will do. But, don't panic if you didn't get any idea yet. Will walk you through the working of the method with an example.

#### Syntax:
```js
Object.freeze(obj) // `obj` is the object which has to be freezed.
```

#### Example - 1:

```js
const fullName = {
   firstName: 'Test',
   lastName: 'User'
};

const newFullName = Object.freeze(fullName);
newFullName.firstName = 'Testing';

console.log(newFullName.firstName); // Output: Test 
```

In the above example code, the object `newFullName` has been assigned property from an object `fullName`, and the properties of `fullName` object are frozen. Therefore, new property and values are prevented from being added to the `newFullName` object and `fullName` object is immutable.

#### Example - 2:

Let's see what's the effect of `Object.freeze()` method on an object with the property being the object/array itself. 

```js
const course = {
    name: 'Intro to ReactJS',
    author: 'Kect C Doods',
    info: {
        duration: '3 hours',
        platform: 'Youtube'
    }
};

Object.freeze(course);

course.name = 'Intro to Next.js';
course.info.duration = '1.5 hours';

console.log(course.name); // Output: Intro to ReactJS
console.log(course.info.duration); // Output: 1.5 hours
```

`Object.freeze()` method only applies to the immediate properties of an object. This means it will prevent values addition/deletion/reassignment operations only on immediate object properties (`name` & `author` in this case). 

But, if the value of those properties are objects or arrays themselves, then those objects or arrays won't be frozen and they are still mutable (`info` in this case).

**Explanation:** As the immediate property `name` will be frozen and its value will not change. But, `info` property is an object, and as `Object.freeze()` performs shallow freeze the output we are getting is the updated value as the child object will not be frozen with this method call.

> Note: Similar functionality of `Object.freeze()` method can be seen if the object's property is an array itself.


**What was the November Coding Challenge?** 🧐

Now that you know how `Object.freeze()` works, I would like you to give this challenge a try.

> Let me know what will be the output of the following code snippet in the comments section. 

![November-Dev-NL-Code-Challenge.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605204997714/rskB5QiHH.png)

--------

> 💡 Key Points: 
1. Object.freeze() method is used to freeze `objects` & `arrays`.
2. Object.freeze() method is used to make an object immutable.
3. Object.freeze() method will perform `Shallow Freeze`.


If you find it useful, do share it on your socials and let me know your question/thoughts in the comment section, and don't forget to try the November Coding challenge. 😛 

Woohoo! 🎊 You made it till the end. Thanks 🤝


#### References: 

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
2. Cover Image: https://unsplash.com/photos/xEh4hvxRKXM