A look at JavaScript Objects

Let’s explore objects

Recently I started diving deep into react source code and just reading over the code I learned a lot and among all of these things was a better understanding of JavaScript Objects.

So let’s together go through the things I have learned so far.

Object.freeze

I had known about Object.freeze from some time now but seeing it in action brings a lot to the table. The main purpose of Object.freeze is to freeze the object that is passed to it. Frozen object properties cannot be modified, added or removed in other terms it will make an object completely immutable

If we don’t want that our objects should be modified we can freeze them just like this

A note to everyone if we use const to define an object in javascript it doesn’t make the whole object immutable in other words we can still modify and update object properties or methods which is defined with the const keyword

So it’s better to freeze an object if you don’t want anyone to change anything in that object.

Object.isFrozen

If we want to check whether our object is frozen or not we can check that with Object.isFrozen

Pass the object which you want to check and Object.isFrozen will return a boolean indicating if the object is frozen or not

Object.seal

Object.seal will prevent any property from being added or removed from an object. We can still modify the properties of the object.

We can use Object.seal where we don’t want to add new properties to a specific object but still be able to modify our object for their own purpose.

Object.defineProperty

Object.defineProperty is one of really interesting Object method I came across. It is a simple method which lets you define a new property or modify an existing property on an object but it also let’s you pass descriptors as well.

Object.defineProperty takes an object, property name, and descriptor as arguments.

Descriptors can be of two types data and accessor

A data descriptor has two properties value and writable. The value property contains the actual value and writable tells whether the property added to the object can be modified or not.

An accessor descriptor defines a pair of two methods get and set. The get method will be called when our code will try to access the property and set function will be called when we try to modify our property.

At one time we can only pass one descriptor. So either it can be of type data or accessor

Let's have a look at accessor descriptors

The newObject is not a normal property it is defined with accessor descriptor so it will not be shown as normal properties.

Let’s have a look at data descriptors

we can also make our name property immutable by passing writable: false

Always keep in mind you can’t pass writable , value and get , set at the same time it will throw an exception. As we already know a descriptor can only of one type when passed to defineProperty

Object.assign

assign lets you merge two objects together. If you had used ES6 you probably do merging of objects using spread operator.

I will be sharing more things which I will come across React source code till then keep sharing 😃 and clapping 👏

Here are more articles for you.

So I Built my own React Native Button

Building a React component as a NPM module

Publishing a React Component as an NPM module

Speed learning javascript

Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer follow me at Twitter or Github.

I am available to give a public talk or for a meetup hit me up at justanothermanoj@gmail.com if you want to meet me.

Really loved this article ?

Please subscribe to my blog. You will receive articles like this one directly in your Inbox frequently.

Peace.