How to conditionally spread objects in Javascript

Introduction

In Javascript, If we want to spread an object into another one, we usually use the spread syntax operator (...) to do so. Like the following:

const user = {
    fname: 'John',
    lName: 'Doe'
};

const userDetails = {
    ...user
};

console.log(userDetails);
// Output
// { fname: 'John', lName: 'Doe' }

In this article, we gonna see how to conditionally spread object properties into another one using the spread operator. In other words, we need to populate the object properties only if a certain condition happened.

---

Conditionally spread objects

To do so, we can short-circuit the spread operator using the && operator.

Meaning, that if the condition is met, the spread operator will be executed and the properties of the object will be spread into the other one. Otherwise, it will be skipped.

Example

const isPremiumUser = true;

const user = {
    fname: 'John',
    lName: 'Doe'
};

const premiumUser = {
    ...(isPremiumUser && user)
};

console.log(premiumUser);
// Output: { fname: 'John', lName: 'Doe' }

In the example above, we’ve declared the user object with some properties and a boolean flag isPremiumUser = true. In line8, we’ve declared the premiumUser as an object, and the value of this object would be filled with the properties from the user object only if the following condition is true.

isPremiumUser && user

Would be evaluated to be true if:

• isPremiumUser = true
• The user object is of type object (not null/undefined)

---

That’s it for how to conditionally spread objects in Javascript and as always happy coding!

Photo from Unsplash.

---

Related posts