Mastering JavaScript: A World Beyond If-Else Statements

ยท

3 min read

You might have come across an if-else statement in decision-making

Consider this example,

const age = 18; // the age

if (age >= 18) {
  console.log("You are an adult"); // it will print out you are an adult
} else {
  console.log("You are a child"); // it will print out you are a child
}

However, if you look at it, it might get a little bit more messy especially if you nest multiple if statements

const score = 75; // the student's score

if (score >= 70) {
  console.log("A");
} else if (score >= 60) {
  console.log("B");
} else if (score >= 50) {
  console.log("C");
} else if (score >= 40) {
  console.log("D");
} else {
  console.log("F");
}

To fix this, the ternary operator (?) makes the code relatively compact at the expense of readability

Today's programmers would opt to write the first program in this manner:

const age = 18;

const message = age >= 18 ? "You are an adult" : "You are a child";
console.log(message);

And the grading snippet like this:

const score = 75;
const grade =
  score >= 70 ? "A" :
  score >= 60 ? "B" :
  score >= 50 ? "C" :
  score >= 40 ? "D" : "F";

console.log(grade);

Keep note that using ternary in place of if-else statements can affect the maintainability of your code depending on the level of experience or knowledge
However, if you are a developer you need to learn how to use it

Situations where you can only use a ternary

Ternary operators (? :) are not a strict replacement for if-else statements, but they are more concise and are often used in situations where a simple conditional assignment or expression is needed. Here are some instances where ternary operators are commonly used:

  1. Simple Conditional Assignments: When you need to assign a value to a variable based on a condition, ternary operators provide a more compact syntax. For example:

     const result = condition ? trueValue : falseValue;
    
  2. Inline Conditions: In situations where you want to include a conditional expression directly within a larger expression or template string, ternary operators are convenient. For example:

     const message = `You are ${age >= 18 ? 'an adult' : 'a child'}`;
    
  3. Chaining Conditions: Ternary operators can be nested to handle multiple conditions in a concise manner:

     const grade =
       score >= 90 ? 'A' :
       score >= 80 ? 'B' :
       score >= 70 ? 'C' :
       'F';
    

Despite these use cases, if-else statements are often preferred when dealing with more complex branching logic or when readability and maintainability are a concern. if-else statements are more suitable when you need to execute multiple statements or when the code logic becomes intricate.

In summary, ternary operators are preferred for simple, single-expression conditions and assignments, while if-else statements are better suited for more complex branching logic. The choice between them depends on the specific requirements of your code and the emphasis on readability and maintainability.

ย