The Startup
Published in

The Startup

Property Descriptor in Javascript

Photo by Blake Connally on Unsplash

Have you ever heard the term Property Descriptor during the time you have been working with javascript? To be a better javascript developer we should have a better understanding of javascript objects because in Javascript everything is an object.

Property descriptor is one of the concepts that is used in the very root level of core javascript implementation. If you are a javascript developer then you are using the property descriptor implementation for a long time but maybe you never noticed that thing.

Ways to Iterate Object Properties

Most of us probably know that in Javascript we have two ways to get the properties of an object. Those are —

  1. for in loop
  2. keys method from Object constructor function.
const user = { name: "ashraful" };// For-in loop approach
for (let key in user) {
console.log(key); // => name
}
// Object constructor function approach
console.log(Object.keys(user)); // => ["name"]

We can get the properties from user object with those two approaches.
From our example, we will get name .

But if you inspect this object in Chrome Dev Tool then you can see that we have some additional properties from the user object.

If you have some idea about the prototype concept in javascript then we can understand from where we are getting those additional properties. Those are basically prototype members. But when you will try to get the members from the user object then you will only get instance members, for our case it’s name . But why we can’t iterate over the members from theuser prototype?

Here property descriptor comes in action. 😎

Property Descriptor

In Javascript, some attributes are attached to every property. Those attributes change the behavior of each property. Sometimes those attributes prevent a property from being enumerated.

So in simple words, property descriptor is just an object that will define how a property of an object will behave.

To get the prototype of an object we can use getPrototypeof method from Object constructor function and to get the descriptor of a property we can use getOwnPropertyDescriptor method.

const user = { name: "ashraful" };const prototypeOfUser = Object.getPrototypeOf(user);const descriptor = Object.getOwnPropertyDescriptor(prototypeOfUser, "toString");console.log(descriptor);

Let’s see what those attributes mean —

configurable is true , so we can delete this member.

enumerable is false , we cannot iterate, so we will not get this property by Object.keys

writable is false, we can change the default implementation, so we can override.

value value of the member, which is a function for toString property.

When we will write our own object we can also set values for those attributes for our object property.

To set the descriptor of an object property we can use defineProperty method.

const user = { name: "ashraful" };Object.defineProperty(user, "name", {
writable: false,
configurable: false,
enumerable: false,
});
// We cannot reassign value because writable set to false
user.name = "new name";
user.name = "new name";// We can not delete name property because configurable set to false
delete user.name;
// We can not iterate properties because enumerable set to false
console.log(Object.keys(user)); // => []
console.log(user); // => {name: "ashraful"}

Conclusion

Keeping the property descriptor in mind we can write maintainable and less error-prone code. We can change the descriptor for some of our application object properties as our need. So in the future, someone will not be able to change or modify those properties accidentally.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ashraful Islam

Ashraful Islam

54 Followers

Software Engineer | Javascript Developer | React | React Native | Angular | NodeJS