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.
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Twitter at https://twitter.com/jason_watmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
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.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some Vanilla JS Help?
Search fiverr to find help quickly from experienced Vanilla JS developers.