Skip to main content

Property Flags / Descriptors

Object Properties Configuration: Property Flags / Descriptors

What are property attributes/flags that allow special access to an object?​

View Answer:
Interview Response: In JavaScript, Objects have three unique properties called attributes or flags. The object property attributes/flags include writeable, enumerable, and configurable flags. All three unique attributes are Boolean types requiring a setting to be true or false.

Technical Response: In JavaScript, Objects have three special properties called attributes or flags. The object property attributes/flags include writeable, enumerable, and configurable flags. All three special attributes are Boolean types requiring a setting to be true or false. The writable property attribute, if true, the value can be changed, and otherwise, it is read-only. If this property appears during the enumeration of the properties on the related object. The enumerable object attribute is true. The configurable property flag, if true, the property can be deleted, and these attributes can be modified; otherwise, not. All three of these special object attributes are set to false by default (According to the MDN), but when you invoke getOwnPropertyDescriptor it returns true (utterly confusing).

Code Example:

let user = {
  name: 'John',
};

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

console.log(JSON.stringify(descriptor, null, 2));

Output:

{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}

Explain the function and syntax of the Object.getOwnPropertyDescriptor method in JavaScript?​

View Answer:
Interview Response: The Object.getOwnPropertyDescriptor() method returns an object describing the configuration of specific properties on a given object. The returned object returns all object properties and attributes. By default, property attributes include writable, enumerable, and configurable with a Boolean return value set to true.

