Configuration of object properties in JavaScript

Data Property Descriptors#

value: value
writable: whether the value can be changed
enumerable: whether it can be enumerated (forin, Object.keys())
configurable: whether it can be configured (delete, defineProperty whether it can be set successfully)

note
Property descriptors work at the level of individual properties.

Object.getOwnPropertyDescriptor#

Get the descriptor of a data property.

const user = {
  name: 'z',
  age: 23
}

const config = Object.getOwnPropertyDescriptor(user, 'name')

console.log(config)
// { value: 'z', writable: true, enumerable: true, configurable: true }

Object.defineProperty#

Set the descriptor of a data property.

const user = {
  name: 'z',
  age: 23
}

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

Object.defineProperties#

Set the descriptors of multiple data properties at once.

const user = {
  name: 'z',
  age: 23
}

Object.defineProperties(user, {
  name: {
    writable: false,
    enumerable: false,
    configurable: false
  },
  age:{
    writable: false,
    enumerable: false,
    configurable: false
  }
})

Object.getOwnPropertyDescriptors#

Get all data property descriptors at once.

const user = {
  name: 'z',
  age: 23
}

const config = Object.getOwnPropertyDescriptors(user)
console.log(config)
// {
//    name: { value: 'z', writable: true, enumerable: true, configurable: true },
//    age: { value: 23, writable: true, enumerable: true, configurable: true }
//}

Setting a Global Sealed Object#

Object.seal(obj)#

Prevents adding/removing properties. Sets configurable: false for all existing properties.

Object.freeze(obj)#

Prevents adding/removing/changing properties. Sets configurable: false, writable: false for all existing properties.

Accessor Properties#

Essentially functions for getting and setting values, but appear as regular properties from external code.

let obj = {
  get propName() {
    // getter is executed when reading obj.propName
  },

  set propName(value) {
    // setter is executed when executing obj.propName = value
  }
};

Getter and Setter#

Accessor properties are represented by "getter" and "setter" methods. In object literals, they are represented by get and set:

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// set fullName is executed with the given value
user.fullName = "Alice Cooper";

console.log(user.fullName) // Alice Cooper
console.log(user.name); // Alice
console.log(user.surname); // Cooper

Accessor Descriptors#

get: A function with no arguments that works when the property is read
set: A function with a single argument that works when the property is written
enumerable: Same as data properties
configurable: Same as data properties

let user = {
  name: "John",
  surname: "Smith"
};

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} ${this.surname}`;
  },
  enumerable: true,
  set(value) {
    [this.name, this.surname] = value.split(" ");
  }
});

console.log(user.fullName); // John Smith

for(let key in user) console.log(key); // name, surname, fullName