Spread syntax, in JavaScript, lets you expand arrays, objects and even strings succinctly. It is one of the features in JavaScript that I miss the most when working in other programming languages.
In this article, I will show how you can expand any JavaScript literal conditionally.
Conditionally expand an object
Idiomatic syntax is
{ ...(condition && object) }
Explanation
Consider these two objects
const obj1 = { isDev: true };
const obj2 = { name: "Talha", user: "talha131" };
You can merge them together like so,
const objMerged = { ...obj1, ...obj2 };
Say I add a boolean variable expand. obj2 should be expanded only when expand is true.
let expand = true;
let objMerged = { ...obj1, ...(expand && obj2) };
objMerged value is
{
"isDev": true,
"name": "Talha",
"user": "talha131"
}
Try false.
expand = false;
objMerged = { ...obj1, ...(expand && obj2) };
objMerged value is
{
"isDev": true
}
Conditionally expand a string to an object
Idiomatic syntax is
[...(condition && string)];
Explanation
When you apply the spread operator on a string inside {}, it returns an object.
const str = "abc";
const eg = { ...str };
eg value is
{
0: "a",
1: "b",
2: "c"
}
Therefore, you can use the same syntax that you use for conditionally expanding an object.
expand = false;
let expandedStr = { ...(expand && str) };
Conditionally expand an array
Idiomatic syntax is
[...(condition ? array : [])];
Explanation
Consider these two arrays
const arr1 = [1, 3, 5];
const arr2 = [2, 4, 6];
You can merged these arrays like this,
const arrayMerged = [...arr1, ...arr2];
Say I add a boolean variable expand. arr2 should be expanded only when expand is true.
let expand = true;
const arrayMerged = [...arr1, ...(expand && arr2)];
Unfortunately, this will not work if condition, expand, is false. You will get the error.
error: TypeError: false is not iterable
The reason is in case of array and string, the ... operator requires an iterable. When the condition is false, the () expression is empty, in turn, the ... operator complains, "Where is my iterable?"
Therefore, the correct syntax is
const arrayMerged = [...arr1, ...(expand ? arr2 : [])];
The ternary operator provides an empty array for the failing case.
Conditionally expand a string to an array
Idiomatic syntax is
[...(condition ? string : [])];
Explanation
When you apply the spread operator on a string inside [], it returns an array.
const str = "abc";
const eg = [...str];
Value of eg is [ "a" , "b" , "c" ].
Therefore, just like an array, if you try to use logical and operator &&, you will get the error.
// incorrect
const eg = [...(false && "hello")];
The correct syntax is
expand = false;
let expandedStr = [...(expand ? str : [])];
Here expandedStr will evaluate to an empty array [].
Warp Up
You can see a working examples and run them at this link.
// Objects
const obj1 = { isDev: true };
const obj2 = { name: "Talha", user: "talha131" };
let expand = true;
let objMerged = { ...obj1, ...(expand && obj2) };
console.log("Expand Objects true");
console.log(objMerged);
expand = false;
objMerged = { ...obj1, ...(expand && obj2) };
console.log("Expand Objects false");
console.log(objMerged);
// Arrays
const arr1 = [1, 3, 5];
const arr2 = [2, 4, 6];
expand = true;
let arrayMerged = [...arr1, ...(expand ? arr2 : [])];
console.log("Expand Arrays true");
console.log(arrayMerged);
expand = false;
arrayMerged = [...arr1, ...(expand ? arr2 : [])];
console.log("Expand Arrays false");
console.log(arrayMerged);
// String to array
const str = "abc";
expand = true;
let expandedStr = [...(expand ? str : [])];
console.log("Expand string to array true");
console.log(expandedStr);
expand = false;
expandedStr = [...(expand ? str : [])];
console.log("Expand string to array false");
console.log(expandedStr);
// String to object
expand = true;
expandedStr = { ...(expand && str) };
console.log("Expand string to object true");
console.log(expandedStr);
expand = false;
expandedStr = { ...(expand && str) };
console.log("Expand string to object false");
console.log(expandedStr);
It's output is
Expand Objects true
{
isDev: true ,
name: "Talha" ,
user: "talha131"
}
Expand Objects false
{
isDev: true
}
Expand Arrays true
[ 1, 3, 5, 2, 4, 6 ]
Expand Arrays false
[ 1, 3, 5 ]
Expand string to array true
[ "a", "b", "c" ]
Expand string to array false
[ ]
Expand string to object true
{
0: "a" ,
1: "b" ,
2: "c"
}
Expand string to object false
{ }
Top comments (0)