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

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: