How to Define an Array with Conditional Elements in JavaScript?

Sometime we may need to define an array with elements that depend on certain conditions. Such situation may occur when we have to dynamically generate arrays based on runtime logic such as including or excluding elements based on specific criteria. In this article, we'll explore various ways to define arrays with conditional elements in JavaScript.

Following are the different approaches to defining an array with conditional elements in JavaScript:

Using the Ternary Operator

In this approach, we are using the ternary operator which has a compact syntax that evaluates a condition and returns one of two values depending on whether the condition is true or false. When defining an array we use the ternary operator to include or exclude elements based on a condition. If the condition is true, value1 is included in the array otherwise value2 is included.

Syntax:

let array = [condition ? value1 : value2];

Example: This example demonstrates using the ternary operator to include elements in an array based on a simple condition.

let isUserLoggedIn = true;
let userRoles = ["guest", isUserLoggedIn ? "user" : "visitor"];

console.log(userRoles);

[ 'guest', 'user' ]

Using Spread Operator with Conditional Logic

In this approach we are using the spread operator (...). It expands an iterable (like an array) into individual elements. By combining it with conditional logic, we can spread elements into an array only when the condition is met.

Syntax:

let array = [value1, ...(condition ? [value2] : []), value3];

Example: This example demonstrates using the spread operator to build an array conditionally.

let isAdmin = true;
let features = [
    "basic",
    ...isAdmin ? ["admin-panel"] : [],
    "User"
];

console.log(features);

[ 'basic', 'admin-panel', 'User' ]

Using filter() Method

For more complex conditions we can use the filter() method it can be used to include elements based on a function's return value. This is particularly useful when dealing with arrays of objects or more intricate logic.

Syntax:

let array = values.filter(conditionFunction);

Example: This example demonstrates how to use filter() to create a new array that only includes even numbers from the original array.

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers);

[ 2, 4, 6 ]