Conditionally add a new property to JS objects

Introduction

Recently, I published an article about How to spread objects in Javascript conditionally.

This article won’t have much difference from the previous one, it rather demonstrates how to apply the operation on the opposite side, So we’ll learn how we can add/inject a property into a javascript object conditionally.


Conditionally add a property to objects in JS

Consider we have two simple JS objects, both represents a person’s details, one is an employee, and the other is an investor, and we wanted to manipulate/add properties to each object during the time.

let employee = {
    name: 'John Doe',
    age: 21,
    iEmployee: true,
    isInvestor: false
};

let investor = {
    name: 'Andy Smith',
    age: 22,
    iEmployee: false,
    isInvestor: true
};

As shown above, the employee object has two properties (iEmployee, isInvestor ) which indicates that he’s an only employee and not an investor.

The vice-versa in the investor object, we’ve two properties (iEmployee, isInvestor ), which indicates that he’s an only investor, not an employee.

Now, let’s assume we’re going to pass over the persona’s objects, and manipulate them based on the object properties that they hold. For this purpose, we will add the following function, which does a check on each object’s properties, and based on them (iEmployee, isInvestor ), It adds new properties to each object.

function manipulatePersona(obj) {
    return {
        ...obj,
        ...(obj.iEmployee && {hasSalary: true}),
        ...(obj.isInvestor && {hasEquity: true})
    }
}

The logic in the above function does the following:

  • It does return a new object return {}
  • Spread the original object values ...obj
  • Check if the object has iEmployee property, if yes, it adds a new object of a single property {hasSalary: true}, and spread ... that into the returned object.
  • Same as in the previous point, It does check if the object has isInvestor property, if yes, it adds a new object of a single property {hasEquity: true}, and spread ... that into the returned object.

Now, let’s try putting it all together and see the output:

let employee = {
    name: 'John Doe',
    age: 21,
    iEmployee: true,
    isInvestor: false
};

let investor = {
    name: 'Andy Smith',
    age: 22,
    iEmployee: false,
    isInvestor: true
};

function manipulatePersona(obj) {
    return {
        ...obj,
        ...(obj.iEmployee && {hasSalary: true}),
        ...(obj.isInvestor && {hasEquity: true})
    }
}

console.log(manipulatePersona(employee));
// Output:
// { name: 'John Doe', age: 21, iEmployee: true, isInvestor: false, hasSalary: true }

console.log(manipulatePersona(investor));
// Output:
// { name: 'Andy Smith', age: 22, iEmployee: false, isInvestor: true, hasEquity: true }

That’s Awesome!

Trying with a third person, that he’s an employee and an investor, it would result in the following:

let employeeAndInvestor = {
    name: 'Andy Smith',
    age: 22,
    iEmployee: true,
    isInvestor: true
};

console.log(manipulatePersona(employeeAndInvestor));
// Output:
// { name: 'Andy Smith', age: 22, iEmployee: true, isInvestor: true, hasSalary: true, hasEquity: true }

That’s it for How to Conditionally add a new property to JS objects.

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: