Add read-only (immutable) property to a JavaScript Object

Objects are fundamental to JavaScript. Working with objects is easy as the syntax is intuitive. However, they do not serve all the use cases with Literal Syntax. For example, when you want to create read-only aka immutable properties, using the square-bracket syntax is not what you want.

In this video, you will learn about Object.defineProperty to add read-only properties to an object

Code

// Writable property
'use strict';

let iPhone = {
    name: 'iPhone 11',
    color: 'blue'
}

console.log(iPhone)

iPhone["price"] = 600
console.log(iPhone)

iPhone["price"] = 0
console.log(iPhone)

// read-only property
'use strict';

let iPhone = {
    name: 'iPhone 11',
    color: 'blue'
}

Object.defineProperty(iPhone, "price", {
    value: 1200,
    writable: false, // default true
    enumerable: true
})

console.log(iPhone)

iPhone["price"] = 0
console.log(iPhone)

Full Transcript

0:00 Hey there, it's Harit Himanshu from bonsaiilabs. Welcome to the series on JavaScript. Today. in this video, you will learn how to add a read only property to a JavaScript object. Let's say to you have an object called iPhone with the name and color property. And now here we are trying to do a console.log on iPhone. As we run, you will see that the name and the property color has been printed on the console. Now let's say I want to add a new property called price to iPhone. For that, I will add a property called price on iPhone object by using these square braces and assigning a value of $600. Next, I will add a console.log on iPhone and next we will clean and run it. As you see that the price of $600 has been associated with the iPhone object. Next, let's try to update the price again.

0:50 So we will do iPhone and square brackets price, and now we'll update it to $0. To confirm that we will do console.log and print the iPhone object. Now we will clean and run the project again and as you see that initial price was $600 but now it has changed to $0. This means the properties added using the square brackets syntax are writeable in nature, which means once you have defined them you can change their value again. But that's not what we want. We want the new properties to be read only, which means once we have assigned the value, we do not want their value to change. After all, as a seller of iPhone, I do not want its price to be updated as $0. So what should I do? To do that, we are going to use Object.defineProperty.

1:39 And we will say, we want to add a property on object called iPhone. The property name is price and we will add a property descriptor. In this property descriptor, we are going to add the value of this property as 1200. We will make this property writeable as false so that nobody can change once a value assigned. The default value is true for all the properties and we will make this property enumerable as true. This is so that when we iterate over the object properties, we can find the price property inside it. To confirm, we will do a console.log of iPhone object. Let's go ahead and run that. As we've run, we will confirm that the price of 1200 has been added to the object. Now can we change the value of price? Let's find out. For that, we will add square bracket syntax to change the price to $0 and to confirm we will do a console.log on iPhone object.

2:38 We will save and try to run the code again and as we run, you'll see that the error popped up. You cannot assign a value to a read only property. And that confirms that using Object.defineProperty, we can create the read only properties to the object. And that's it. If you like the video, consider subscribing us to receive more engaging content about JavaScript every single week. Until then, keep learning new skills and apply them regularly to become an expert programmer. See you next time.