In JavaScript, properties are used to store and retrieve data on objects. These properties can be either read-only or writable, meaning they can or cannot be modified. Read-only properties, as the name suggests, cannot be changed once they are assigned a value. This can be useful in situations where you want to prevent accidental changes to important data. In this article, we will explore how to implement read-only properties in pure JavaScript.
First, let's understand what exactly is a read-only property. In JavaScript, an object's properties can be accessed using dot notation or bracket notation. In the case of read-only properties, they can only be accessed using dot notation. This means that they cannot be reassigned or modified using the assignment operator (=). Trying to do so will result in an error.
To create a read-only property, we can use the Object.defineProperty() method. This method takes three arguments: the object on which we want to define the property, the name of the property, and an object that contains the property's attributes. Let's take a look at an example:
const user = {
name: "John",
age: 25
};
Object.defineProperty(user, "email", {
value: "john@example.com",
writable: false,
enumerable: true
});
In the above code, we have defined a read-only property named "email" on the user object. The value of this property is set to "john@example.com". The writable attribute is set to false, which means this property cannot be modified. The enumerable attribute is set to true, which means the property will be included when looping over the object's properties.
Now, if we try to reassign the value of the "email" property, we will get an error:
user.email = "newemail@example.com"; // TypeError: Cannot assign to read only property 'email'
This shows that the read-only property has been successfully implemented. However, there are a few caveats to keep in mind while using read-only properties.
One important thing to note is that the Object.defineProperty() method only works on objects that are created using the Object constructor or literal notation. It will not work on built-in JavaScript objects like arrays or dates. To make a property read-only on a built-in object, you will need to use the Object.freeze() method.
Another thing to keep in mind is that read-only properties can still be deleted using the delete operator. To prevent this, we can use the configurable attribute and set it to false. This will make the property non-configurable, meaning it cannot be deleted or reconfigured.
Now, let's see how we can access read-only properties. As mentioned earlier, read-only properties can only be accessed using dot notation. If we try to access them using bracket notation, we will get undefined as the result.
console.log(user.email); // "john@example.com"
console.log(user["email"]); // undefined
This is because bracket notation allows us to access properties using dynamic values, whereas dot notation only allows us to access properties with fixed names.
In conclusion, read-only properties can be a useful tool in JavaScript to ensure the integrity of important data. They can be implemented using the Object.defineProperty() method by setting the writable attribute to false. However, it is important to keep in mind the limitations of read-only properties and use them appropriately in your code.
