DEV Community

Cover image for Javascript Object literal conditional properties

Javascript Object literal conditional properties

Toncho Dev
Articles and awesome content for Javascript programmers at
Originally published at ・1 min read

Original post at

We constantly coming up against adding conditional properties to an Object, but always end doing:

const a = {};
if (someCondition) {
  a.b = 5;

To deal with this in an elegant way we are going to use the spread operator and short-circuit evaluation, with the enhancements ES6 has brought to the Object.

const a = {
  ...someCondition && { b: 1 },

In JavaScript, expressions using the && and || operators get checked for possible short-circuit evaluation, && operator will only evaluate to true if both conditions are truthy. If the first one if falsey, then the second condition won’t even get evaluated. the || operator will only evaluate to false if both condition are falsey. If the first condition is truthy, the second won’t get evaluated. Additionally, the && and || operators actually return the value of the last expression that gets evaluated in the statement.

Now if someCondition is truthy will return { b: 1 } and false if someCondition is falsey, the returned value then gets spread into the object, so if the expression returns falsey will not be spread at all, and no new keys are added to the object.

Discussion (0)