How to Conditionally Build An Object in Javascript With Es6

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.

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

Related Posts