Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to write an inline IF statement in JavaScript?
Conditional statements are the most important and basic concept of any programming language. The if-else statement allows us to execute any code block conditionally. We can define the condition for the if statement in braces, and if the condition becomes true, it executes the code of the if block; Otherwise, it executes the code of the else block.
Here, we have demonstrated how an if-else statement works in JavaScript.
if (condition) {
// code to execute when the condition becomes true
} else {
// code to execute when the condition becomes false
}
What if I say that you can write the above five lines of code into one line? Yes, you can do that using the inline if statement, also known as the ternary operator.
Syntax
Users can follow the syntax below to use the inline if statement in JavaScript.
condition ? expression1 : expression2
In the above syntax, a condition is an expression. When the condition expression evaluates true, it executes expression1; Otherwise, it executes expression2.
If we compare the inline if statement with the if-else statement, expression1 is the code of the if statement and expression2 is the code of the else statement.
Basic Example
In the example below, we will learn the basic use of the inline if statement. We have used the condition '10===10', and if the condition evaluates true, it will print that '10 is equal to 10'; Otherwise, it will print that '10 is not equal to 10'.
<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>
The value of the result variable: 10 is equal to 10.
Example with Function Calls
In the example below, we have created an array of numbers. Also, we have created the func1() and func2() functions, which print different messages with the value passed as a parameter.
We used the forEach() method to loop through the array. In the callback function of the forEach() method, we check that if the number is divisible by 10, 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>
The func1() is executed for the value 10 The func1() is executed for the value 30 The func2() is executed for the value 43 The func1() is executed for the value 50 The func2() is executed for the value 64 The func2() is executed for the value 76 The func2() is executed for the value 87
Complex Example: Leap Year Check
In the example below, we check whether the year is a leap year or not using both if-else statements and inline if statements. The checkYear() function uses the if-else statements to determine whether the year passed as a parameter is a leap year.
In the checkInlineYear() function, we have implemented the same logic as in the checkYear() function, but we have converted the if-else statements into chained inline if statements. You can see how we have condensed multiple lines into a single line.
<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 100 but not 400, it is not a leap year.
} else if (year % 100 == 0) {
return false;
// if the year is divisible by 4 but not 100, 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 2020 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 2020 is leap year: " + checkInlineYear(2020) + "<br>";
output.innerHTML += "The 3000 is leap year: " + checkInlineYear(3000) + "<br>";
</script>
</body>
</html>
Outputs using the checkYear() function: The 2020 is leap year: true The 3000 is leap year: false Outputs using the checkInlineYear() function: The 2020 is leap year: true The 3000 is leap year: false
Key Points
- The ternary operator (inline if) is perfect for simple conditional assignments
- It can be chained for multiple conditions, but readability may suffer
- Use it when the logic is simple; stick to if-else for complex conditions
- Both expressions in the ternary operator are evaluated based on the condition
Conclusion
The inline if statement (ternary operator) provides a concise way to write conditional logic in JavaScript. While it makes code more compact, use it judiciously to maintain code readability, especially when dealing with complex conditions.
8K+ Views
