Different Ways of Writing Conditional Statements in JavaScript
A conditional statement let you run a block of code based on a specific condition.
The JavaScript language provides various ways of using conditional statements. Many of them are common to other programming languages too. But you should be aware of their individual benefits and how they work in JavaScript.
1. if-else and else-if Statements
Anif-elsestatement executes one block if its condition is truthy and the other block if it is falsy. An else-if executes the block that matches one of several conditions, or a default block if no conditions match.
A truthy value is a value that JavaScript considerstruewhen it encounters it ina boolean context. A falsy value is a value that JavaScript considersfalsewhen it encounters it in a boolean context.
JavaScript considers all values truthy unless they are one of a small number that are falsy. The falsy values arefalse,0,-0,0n,"",null,undefined, andNaN.
Here’s the syntax for anif-elsestatement:
In some cases, you might want to check several, related conditions. In those scenarios, you can use anelse-ifto evaluate the extra conditions.
For example:
Usingelse-ifstatements, you can evaluate as many conditions as you want. However, this method quickly becomes unsightly and hard to maintain as the number of conditions increases.
JavaScript provides a cleaner way to evaluate multiple conditions called theswitchstatement.
2. The Switch Statement
Theswitchstatement evaluates an expression once and tries to match it against one or more possible values. You can provide each potentially matching value after acasekeyword.
When the switch statement finds a match, it runs all the statements after it, until it encounters abreakstatement.
Here’s the syntax for the switch statement:
Thebreakstatements are an essential part of theswitchblock because they specify where the code should stop executing. If you miss out a break statement, the code execution will continue and execute all the other code blocks after the first match. This is rarely what you’ll want to happen.
3. The Ternary Operator
JavaScript also lets you abbreviate conditional statements using the ternary operator.
The ternary operator takes three operands:
The statement above effectively means “If ‘condition’ is truthy, log the first message, otherwise log the second message”.
4. Short Circuiting
Short-circuiting is a technique that involves the use ofthe logical operatorsOR(||) andAND(&&) to evaluate an expression from left to right.
An operation involving the OR operator will short-circuit by returning the first truthy value it encounters. If all the values in the expression are falsy, it short-circuits and returns the last falsy value.
An operation using the AND operator will short-circuit by returning the first falsy statement it encounters. If all the statements in the expression are truthy, it short-circuits and returns the last truthy value.
Here is an example of writing a conditional statement with the OR operator.
This short-circuiting approach to writing conditional statements is popular in Express applications. It reads, “if thePORTenvironment variable exists, use it; otherwise, use port 3000”.
Here is an example of writing a conditional statement with the AND operator.
The code block above means “iffoois defined, call the console.log() function”.
This technique is the shortest way to write a conditional, but it can make code harder to read. You should avoid overusing it, particularly when you’re working as part of a larger team.
The Importance of Conditional Statements
Conditional statements are what allow your program to make decisions. Without them, your code will execute in a straight path from start to finish. They are also part of loops. Without them, loops would run infinitely, thus crashing your application.
Get a quick refresher on JavaScript elements with this cheat sheet.
Obsidian finally feels complete.
Your iPhone forgets what you copy, but this shortcut makes it remember everything.
One casual AI chat exposed how vulnerable I was.
So much time invested, and for what?
This small feature makes a massive difference.
