Conditional Branching in JavaScript: `if`, `else`, and `?`

In this blog, we’ll delve into the world of conditional branching in JavaScript. We’ll explore the if statement, the else clause, the else if construct, and the conditional (ternary) operator ?. By the end of this blog, you’ll have a solid understandin…


This content originally appeared on DEV Community and was authored by codenextgen

In this blog, we'll delve into the world of conditional branching in JavaScript. We'll explore the if statement, the else clause, the else if construct, and the conditional (ternary) operator ?. By the end of this blog, you'll have a solid understanding of how to control the flow of your JavaScript programs.

The if Statement

The if statement is used to execute a block of code if a specified condition is true.

Syntax:

if (condition) {
  // code to execute if condition is true
}

Example:

let age = 18;

if (age >= 18) {
  console.log("You are an adult.");
}

Boolean Conversion

In JavaScript, any value can be converted to a boolean. The following values are considered false:

  • false
  • 0
  • "" (empty string)
  • null
  • undefined
  • NaN

All other values are considered true.

Example:

let value = 0;

if (value) {
  console.log("Value is true.");
} else {
  console.log("Value is false.");
}
// Output: Value is false.

The else Clause

The else clause is used to execute a block of code if the condition in the if statement is false.

Syntax:

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

Example:

let age = 15;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

Several Conditions: else if

The else if construct allows you to check multiple conditions.

Syntax:

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 = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else {
  console.log("Grade: D");
}

Conditional Operator ?

The conditional (ternary) operator ? is a shorthand for the if-else statement.

Syntax:

condition ? exprIfTrue : exprIfFalse;

Example:

let age = 20;
let message = age >= 18 ? "You are an adult." : "You are a minor.";
console.log(message);

Multiple ?

You can chain multiple conditional operators to handle more complex conditions.

Example:

let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";
console.log("Grade:", grade);

Non-Traditional Use of ?

The conditional operator can also be used in non-traditional ways, such as assigning default values.

Example:

let userInput = "";
let result = userInput ? userInput : "Default Value";
console.log(result); // Output: Default Value

Practical Example

Let's put everything together with a practical example:

let temperature = 25;

if (temperature > 30) {
  console.log("It's hot outside!");
} else if (temperature > 20) {
  console.log("It's warm outside.");
} else if (temperature > 10) {
  console.log("It's cool outside.");
} else {
  console.log("It's cold outside.");
}

let weather = temperature > 30 ? "hot" : temperature > 20 ? "warm" : temperature > 10 ? "cool" : "cold";
console.log("The weather is:", weather);

Conclusion

Conditional branching is a fundamental concept in JavaScript that allows you to control the flow of your programs based on various conditions. By mastering the if, else, else if, and conditional operator ?, you'll be able to write more dynamic and responsive code. Keep practicing and exploring to deepen your understanding of conditional branching in JavaScript.

Stay tuned for more in-depth blogs on JavaScript! Happy coding!


This content originally appeared on DEV Community and was authored by codenextgen


Print Share Comment Cite Upload Translate Updates
APA

codenextgen | Sciencx (2024-09-18T19:40:31+00:00) Conditional Branching in JavaScript: `if`, `else`, and `?`. Retrieved from https://www.scien.cx/2024/09/18/conditional-branching-in-javascript-if-else-and/

MLA
" » Conditional Branching in JavaScript: `if`, `else`, and `?`." codenextgen | Sciencx - Wednesday September 18, 2024, https://www.scien.cx/2024/09/18/conditional-branching-in-javascript-if-else-and/
HARVARD
codenextgen | Sciencx Wednesday September 18, 2024 » Conditional Branching in JavaScript: `if`, `else`, and `?`., viewed ,<https://www.scien.cx/2024/09/18/conditional-branching-in-javascript-if-else-and/>
VANCOUVER
codenextgen | Sciencx - » Conditional Branching in JavaScript: `if`, `else`, and `?`. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/18/conditional-branching-in-javascript-if-else-and/
CHICAGO
" » Conditional Branching in JavaScript: `if`, `else`, and `?`." codenextgen | Sciencx - Accessed . https://www.scien.cx/2024/09/18/conditional-branching-in-javascript-if-else-and/
IEEE
" » Conditional Branching in JavaScript: `if`, `else`, and `?`." codenextgen | Sciencx [Online]. Available: https://www.scien.cx/2024/09/18/conditional-branching-in-javascript-if-else-and/. [Accessed: ]
rf:citation
» Conditional Branching in JavaScript: `if`, `else`, and `?` | codenextgen | Sciencx | https://www.scien.cx/2024/09/18/conditional-branching-in-javascript-if-else-and/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.