search

Home  >  Article  >  Web Front-end  >  How to write an inline IF statement in JavaScript?

How to write an inline IF statement in JavaScript?

WBOY
WBOYforward
2023-09-07 08:01:051202browse

如何在 JavaScript 中编写内联 IF 语句？

Conditional statements are the most important and basic concepts in any programming language. The if-else statement allows us to conditionally execute any block of code. We can define the condition of the if statement in curly brackets. If the condition is true, the code of the if block is executed; otherwise, it executes the code of the else block.

Here, we demonstrate how if-else statements work in JavaScript. 

if (condition) {
   
   // code to execute when the condition becomes true
} else {
   
   // code to execute when the condition becomes false
}

From the above code, users can understand the syntax of if-else statements.

What if I said you could write the above five lines of code into one line? Yes, you can do this using an inline if statement.

grammar

Users can use inline if statements in JavaScript according to the following syntax. 

Condition? code - block - 1 : code - block - 2

In the above syntax, the condition is an expression. When the conditional expression is true, code block 1 is executed; otherwise, it executes code block 2.

If we compare the inline if statement with the if-else statement, then code-block-1 is the code of the if statement and code-block-2 is the code of the else statement.

Example

In the following example, we will learn the basic usage of inline if statements. We have used the condition "10===10", if the condition is true, it will print "10 is not equal to 10"; otherwise, it will print "10 is not equal to 10".

In the output, the user can observe that it prints "10 is equal to 10" since the condition always evaluates to true. 

<html>
<body>
   <h2>Using the <i> inline if statement </i> in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let result = 10 === 10 ? "10 is equal to 10." : "10 is not equal to 10.";
      output.innerHTML += "The value of the result variable: " + result;
   </script>
</body>
</html>

Example

In the example below, we create an array of numbers. Additionally, we have created func1() and func2() functions that print different messages using the values ​​passed as parameters.

We use the forEach() method to loop through the array. In the callback function of the forEach() method, we check whether the number is divisible by 10, then call the func1() function; otherwise, call the func2() function. 

<html>
<body>
   <h2>Using the <i> inline if statement </i> in JavaScript</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function func1(value) { 
         output.innerHTML += "The func1() is executed for the value " + value + "<br>";
      }
      function func2(value) {
         output.innerHTML += "The func2() is executed for the value " + value + "<br>";
      }
      let numbers = [10, 30, 43, 50, 64, 76, 87];
      numbers.forEach((num) => {
         num % 10 == 0 ? func1(num) : func2(num);
      })
   </script>
</body>
</html>

Example

In the following example, we use if-else statement and inline if statement to check if the year is a leap year. The checkYear() function uses an if-else statement to ensure whether the year passed as an argument is a leap year.

In the checkInlineYear() function, we implement the same logic as in the checkYear() function, but we convert the if-else statement into an inline if statement. The user can see how we wrote nine lines in one line.

Users can observe that both functions give the same output for any year value. 

<html>
<body>
   <h3>Using inline if statement to check whether year is leap year in JavaScript</h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function checkYear(year) {
         
         // if the year is divisible by 400, it is a leap year.
         if (year % 400 == 0) {
            return true;
            
            // if the year is divisible by 400 and by 100, it is not a leap year.
         } else if (year % 100 == 0) {
            return false;
            
            // if the year is divisible by 400, not divisible by 100, and divisible by 4, it is a leap year.
         } else if (year % 4 == 0) {
            return true;
         } else {
            return false;
         }
      }
      function checkInlineYear(year) {
         return year % 400 == 0 ? true : year % 100 == 0 ? false : year % 4 == 0 ? true : false;
      }
      output.innerHTML += "Outputs using the checkYear() function. <br> ";
      output.innerHTML += "The 2023 is leap year :- " + checkYear(2020) + "<br>";
      output.innerHTML += "The 3000 is leap year :- " + checkYear(3000) + "<br>";
      output.innerHTML += "<br>";
      output.innerHTML += "Outputs using the checkInlineYear() function. <br> ";
      output.innerHTML += "The 2023 is leap year :- " + checkInlineYear(2020) + "<br>";
      output.innerHTML += "The 3000 is leap year :- " + checkInlineYear(3000) + "<br>";
   </script>
</body>
</html>

Users learned to use inline if statements in JavaScript. We can observe that inline if statements make the code cleaner and more readable and it is always good to write less lines of code with the same logic.

The above is the detailed content of How to write an inline IF statement in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Explain the different readiness states of requests in AJAXNext article：Explain the different readiness states of requests in AJAX

Related articles

See more