Adding properties to javascript object literal conditionally

Let's say we have a javascript object as follows:

Now to Object 'obj' we would like to add a property or key, usually this is how we add a property to Object literal in javascript:

Now let's say we have to add a property only if the value actually is available and it is not undefined or null. This is a very common scenario when we are storing a JSON response after an API call but not always the response has a correct format or the keys have either null or undefined as values.

So how do we deal with such case?

well, one way is to do it manually for each key and put it in an if condition and if the condition is true then only store the value in our desired object. which would look something like this:

As we can see this gets quite hefty and verbose.

Another Approach could be to use JQuery's extend method like so:

This approach works because in JQuery's extend method Undefined properties are not copied.

However the above approach works but there is even better way to get the same result. we can take advantage of short circuit evaluation and ES6's spread opertator.

The same above code with short circuit evaluation and es6 spread operator would look like this:

So how it works?

In JavaScript, expressions using the && and || operators are checked for short-circuit evaluations:

• if both conditions are truthy only then && will evaluate to true. If the first one is falsey, then javascript will ignore second condition
• Similarly, if both conditions are falsey then || will only evaluate to false. If the first one is truthy, the second condition won’t get evaluated.

The && and || operators in javascript actually returns the value of the last expression that gets evaluated in the statement.

In the above example, response.propery1 && { propery1: response.propery1 } will return { propery1: response.propery1 } if response.propery1 is truthy, and will short-circuit to return false if response.propery1 is falsey.

The value returned then gets spread into the object. If the expression returns false then nothing gets spread, and no new property or keys are added to the object.