Conditionally Add Property to an Object in JavaScript

Conditionally add new properties inside object literal

The Software Line

·

Follow

3 min read

·

Mar 2, 2023

--

1

Listen

Share

Basically, this is a very common operation:
We need to add a new property to an object based on some boolean condition.

Typically, we will all do something like this:

const user = {
  name: 'John',
  surname: 'Doe'
};

const condition = true;
if (condition) {
   user['property'] = 'value'
}

But, here is the different idea where we want to add all the properties which depends on the condition inside the object literal (during the object creation).

In order to do this, you need the following items:

• Spread operator
• Ternary operator
• Boolean condition

Let’s consider the following example:

const hasToken = false;
const isAdmin = true;
const [name, surname] = ['John', 'Doe'];

const user = {
 name,
 surname,
 ...( hasToken ? { token: '...' } : {} ),
 ...( isAdmin ? { admin: true } : {} )
};

console.log(user);
// result: { name: 'John', surname: 'Doe', admin: true }

As you can see, we have two conditions (hasToken and isAdmin) and we
are using the conditions inside the object literal to check if we need to
add specific properties to the user object (“token” and “admin” in this case).
Otherwise, we just spread the empty object (user object will remains the same).

Also, we can call a specific function in order to check boolean condition:

const isAdmin = true;
const [name, surname] = ['John', 'Doe'];

function hasToken() {
 // some calculatiom logic here
 return false;
};

const user = {
 name,
 surname,
 ...( hasToken() ? { token: '...' } : {} ),
 ...( isAdmin ? { admin: true } : {} )
};

console.log(user);
// result: { name: 'John', surname: 'Doe', admin: true }

There is also another shorthand here we need to mention. Here, we have
a different approach where we have logical AND operator (without ternary operator and empty object for spread):

const isAdmin = true;
const [name, surname] = ['John', 'Doe']

const user = {
 name,
 surname,
 ...(isAdmin && { admin: true }) 
};

console.log(user);
// result: { name: 'John', surname: 'Doe', admin: true }

As you can see, here we have only boolean condition, logical AND operator and object with specific property which should be added.

Conclusion
You have two options to conditionally add new properties inside object literal. First one requires spread operator, ternary operator and boolean condition. The second option is even shorter because we are not using ternary operator and empty object for spread, and we have only spread operator, boolean condition, logical AND operator and object for spread which contains the property which should be added.
When you want to keep all the conditions in one place, this method is very useful (you can pick the first or the second approach).

Thanks for reading.
I hope you enjoyed the article.

If you like such stories and want to continue to read my stories, please consider becoming a medium member and my follower. It costs $5 per month and gives you unlimited access to Medium content.

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Interested in scaling your software startup? Check out Circuit.