Published: December 06 2022

JavaScript - Initialize Array with Conditional Values or Objects in Vanilla JS

This is a super quick post to show how to initialize an array with conditional values in JavaScript (or TypeScript).

JavaScript Ternary and Spread Operators

The ternary operator is an inline if/else statement with the syntax condition ? if : else.

The spread operator (...) can be used to copy the contents of one array into another, if the array being copied is empty nothing is copied into the new array.

Using the ternary and spread operators together we can initialize a javascript array with conditional items like this:

const myArr = ['item-1', 'item-2', ...(myCondition ? ['conditional-item-3'] : [])];


When myCondition is true the array contains three items (['item-1', 'item-2', 'conditional-item-3']), otherwise it contains two items (['item-1', 'item-2']).


Real World Example in Angular

I used this technique recently in Angular for a dynamic form that supports adding or editing a user. Form validation rules are defined for each field in an array, the password field is required when adding a new user, and is optional when editing an existing user.

Here's the code snippet from the component with the conditional item in the password validators array:

this.form = this.formBuilder.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    username: ['', Validators.required],
    // password only required in add mode
    password: ['', [Validators.minLength(6), ...(!this.id ? [Validators.required] : [])]]
});


To see the complete code for the Angular add/edit component see Angular 14 - Dynamic Add/Edit Form that Supports Create and Update Mode.

 


Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.

Other than coding...

I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.


Need Some Vanilla JS Help?

Search fiverr to find help quickly from experienced Vanilla JS developers.



Supported by