by admin admin Date: 09-08-2019 javascript coding ES6

The arrival of ES6 brought us, among many other news, the spread syntax, which, as you will already know, allows us to save a few lines of code and improve legibility.

Specifically, this syntax allows us to destructure the parameters that we pass to a function so that our code goes from:

function foo(data) { const id = data.id const title = data.name // more... }

to

function foo({id, title}) { //more }

But also thanks to the operator spread ... , we can expand (unwrap) objects in order to perform operations such as:

const obj1 = {a: 1, b: 2}; const obj2 = {...obj1, c: 3}; // obj2 = {a: 1, b: 2, c: 3};

However, another implementations of this syntax is to create objects with certain properties dependent on a condition, which is what I wanted to talk about in this article.

For example, if we have the following code:

const obj1 = {a: 1, b: 2}; if (condition) { ob1.c = 3; } if (otherCondition) { obj.d = 4; }const obj1 = {a: 1, b: 2}; if (condition) { ob1.c = 3; } if (otherCondition) { obj.d = 4; }

By using the spread syntax we can transform it into the following, much more readable:

const obj1 = { a: 1, b: 2, ...(condition ? {c:3} : {}), ...(otherCondition ? {c:4} : {}) };

This is possible because the operator only acts if the condition is true. Remember that if you are going to use this way of creating objects, 0 evaluates to false so you should perform a strict check.

As you can see, using this operator allows us to improve our code a lot and get rid of those annoying ifs we had to add if we wanted to achieve something similar.