Create an array with conditional elements

There are a few ways to initialize an array with conditional elements.

Using the `push` function

const arr = ['foo', 'bar'];
if (condition) {
    arr.push('fuzz');
}

We can use the short-circuits conditionals to make it shorter:

condition && arr.push('fuzz');

Using the `concat` function

const arr = ['foo', 'bar'].concat(condition ? 'fuzz' : []);

The `push` and `concat` functions only work if we want to insert the elements at the end of the array.

Filtering the falsy values

const arr = ['foo', condition ? 'fuzz' : undefined, 'bar'].filter(Boolean);

The array always inserts new item which can be the new element or `undefined` depending on whether or not the condition matches. At the end, the `undefined` items are removed from the array.

This approach allows us to insert element at any position, however we have to be careful with removing the falsy values from the array because the original array can contains the falsy items.

Tip: using the spread operator

By using the spread operator (`...`), we can create an array with a single expression as following:

const arr = ['foo', ...(condition ? ['fuzz'] : []), 'bar'];

The following code demonstrates a simple use case. It adds a product to the cart on an ecommerce website.

To do that, we have to check if the `products` property exists on the `cart` object first. If not, it will create an empty `products`. The conditional elements are the current `products`.

if (!cart['products']) {
    cart['products'] = [];
}
cart['products'].push(product);

// Better version
cart['products'] = [...(cart['products'] || []), product];

Do you want to see one more advanced example? The function below uses the spread and comma operator to group an array of objects by a key:

const groupBy = (arr, key) => arr.reduce((a, i) => ((a[i[key]] = [...(a[i[key]] || []), i]), a), {});

Create a polyfill

Create an autocomplete list with the datalist element