Conditionally Add Property to Object in JavaScript

Introduction

In the world of JavaScript, objects are king. They allow us to store, manipulate, and access data in a structured and efficient manner. But what if we want to add a property to an object based on certain conditions? This might seem like a simple task, and luckily, it is! But how can we do it in a more compact or modern way?

In this Byte, we'll explore how to conditionally add a property to an object in JavaScript using various methods, starting with the humble if statement and moving on to the more modern spread syntax.

Conditionally Add a Property to an Object

As you'll see in the following sections, JavaScript provides multiple ways to conditionally add properties to an object, each with its own strengths.

Using an if Statement

The simplest way to conditionally add a property to an object is by using an if statement. This is a simple approach that even beginners in JavaScript should be familiar with.

Let's say we have an object representing a book, and we want to add a publisher property, but only if the book is not self-published.

let book = {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    year: 1925,
    selfPublished: false
};

if (!book.selfPublished) {
    book.publisher = "Scribner";
}

console.log(book);

The object will now have the new property:

{
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    year: 1925,
    selfPublished: false,
    publisher: "Scribner"
}

As you can see, the publisher property was added to the book object since the book was not self-published.

Using the Spread Syntax

The spread syntax, introduced in ES6, provides a more concise way to conditionally add properties to an object. It's a bit more advanced, but once you get the hang of it, you'll find it incredibly useful.

Here's how we can accomplish the same task as above using the spread syntax:

let book = {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    year: 1925,
    selfPublished: false
};

book = {
    ...book,
    ...(book.selfPublished ? {} : { publisher: "Scribner" })
};

console.log(book);

This will output the same result as before:

{
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    year: 1925,
    selfPublished: false,
    publisher: "Scribner"
}

The spread syntax (...) is used to unpack elements from an object or array into a new object or array. In this case, we're using it to create a new object that contains all the properties of the original book object, plus the publisher property if the book is not self-published.

Using Object.assign()

The Object.assign() method is another way we can conditionally add a property to an object in JavaScript. This method works by copying all properties from one or more source objects to a target object. It then returns the target object.

We use the ternary operator to conditionally assign either the new property or null. If null is sent to .assign(), then no property is added.

let book = {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    year: 1925,
    selfPublished: false
};

Object.assign(book, !book.selfPublished ? { publisher: "Scribner" } : null)

console.log(book);

When you run this code, you should get:

{
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    year: 1925,
    selfPublished: false,
    publisher: "Scribner"
}

Again, the publisher property is now added.

Use Cases for Conditional Property Addition

You'll likely run into situations where you might want to conditionally add properties to an object in JavaScript, especially if you want to reduce lines of code and make it more compact.

For instance, you might be creating an object based on user input. Some fields might be optional, so you only want to add them to the object if the user has provided a value.

Another use case could be when working with APIs. Sometimes, you might want to add certain properties to your request object based on specific conditions, like filters. For example, if you're making a request to a search API, you might want to add a sort property, but only if the user has chosen to sort the results.

Here's how you might use conditional property addition in the context of user input:

let username = getUserInput('username', {required: true});
let email = getUserInput('email', {required: true});
let age = getUserInput('age', {required: false});

let user = {
    username: username,
    email: email,
    ...(age ? {} : { age: age })
};

await axios.post('/api/user', user);

In this code, the age property will only be added to the user object if the age variable has a truthy value.

Conclusion

In this Byte, we've explored how to conditionally add properties to an object in JavaScript using various methods, like the spread operator or Object.assign() method, and we've also discussed some use cases for this technique.

Conditional property addition can help you create more flexible and dynamic code, whether you're dealing with user input or working with APIs.