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

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay