Sometimes you may want your variable to act like a constant variable or something, well we can achieve such a behaviour by using writable property descriptor
Object Dot defineProperty
Let’s see it in action, first we need an object;
var b = {};
Then, let’s add a property to this objec,we can use the built-in defineProperty()
function of the Object
to achieve this :
Object.defineProperty(b, "a", {
value: "b letter",
writable: false,
configurable: true,
enumerable: true
});
b.a; // "b letter"
What happened here? We can say that we just changed the characteristics of our object, let’s have a closer look:
- The function takes 3 parameters, first is the object that we are going to modify.
- Second parameter is our new property name
- The last parameter is an object we use to define the characteristics of our new property
To see this in action, press F12 in your browser then navigate to the Console tab, copy & paste this code there, hit enter!
writable Property
If you saw the second prop, writable : false
, you’d already guess that we cannot write any other value on that property, which is b.a
.
Well, what happens if we try to assign another value to it:
b.a = 12;
b.a; // "b letter"
No errors, no warnings, it just outputs b letter
.
What About const keyword
ES6 introduced a new keyword, const
. As you can guess we can define constants with it. Let’s define a constant:
const a = 15;
a; // 15
Nothing tricky here, what if we try to re-assign it’s value?
a = 12;
a; // Error
And as we’d expect, it throws an error. I’ve seen that some engines throw SyntaxError
while some other engine throws TypeError
, but the description is same, that we cannot Re Assign a constant variable
configurable Property
Let’s have another look at our code :
Object.defineProperty(b, "a", {
value: "b letter",
writable: false,
configurable: true,
enumerable: true
});
b.a; // "b letter"
Now we need to figure out what configurable does. Lets change it’s value to false
see what happens:
Object.defineProperty(b, "a", {
value: "b letter",
writable: false,
configurable: false, // Notice the false value
enumerable: true
});
b.a; // "b letter"
Object.defineProperty(b, "a", {
value: "a letter",
writable: false,
configurable: true,
enumerable: true
}); // TypeError
It’s clear that we first declared our property as un-configurable, then we tried to configure it again and the engine throws a TypeError
.
Lastly, enumerable
property decides whether or not our property can be defined in an enumerable code block, such as for
iterations.
You Don’t Know Js: An Amazing Book Series
I’ve been following these series and i’ve learnt all of these through this book, trust me you should give it a look!