Javascript If Else Tutorial: Mastering Conditional Statements

Javascript’s if...else statement allows you to make decisions based on the evaluation of conditions, letting you execute different code depending on whether a condition is met or not. With if...else, you have more control over the flow of your code, making it more dynamic and suited to different scenarios.

In this tutorial, we’ll explore the if...else concept in-depth, including:

• Basic if statements
• Using else
• The else if ladder
• Comparison and logical operators
• Ternary operator (conditional operator)
• Best practices

By the end of this tutorial, you’ll be able to create robust conditional statements and write more efficient code. Let’s dive in!

Basic if Statements

An if statement checks if a condition is true, then executes a block of code. The syntax is as follows:

if (condition) {
  // Code to execute if the condition is true
}

When the condition is met, the code inside the curly braces ({}) will run. If the condition is false, the code is skipped.

Example:

let isLoggedIn = true;

if (isLoggedIn) {
  console.log("Welcome, user!");
}

In this example, if isLoggedIn is true, the message “Welcome, user!” will be displayed on the console.

Using else

The else keyword lets you execute code when the if condition is not met. It doesn’t require a condition, as it serves as the default choice.

Here’s the syntax:

if (condition) {
  // Code to execute if the condition is true
} else {
  // Code to execute if the condition is false
}

Example:

let isLoggedIn = false;

if (isLoggedIn) {
  console.log("Welcome, user!");
} else {
  console.log("Please log in.");
}

In this case, because isLoggedIn is false, the console will display “Please log in.”

The else if Ladder

When there are multiple conditions to evaluate, you can use else if. This creates a chain of conditions, called the else if ladder.

The syntax looks like this:

if (condition1) {
  // Code to execute if condition1 is true
} else if (condition2) {
  // Code to execute if condition2 is true
} else {
  // Code to execute if none of the conditions are true
}

Example:

let score = 75;

if (score >= 90) {
  console.log("You got an A!");
} else if (score >= 80) {
  console.log("You got a B!");
} else if (score >= 70) {
  console.log("You got a C!");
} else {
  console.log("You failed.");
}

In this example, based on the score, the appropriate message will be displayed on the console.

Comparison and Logical Operators

In if...else statements, conditions typically involve comparison or logical operators. These operators are used to compare values and determine the truthiness of an expression.

Comparison Operators

Operator	Description
==	Equal to
!=	Not equal to
===	Equal value and equal type
!==	Not equal value or not equal type
>	Greater than
<	Less than
>=	Greater than or equal to
<=	Less than or equal to

Logical Operators

Operator	Description
&&	AND
`		`	OR
!	NOT

Let’s explore both types of operators with examples:

Example (Comparison Operators):

let grade = "B";

if (grade === "A") {
  console.log("Excellent!");
} else if (grade === "B") {
  console.log("Well done!");
}

Example (Logical Operators):

let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("You're allowed to drive.");
} else {
  console.log("You're not allowed to drive.");
}

Ternary Operator (Conditional Operator)

The ternary operator (? :) provides a shorthand way of writing simple if...else statements. It takes three operands: a condition, the code to execute if the condition evaluates to true, and the code to execute if the condition is false.

The syntax is as follows:

condition ? expression_if_true : expression_if_false;

Example:

let isLoggedIn = true;

let message = isLoggedIn ? "Welcome, user!" : "Please log in.";
console.log(message);

This example is equivalent to the previous if...else example but uses the ternary operator for a more concise statement.

Best Practices

• Opt for the === and !== operators instead of == and !=. The former ensures both value and type equality, leading to fewer bugs and unintended behavior.
• Follow the DRY (Don’t Repeat Yourself) principle. If you find yourself using multiple if...else statements with the same condition, consider refactoring your code.
• Use the ternary operator for simple if...else statements to keep your code concise.

Conclusion

In this tutorial, we’ve covered the essential concepts of Javascript’s if...elsestatement, including basic usage, the else if ladder, comparison and logical operators, and the ternary operator. Now you can take full advantage of conditional statements to write more efficient and dynamic code.

Remember to keep practicing and experimenting with what you’ve learned in this tutorial, and soon, you’ll master the art of conditional statements in Javascript. Good luck!