When working with JavaScript, we often encounter many conditional statements, here are 5 ways to help you clean code that you learn. Let’s go! 
1. Use Array.includes with many conditional expressions
See an example:
1 2 3 4 5 6 | function test(fruit) { if (fruit === 'apple' || fruit === 'strawberry' ) { console.log('red'); } } |
At first glance, the example above looks good. But if you need to check lots of fruit then your code will be verbose with lots of || . Once there, you can use Array.includes under conditional expressions to check them.
1 2 3 4 5 6 7 8 | function test(fruit) { const redFruit = ['Apple', 'strawberry', 'cherry', 'cranberries']; if (redFruit.includes(fruit)) { console.log('red'); } } |
We have gathered redFruit into an array so we can use includes . This makes your code much cleaner, isn’t it. 
2. The content of the condition is less so it should be returned first
Expanding on the example above, we have 2 conditions
- If
fruitdoes not exist,quẳngit an error
- If
redFruitcontainsfruitand thequantitygreater than 10
Let’s see an example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function test(fruit, quantity) { const redFruit = ['Apple', 'strawberry', 'cherry', 'cranberries']; if (fruit) { if (redFruit.includes(fruit)) { console.log('red'); } if (quantity > 10) { console.log('big quantity'); } } else { throw new Error('No fruit'); } } test(null) // error: No Fruit test('apple') // print: red test('apple', 20) // print: red, big quantity |
A general rule that you should follow is that of what is invalid, we should handle them first and return if necessary. We can tidy up the above code by reversing the conditional statements. Try it
1 2 3 4 5 6 7 8 9 10 11 12 13 | function test(fruit, quantity) { const redFruit = ['Apple', 'strawberry', 'cherry', 'cranberries']; if (!fruit) throw new Error('No fruit'); if (!redFruit.includes(fruit)) return; console.log('red'); if (quantity > 10) { console.log('big quantity') } } |
This way your code will be more concise, and less nested in an if , and conditional reversal will help you think better.
3. Use default parameters for Function and Destructuring
For the example below, we always check for a null / underfined input underfined and assign it a default value when working in JavaScript.
1 2 3 4 5 6 7 8 9 10 | function test(fruit, quantity) { if (!fruit) return; const q = quantity || 1; console.log(`We have ${q} ${fruit}`); } test('banana') // We have 1 banana; test('apple', 2) // We have 2 apple; |
In fact they can ‘save’ a variable q by assigning a default value to the quantity parameter
1 2 3 4 5 6 7 8 9 | function test(fruit, quantity = 1) { if (!fruit) return; console.log(`We have ${q} ${fruit}`); } test('banana') // We have 1 banana; test('apple', 2) // We have 2 apple; |
So what if fruit is an Object , can we assign default values to them?
1 2 3 4 5 6 7 8 9 10 11 12 | function test(fruit) { if (fruit && fruit.name) { console.log(fruit.name); } else { console.log('unknown'); } } test(undefined); // unknown test({ }); // unknown test({ name: 'apple', color: 'red' }); // apple |
Looking at the example above, we will have to check the existence of fruit && fruit.name . But using destructuring and assigning default values for it will not have to check so
1 2 3 4 | function test({name} = {}) { console.log(name || 'unknown); } |
4. Use Array.every and Array.some for partial or partial conditional expressions
In this final tip, let’s get back to the Array method. For the following example, I want to check all fruit of the same color
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const fruits = [ { name: 'apple', color: 'red' }, { name: 'banana', color: 'yellow' }, { name: 'grape', color: 'purple' } ]; function test() { let isAllRed = true; for (let f of fruits) { if (!isAllRed) break; isAllRed = (f.color == 'red') } console.log(isAllRed) } |
Do you find the code is too long, we can reduce the number of lines of code using Array.every
1 2 3 4 5 6 7 8 9 10 11 12 | const fruits = [ { name: 'apple', color: 'red' }, { name: 'banana', color: 'yellow' }, { name: 'grape', color: 'purple' } ]; function test() { const isAllRed = fruits.every(f => f.color === 'red'); console.log(isAllRed) } |
Much cleaner . Similarly, we can also check for at least one red fruit with Array.some
1 2 3 4 5 6 7 8 9 10 11 | const fruits = [ { name: 'apple', color: 'red' }, { name: 'banana', color: 'yellow' }, { name: 'grape', color: 'purple' } ]; function test() { const isAnyRed = fruits.some(f => f.color === 'red'); console.log(isAnyRed); // true } |
Above are 4 ways you can clean your code more when using conditional statements in JavaScript. Thanks for watching. 
The article is available at: Tips JavaScript