Technical Response: The Object.getOwnPropertyDescriptor() method returns an object describing the configuration of a specific property on a given object (that is, one directly presents on an object and not in the object's prototype chain). The object returned is mutable but mutating the object does not affect the original property's configuration. The obj is the object you are acting on, and the property name is the property you are attempting to extract the description of programmatically.

Code Example:

Syntax: Object.getOwnPropertyDescriptor(obj, propertyName);

let user = {
  name: 'John',
};

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

console.log(JSON.stringify(descriptor, null, 2));
/* property descriptor:
{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

Is there a method to define property attributes, writable, enumerable, and configurable in JavaScript?​

View Answer:
Interview Response: Yes, we can use the Object.defineProperty() method to change or set the property attributes.

Code Example:

Syntax: Object.defineProperty(obj, prop, descriptor);

let user = {};

let user = {};

Object.defineProperty(user, 'name', {
  value: 'John',
});

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

console.log(JSON.stringify(descriptor, null, 2));
/*
{
  "value": "John",
  "writable": false,
  "enumerable": false,
  "configurable": false
}
 */
note

You should note that writable, enumerable, and configurable are all set to false, by default, on empty objects. If you do not set the property attributes when using the defineProperty method on empty objects, they return false by default.

When you are creating a method for an object. Is there a way to restrict the enumeration of the newly created object method?​

View Answer:
Interview Response: Yes, you can define the property directly and set the property's enumerable attribute to false.

Code Example:

let user = {
  name: 'John',
  toString() {
    return this.name;
  },
};

Object.defineProperty(user, 'toString', {
  enumerable: false,
});

// Now our custom toString method disappears:
for (let key in user) console.log(key); // returns name, but no toString
note

We should note that they are all set to false by default when using the defineProperty method on an empty Object.

Is there a way to prevent changes in property flags and their deletion while allowing changes to their value?​

View Answer:
Interview Response: Yes, you can use the Object.defineProperty() method and set the configurable property flag to false.

Code Example:

let user = {
  name: 'John',
};

Object.defineProperty(user, 'name', {
  configurable: false,
});

user.name = 'Pete'; // works fine
delete user.name; // Error

Besides the seal() built-in JavaScript method, is there a way to seal an object property?​

View Answer:
Interview Response: Yes, you can use the Object.defineProperty() method and set configurable and writable property flags to false. This approach ensures that the object cannot be overwritten or re-configured. We should note that once making a property non-configurable is a one-way road, and we cannot change it back with defineProperty.

Code Example:

let user = {
  name: 'John',
};

Object.defineProperty(user, 'name', {
  writable: false,
  configurable: false,
});

// won't be able to change user.name or its flags
// this won't work:
user.name = 'Pete';
delete user.name;
Object.defineProperty(user, 'name', { value: 'Pete' });

If you want to define many properties at once in an object. What built-in JavaScript method can you use?​

View Answer:
Interview Response: The correct built-in JavaScript object method that we use to define multiple properties is the Object.defineProperties() method.

Code Example:

let obj = {};

Object.defineProperties(obj, {
  name: {
    value: 'Jane',
    writable: true,
  },
  surname: {
    value: 'Doe',
    writable: false,
  },
  // etc. etc.
});

console.log(obj.name); // returns Jane

Explain, the function and syntax of the Object.preventExtension(obj) method in JavaScript?​

View Answer:
Interview Response: An object is extensible if new properties get added to it. The Object.preventExtensions method marks an object as no longer extensible so that it does not properties beyond the ones it had when it gets marked as non-extensible.

Code Example:

Syntax: Object.preventExtensions(obj);

const object1 = {};

Object.preventExtensions(object1);

try {
  Object.defineProperty(object1, 'property1', {
    value: 42,
  });
} catch (e) {
  console.log(e.message);
}
// expected output: TypeError: Cannot define property property1, object is not extensible
note

You should note that the attributes of a non-extensible object can still be erased in general. Adding additional attributes to a non-extensible object fails silently or with a TypeError (most commonly, but not exclusively, when strict mode is enabled).

Can you explain the function and syntax of the Object.seal(obj) method in JavaScript?​

View Answer:
Interview Response: By default, objects are extensible, meaning new properties get added to them. Sealing an object prevents adding new properties and marks all existing properties as non-configurable. This behavior has the effect of making the set of properties on the object fixed. Making all properties non-configurable also prevents them from being converted from data properties to accessor properties and vice versa. Still, it does not prevent the values of data properties from being changed.

Code Example:

Syntax: Object.seal(obj);

const object1 = {
  property1: 42,
};

Object.seal(object1);
object1.property1 = 33;
console.log(object1.property1);
// expected output: 33

delete object1.property1; // cannot delete when sealed
console.log(object1.property1);
// expected output: 33
note

Attempting to delete or add properties to a sealed object, convert a data property to an accessor, or vice versa, fails, either silently or by throwing a TypeError (most commonly, although not exclusively, when in strict mode code).

Can you explain the function and syntax of the Object.freeze(obj) method in JavaScript?​

View Answer:
Interview Response: The Object.freeze() method freezes an object. It is impossible to modify a frozen object. When an object is frozen, it is impossible to add new properties, delete properties, change the enumerability, configurability, or writability of its properties, or change property values. Furthermore, freezing an item prevents its prototype from being modified. The item that was passed in is returned by Object.freeze().

Code Example:

Syntax: Object.freeze(obj);

const obj = {
  prop: 42,
};

Object.freeze(obj);

obj.prop = 33;
// Throws an error in strict mode

console.log(obj.prop);
// expected output: 42

What is the difference between freeze and seal in JavaScript?​

View Answer:
Interview Response: We use both freeze and seal to create non-extensible objects, but there are many differences between them. Object.seal() allows changes to the existing properties of an object while Object.freeze() does not. Object.freeze() makes an object immune to everything; even little changes cannot get made. Object.seal() prevents from deletion of existing properties but cannot prevent them from external changes.

Can you explain the function and syntax of the Object.isExtensible() method in JavaScript?​

View Answer:
Interview Response: The Object.isExtensible() method determines if an object is extensible (whether it can have new properties added to it). The Object.isExtensible(obj) method returns a Boolean indicating whether the given object is extensible.

Code Example:

Syntax: Object.isExtensible();

const object1 = {};

console.log(Object.isExtensible(object1));
// expected output: true

Object.preventExtensions(object1);

console.log(Object.isExtensible(object1));
// expected output: false

Can you explain the function and syntax of the Object.isSealed() method in JavaScript?​

View Answer:
Interview Response: The Object.isSealed() method determines if an object gets sealed or not. The Object.isSealed(obj) method returns a Boolean true or false, indicating whether the given object remains sealed.

Code Example:

Syntax: Object.isSealed(obj);

const object1 = {
  property1: 42,
};

console.log(Object.isSealed(object1));
// expected output: false

Object.seal(object1);

console.log(Object.isSealed(object1));
// expected output: true

Can you explain the function and syntax of the Object.isFrozen() method in JavaScript?​

View Answer:
Interview Response: The Object.isFrozen() determines if an object is frozen and returns a Boolean indicating whether the given object is frozen. An object is frozen if and only if it is not extensible, all its properties are non-configurable, and all its data properties (that is, properties which are not accessor properties with getter or setter components) are non-writable.

Code Example:

Syntax: Object.isFrozen(obj);

const object1 = {
  property1: 42,
};

console.log(Object.isFrozen(object1));
// expected output: false

Object.freeze(object1);

console.log(Object.isFrozen(object1));
// expected output: true