DEV Community

Cover image for Controlling Object property using special flags
mohammed ashfaq
mohammed ashfaq

Posted on • Edited on

2 1

Controlling Object property using special flags

An Object is a collection of key/value pairs. Apart from value an
object property have speacial flags to configure.

  1. Writable: If false value can not be upadated.
  2. Enumerable: If false property won't be listed in the loop.
  3. Configurable: If false property can't be deleted.

We will use two methods to get and set the flags:

i) Object.getOwnPropertyDescriptor // To get property description

Object.getOwnPropertyDescriptor(obj, 'propertyName');

/* property descriptor:
{
  "value": propertyValue,
  "writable": Boolean,
  "enumerable": Boolean,
  "configurable": Boolean
}
*/

ii) Object.defineProperty // To create/update the property value and flags

Object.defineProperty( obj, 'propertyName', 
   {  value: propertyValue, 
      writable : Boolean, 
      enumerable : Boolean,
      configurable: Boolean
    }
 ) 

In the next blog, We will use the above method to make an object property Non-writable, Non-Enumerable and non-Configurable.

By Default all the flags are set to true.

let person = { firstName: "john", lastName: "kumar" };

Object.getOwnPropertyDescriptor(person, "firstName");
 /* { 
    value: "john", 
    writable: true, 
    enumerable: true, 
    configurable: true
  }

*/
Object.getOwnPropertyDescriptor(person, "lastName");
 /* { 
    value: "kumar", 
    writable: true, 
    enumerable: true, 
    configurable: true
  }

*/

1. Non-Writable

As the writable flag is set to true. We can change the firstName property.

person.name = "Ram";

Now, let's change the writable flag to false


Object.defineProperty(person, "firstName", {
  writable: false,
});

Object.getOwnPropertyDescriptor(person, "firstName");
  /* { 
    value: "Ram", 
    writable: false, 
    enumerable: true, 
    configurable: true
  } */

Now, if we try to update the firstName property. Javascript will throw a Type Error:Cannot assign to read only property in strict mode.

person.firstName = "Alice"; 
// Cannot assign to read only property in strict mode.

console.log(person.firstName) // Ram

2. Non-Enumrable

As the enumerable flag is set to true for firstName property. If we loop over the person object the firstName property will be shown up.

for (property in person) {
  console.log(property);
}
/* 
  firstName
  lastName
*/

Now, let's change the enumerable flag to false.


Object.defineProperty(person, "firstName", {
  enumerable: false,
});

Object.getOwnPropertyDescriptor(person, "firstName");
  /* { 
    value: "Ram", 
    writable: true, 
    enumerable: false, 
    configurable: true
  } */

Now, if we loop over person object the firstName property will not be shown up.

for (property in person) {
  console.log(property);
}
/* 
  lastName
*/

3. Non-Configurable

As the configurable flag is set to true for lastName property. We can delete the lastName property.

delete person.lastName;
console.log(person) // { firstName: Ram}

Now, let's change the configurable flag to false


Object.defineProperty(person, "firstName", {
  configurable: false,
});

Object.getOwnPropertyDescriptor(person, "firstName");
  /* { 
    value: "Ram", 
    writable: true, 
    enumerable: true, 
    configurable: false
  } */

Now, if we try to delete the firstName property. Javascript will throw an TypeError: Cannot delete property 'firstName' of #Object

delete person.firstName; // Cannot delete property 'firstName' of #Object

console.log(person.firstName) // Ram

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay