How to make specific object properties behave like constants
Ever wondered how to prevent your code from mutating object properties whose values should never change?
I know what you’re probably thinking, why not just use a const keyword to declare the object? well, doing it that way would only prevent the variable itself from being mutated and not the object properties, for example:
One way we could achieve this is to use the Object.freeze() method, but that locks down the entire object and in some cases we might not want that to happen, Object.freeze() not only prevents the value of the properties from being changed, but it also prevents new properties from being added to the object, existing properties from being removed, and prevents its prototype from being changed.
What is the best way to do it then?
In my own opinion, the best way to lock down an object’s property is to use the Object.defineProperty() method, this method allows you a bit more flexibility by allowing you to customize certain attributes of the property.
After taking a look at the code snippet above, you might be confused about what’s happening there, why did it return 2? why was there no error? we’ll get to that in a minute, first off let me explain how the Object.defineProperty method works.
Object.defineProperty() takes in three arguments:
The first one is the name of the object.
The second is the property name you want to configure (this has to be a string) it must match the name of an existing property in the object, if it doesn’t then a new property will be created with that name and the configurations will be assigned to the property instead (whoa! another way to create properties in objects).
The last argument is the property descriptor (sometimes called attributes), this is usually an object with four keys, but I only chose to use three because the fourth was not needed in this case, the four keys that define the property are:
- value
- enumerable
- writable
- configurable
value: remember when I mentioned using Object.defineProperty() to create a new property in an object? this attribute comes in handy such that we can use it to assign a value to the property if it doesn’t have one, we can also use it to change the value right before making it read-only (it all depends on the order you arrange the attributes in). This value can be any valid JavaScript value, a string, boolean, null, etc.
enumerable: this takes a boolean as its value, what this does is configure the property to either show up when the object is enumerated (looped through for example) or not, if the value is false, the property will be invisible in loops and other forms of enumeration.
writable: this either makes it possible to change the value of the property or not, its expected value is a boolean, and if a value of false is assigned to it, the property becomes immutable.
configurable: this attribute makes it impossible to configure the property with the attributes listed above when it is set to false. all other configuration would not work when the property is set to not be configurable, and this makes sense when we do not want our property tampered with, this attribute basically locks down the object’s property from configurations.
Now, back to the mystery code.
Why was there no error when we attempted to change the value of the property?
Well, JavaScript does something in the background that we might not know about. It suppresses errors as much as possible so our code would continue to run, so our code will fail silently and we wouldn’t know about it, this sometimes is the reason for bugs in our apps.
How do we solve this?
With strict mode, basically using strict mode gives us all the errors in our code and forces us to write good code, I won’t be going deep into what strict mode is and how it works as that would take us off the scope of this article. Take a look at the snippet below:
Adding the line "use strict"; at the top of our code helps us know what is going on with our object.
Maybe my next article will be going deep into what strict mode is in JavaScript.
Here are a few resources to learn more about objects and how to manipulate them.
Follow me on Twitter
Check out my website
