JavaScript Read-Only Properties and “use strict”;

Setting an Object Property to Be Read Only

Many times in JavaScript, we want to create an object with properties that are going to be immutable, or in other words, are read-only. This presents a unique and interesting problem in JavaScript, as const is not always going to work, especially if you are dealing with an object.

From MDN:

“The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object’s contents (e.g., its properties) can be altered”

So don’t fall into the trap of thinking that just because you have assigned a value with const that it is going to be read-only. You can still modify the children properties and objects, you are just unable to reassign the const variable to another object or primitive type value.

writable and defining a property

So how do we accomplish the creation of our read-only property then? In Javascript, there is the writable property that we can set when creating a JavaScript object. This writable property is a boolean value and is set to either true or false and allows us to create our read-only property.

Also from MDN:

“The static method Object.defineProperty() defines a new property directly on an object, or modifies an existing property on an object, and returns the object.”

Using this let’s set see how we can set the writable property to false.

const obj = {};

Object.defineProperty(obj, 'readOnlyPlease', {
  value: 'thisIsReadOnlyNow',
  writable: false //set to false to dissallow changing
});

obj.readOnlyPlease= 'I am going to overwrite this value!';


console.log(obj.readOnlyPlease);
// expected output: thisIsReadOnlyNow

Voila!, we have a read-only property now. We attempted to overwrite it and instead returned our original value. But what if we wanted to warn or notify the developer that they cannot reassign our value, and give them something a bit more exception like?

use strict; to the Rescue

We can enforce and add exceptions to our code by using the use strict; directive in our code. 'use strict;' is a directive that has a lot of different use cases and applications, and I should cover the entirety of that in another post, but for now, just realize that when this directive is used it enforces specific rules in our code where it can be run globally at the top of our script or it could be run inside a function scope to allow for only a portion of our code to be run in strict mode. For now, just realize that it is going to further enforce our code and allow us to throw an exception to warn developers that attempting to overwrite a read-only property is not doable.

"use strict;"
const obj = {};

Object.defineProperty(obj, 'readOnlyPlease', {
  value: 'thisIsReadOnlyNow',
  writable: false
});

obj.readOnlyPlease= 'I am going to overwrite this value!'; 
// throws the following exception in our code
//`Uncaught TypeError: Cannot assign to read only property 'readOnlyPlease' of object '#

I hope that this helps you to better understand how and why this approach is considered a best practice when working with JavaScript properties if you want to create and enforce read-only properties.

Cheers and happy coding!

Next On FoC

Equality Operators in JavaScript

Equality Operators in JavaScript
Previously On FoC

Webpack with Babel 7 Project Setup

Webpack with Babel 7 Project Setup