There comes a time when we want to add more fields/elements into an array or object when it satisfies a certain condition. This blog is an exploration of how and why.
Spreading into an Array
isWinter
is a boolean variable and you need to add winterEssentials
if it's true and nothing otherwise.
const essentials = ['phones', 'book', 'cap'];
const winterEssentials = ['sweater', 'thermals'];
const isWinter = true;
const tripEssentials = [
...essentials,
...(isWinter ? winterEssentials : [])
];
We need an empty array at end because we cannot spread undefined
or null
into an array (they are not iterables). Spreading an empty array into another just keeps the array intact.
const initialArray = ['a', 'b', 'c'];
const resultingArray = [...initialArray, ...[]];
console.log(initialArray, resultingArray); // Have the same elements.
Spreading into an Object
Rest spread into object is a Stage 4 ECMA proposal and is implemented in most browsers.
It mimics the behavior of existing Object.assign operator.
const hacker = {
hoodie: true,
}
const isHacker = true;
const person = {
firstName: '',
lastName: '',
...(isHacker && hacker)
};
console.log(person);
You will notice here that resorting to a conditional operator isn't necessary. This is because rest spread for objects tries to wrap any primitive it finds to an object.
console.log(null); // {}
console.log(undefined); // {}
console.log(0); // {}
console.log('abc') // {0: "a", 1: "b", 2: "c"}, well an array is also an object
Guide to Type Coercion in JavaScript
So the expression (isHacker && hacker)
returns undefined
which our spread operator converts to {}
and spreading an empty array into an object results in nothing.
That's conditional spread.
Top comments (0)