Skip to content 
Making your code able to handle different circumstances is the essence of the JavaScript conditional statements.
JavaScript conditional statements are the engines of logic in your application that allow you to tell your code what to do depending on the state of your data. Variables are used to hold data, operators to process data, but conditional statements to determine what happens next, given the current state of your data.
Consider any choice you ever made in your own life. If it rains, you bring an umbrella. If you’re hungry, you eat. If you have enough money, you buy something. This is exactly how conditional statements operate in your code. They look at some condition, and based on whether the condition is true or false, they follow a different path.
Without conditional statements, your code would perform the exact same operation every time it ran, much like a recipe with no variation. With conditional statements, your applications become interactive, intelligent and valuable. Let’s explore five essential patterns to use JavaScript conditional statements that you’ll frequently reach for in just about every development project.
1. The Basic if Statement: Your Simplest Decision Maker
The if statement is the base of all conditional logic. An if statement looks at a condition, and if the condition evaluates to true, it follows the code within its block. If the condition is false, it skips over that code completely and continues executing.
The if statement is quite easy to use. You simply add if, followed by a pair of parentheses enclosing the condition you wish to examine, and finally a pair of curly braces surrounding the code that should run if the condition is true. The condition can be any expression that produces a boolean result, a comparison, a variable holding a boolean, or even a value that JavaScript can coerce into a boolean.
An if statement is the best way to represent simple, one directional decisions. If a user is logged in, show their profile image. If a form field is empty, show an error message. If a user’s score exceeds a particular threshold, trigger a celebratory animation. In each of these cases, the if statement is the ideal solution for representing these kinds of decision processes.
Important Note: JavaScript attempts to coerce any value provided in a condition into a boolean. This is known as type coercion. Boolean values such as 0, “”, null, undefined, and NaN are coerced into false, while everything else is coerced into true. Type coercion is extremely useful; however, if you are not aware of it, it can easily introduce errors into your code.
2. The if…else Statement: Two Ways, One Choice
There are times when you need to act upon both the true and false cases of a condition. That is when if…else becomes relevant. It provides you with two paths, one for when the condition is true, and another for when it is false.
You can think of if…else as the classic fork in the road. If a user is authenticated, show the user their dashboard. Show the user the login screen otherwise. If a number is positive, display the number in green. Display the number in red otherwise. If an item is in stock, show an “Add to Cart” button. Show “Out of Stock” otherwise.
While the structure is simple (an if block, followed by an else block), you can only execute one of these blocks, never both. Decisions involving two distinct outcomes occur with great frequency in software development, and mastering the use of if…else will carry you surprisingly far in your coding endeavors.
Important to remember: Do not over complicate your if…else chain. If you find yourself creating a series of nested if…else statements, you likely have a cleaner method available. Deeply nested if…else structures produce code that is difficult to understand and debug. Consider using else if or switch statements for handling multiple conditions.
3. The else if Chain: Multiple Choices, One Winner
Decisions in the real world rarely involve only two possible outcomes. A student can receive either an A, B, C, D, or F grade. A traffic signal can have three colors: red, yellow, and green. A user’s role may be either admin, editor, contributor, or subscriber. When you encounter a situation with many branches, you use an else if chain.
An else if chain allows you to link multiple conditions together. JavaScript examines each condition sequentially, from top to bottom. As soon as a condition is true, the code associated with that condition is executed, and the rest of the chain is skipped. If none of the conditions are true, an optional final else clause is executed as a default.
An else if chain is well suited for situations where the conditions are mutually exclusive, only one can be true at a time. Else if chains are also suitable when the conditions rely on the same value, e.g., checking a score against multiple thresholds.
A frequent error is forgetting that the order of conditions is significant. If you place a broad condition before a specific condition, the specific condition may never be reached. Therefore, always check the most specific conditions first and work your way to more generic cases.
4. The switch Statement: Clean Multi Choice Branching
In situations where you are comparing a value to many possible discrete values, a switch statement may be cleaner than a long else if chain. Rather than writing if (color == ‘red’) { … }, else if (color == ‘blue’) { … }, else if (color == ‘green’) { … }, you would write a switch statement that examines the value once and jumps to the corresponding case label.
The switch statement has a different syntax than the other conditionals. After writing switch, you provide an expression to evaluate, followed by a series of case labels with potential values. Once a match is identified, JavaScript executes the code from that location until it encounters a break statement. If you omit the break statement, JavaScript “falls through” to the next case, which is occasionally intended but most often introduces a bug.
The switch statement is well suited to applications that deal with many discrete values, including command-line parsing, different types of input parsing, and responding to various user interactions. While it is less intuitive than if/else statements, it produces cleaner-looking code and typically operates faster than long if/else chains.
However, the switch statement is not without its limitations. You can only compare values strictly using equals (===) in a switch statement. You cannot use it to test ranges or complex conditions. Therefore, stick to if/else statements for those purposes. Also, a frequent source of bugs with switch statements is missing break statements, so be thoughtful in your use of fall through behavior.
5. The Ternary Operator: Conditionals in One Line
The ternary operator is technically an operator that returns a value rather than a statement. However, it is so closely tied to conditional logic that it fits naturally in any discussion of conditionals. It is a compact means of writing simple if/else decision making when you require to assign a value based on a condition.
The syntax of the ternary operator is condition ? valueIfTrue : valueIfFalse. If the condition is true, the operator returns the first value. If the condition is false, it returns the second value. The ternary operator is useful for making concise assignments that are dependent on a condition, as well as when you require to create a variable with a name that describes the assignment based on a condition.
For instance, instead of using multiple lines of code with if/else to assign a status message based on a condition, you could write let message = score > 60 ? ‘Pass’: ‘Try Again’. It is concise, easy to read and conveys your intention clearly.
Key to the success of the ternary operator is moderation. The ternary operator is perfectly suited for simple, binary choices. However, if your conditions become too complex or you need to branch in multiple ways, the ternary operator will quickly become difficult to read. If you find yourself nesting ternary operators, that indicates you should revert back to regular if/else.
Terse does not necessarily equate to good code, clarity is more important.
Bringing it all Together
With these five patterns for using JavaScript conditional statements (if, if…else, else if, switch, and the ternary operator), you now have full control over the flow of your JavaScript applications. These are the mechanisms to express business logic, to handle user input, to verify data, and to create reactive experiences in your applications.
Begin with simple if statements to check basic conditions. Add an else clause when you require to address both outcomes. Utilize else if ladders for multiple related conditions. Choose switch when you are comparing a value to numerous discrete values. And continue to utilize ternary operators to represent concise conditional assignments.
The more you apply conditional statements, the more second nature these patterns will become. You will begin to see opportunities for conditional statements everywhere, and you will automatically select the appropriate tool for each opportunity.
Checklist for Essential JavaScript Conditional Statements
Below is a rapid reference to help you practice with JavaScript conditional statements.
- Utilize if for simple, one direction decisions. If you only care about the true outcome, keep it simple.
- Use if…else for binary choices. When you need to address both outcomes, this is the tool you want.
- Use else if ladders for multiple related conditions. First, evaluate the most specific conditions.
- Use switch for comparisons to discrete values. When evaluating the same value against multiple discrete values, switch statements are generally more readable and often perform slightly better than long if…else chains.
- Do not forget to include break statements in your switch statements. Unless you intend to enable fall-through behavior, break statements will assist in avoiding bugs.
- Use ternary operators for simple conditional assignments. They maintain code concise; however, avoid nesting them.
- Remember to consider type coercion. 0, “”, null, undefined, and NaN are coerced into false values. Every other value is coerced into a true value.
- Attempt to keep your conditions readable. If you need to examine a condition that includes complex logic, attempt to break down the condition into named variables that describe the logic.
For additional information on these topics, the MDN Conditional Statements Guide contains extensive documentation with examples. Additionally, JavaScript.info contains a section on conditionals that contain detailed, practical descriptions for new developers.
To master the use of JavaScript conditional statements is critical since conditional statements are how you incorporate logic into your applications. Without conditional statements, your code would be a straight line with no branches. With conditional statements, you can create applications that can react intelligently to different situations, user input, and states of data. Get proficient in these patterns and you will be building truly dynamic JavaScript in no time.
New to HTML? Start Here: HTML Tutorial for Beginners: Your Complete Introduction to HTML Basics
New to CSS? Start Here: CSS Introduction: Master 5 Core Concepts Easily
New to JavaScript? JavaScript Introduction: 5 Proven Steps to Learn JS
[INSERT_ELEMENTOR id=”122″]
