Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
}
From the above code, users can learn the syntax of if-else statements.
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.
Syntax
Users can follow the syntax below to use the inline if statement in JavaScript.
Condition? code - block - 1 : code - block - 2
In the above syntax, a condition is an expression. When the condition expression evaluates true, it executes code block 1; Otherwise, it executes code block 2.
If we compare the inline if statement with the if-else statement, code-block-1 is a code of the if statement and code-block-2 is a code of the else statement.
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’.
In the output, users can observe that it prints ’10 is equal to 10’ as the condition always evaluates 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 have created the array of numbers. Also, we have created the func1() and func2() function, which prints the 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>
Example
In the example below, we check whether the year is a leap year or not using an if-else statement and an inline if statement. The checkYear() function uses the if-else statements to ensure 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 the inline if statement. Users can see how we have written the nine lines in a single 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 the inline if statement in JavaScript. We can observe that inline if statements make code clearer and more readable, and it is always good to write fewer lines of code with the same logic.
5K+ Views
