Object Control in JavaScript: defineProperties()

It has been a long time coming, but following on from my article almost exactly a year ago where I discussed the use of defineProperty() in JavaScript, it now feels well overdue that we discuss that method's object‑manipulating cousin: defineProperties().

As you might recall (or might now be aware, having gone and read that article first), Object.defineProperty() allows us to define or modify object properties. Its useful extra is control over a property's descriptor: for example, whether it can be reassigned, or whether reading it calls a getter function.

defineProperties() serves a similar purpose but extends the functionality to allow for defining multiple properties at once.

What is defineProperties()?

Object.defineProperties() is a method in JavaScript which allows you to define new or modify existing properties directly on an object, and to specify characteristics for each property. This is particularly handy when you need to handle multiple properties at once.

Syntax

Object.defineProperties(obj, props)

• obj: The object on which to define or modify properties.
• props: An object whose keys represent the names of the properties to be defined or modified and whose values are objects describing each property's descriptor.

Using defineProperties()

If you are already aware of defineProperty(), then this will feel very familiar, just on a larger ‑ multiple‑property ‑ scale where we can encapsulate all of our property definitions within a single call.

Here's a quick example:

const book = {};

Object.defineProperties(book, {
  title: {
    value: 'Ayoade on Ayoade: A Cinematic Odyssey',
    writable: true,
  },
  author: {
    value: 'Richard Ayoade',
    writable: false,
  },
});

console.log(book.title);  //=> 'Ayoade on Ayoade: A Cinematic Odyssey'
console.log(book.author);  //=> 'Richard Ayoade'

Here, Object.defineProperties() defines title and author on book. The title property can be reassigned because its descriptor sets writable: true; author cannot. For these new properties, the omitted enumerable and configurable attributes default to false, so neither appears in Object.keys(book) and neither can be deleted or freely reconfigured.

Connection to defineProperty()

Whilst defineProperty() allows us to define a single property at a time, defineProperties() behaves in exactly the same way, but enables the definition of multiple properties at once.

The property descriptors used in both methods are the same, including attributes like value, writable, enumerable, configurable, get, and set. I go into greater detail about these in my previous article. Do take a read: if you're not familiar with getters and setters in particular, you're in for a bit of a surprise.

When to Use defineProperties()

• Batch Property Definitions

  : When multiple properties need to be defined or modified with different characteristics.

• Object Initialisation

  : Useful in initialising objects with several properties, providing a clear, concise way to configure them all at once.

• Maintainability

  : When dealing with complex objects, defining all properties in a single location can make your code more readable and easier to maintain.

Considerations and Best Practices

• Performance: A single call groups the property definitions clearly. If speed matters here, measure the actual workload rather than assuming it is faster than separate calls to Object.defineProperty().
• Property limits: A non‑writable property cannot be reassigned, but that does not freeze the whole object or any nested object it references. A non‑enumerable property is still accessible by name; these descriptors do not provide the privacy of a private field.

• Complex Objects

  : These methods offer significant advantages in complex applications, especially those requiring detailed control over object properties.

The Wrap‑up

defineProperties() extends the functionality of defineProperty(), allowing for more efficient and organised property definitions on JavaScript objects. Its ability to handle multiple property definitions in a single call makes it a powerful tool, especially when you need detailed property control.