menu

JavaScript/Typescript - 16 Topics

DEEP DIVE INTO

JavaScript/Typescript

Topic:the ternary operator (conditional operator)

menu

JavaScript also features a conditional operator (triple operator), and this is another simple approach of representing conditionality in it; through which you can evaluate the expression as well return an output based on true or false usually when expressed within simple If-else statements, if perhaps there’s need to set a value into variable dependent upon some conditions what he generally happens instead.

Let me take you in detailed description of the conditional operator:

Basic Syntax of conditional operator:

javascriptcondition ? expressionIfTrue : expressionIfFalse
  • condition: An expression that evaluates to either true or false.

  • expressionIfTrue: The value to be returned if the condition is true.

  • expressionIfFalse: The value to be returned if the condition is false.

Example:

javascriptconst age = 20;
const isAdult = age >= 18 ? 'Yes' : 'No';

In this example, isAdult will be assigned the value 'Yes' because the condition age >= 18 is true.

Multiple Conditional Operators:

You can chain multiple conditional operators to create more complex expressions. They are evaluated from left to right.

Example:

javascriptconst isWeekend = true;
const weather = 'sunny';
const activity = isWeekend ? (weather === 'sunny' ? 'Go to the beach' : 'Stay home') : 'Go to work';

In this example, activity will be 'Go to the beach' because both conditions isWeekend and weather === 'sunny' are true.

Use of conditional operator:

The use of conditional operators is very useful when we check simple conditions. Especially when you want to assign a value to any variable based on some condition. 

Let me give you some examples.

1. Conditional Variable Assignment:

javascriptconst temperature = 25;
const weatherMessage = temperature > 30 ? 'It\'s hot' : 'It\'s not too hot';

2. Inline Conditional Rendering in JSX (React):

htmlconst isLoggedIn = true;
return (
  <div>
    {isLoggedIn ? <p>Welcome, User</p> : <p>Please log in</p>}
  </div>
);

3. String Concatenation Based on Condition:

javascriptconst isSunny = true;
const weatherMessage = 'The weather is ' + (isSunny ? 'sunny' : 'cloudy') + '.';

Advantages of conditional operator:

  • Conditional operator is concise and often more readable for simple conditions.

  • The conditional operator is an expression, which means it can be used in assignments and expressions, including function calls.

Disadvantages of conditional operator:

  • Overusing the conditional operator can reduce code readability for complex conditions. In such cases, traditional if-else statements may be more appropriate.

  • It's not suitable for executing different blocks of code; it's primarily for value assignment.

To summarize, conditional operators are a nice way to express simple conditions and assign values ​​based on whether the condition is true or false. This is a useful tool for writing concise and highly transparent code, especially in cases where you want to assign conditions to values ​​for variables.

1280 x 720 px