Create an array with conditional elements

Written byPhuoc Nguyen

Created

12 Mar, 2021

#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), {});

#See also

Include properties conditionally

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn