Updated March 31, 2023
Introduction to JavaScript if Statement
JavaScript supports multiple types of conditional statements to decide while running the code. if statement is one kind of a conditional statement that is used to specify the condition and execute the relevant code. The if statement allows the programmer to specify the block of code to be executed when a certain condition becomes true. The if condition can be used for the validation of data or checking the preconditions in code or upon any kind of decision-making statement. The if condition will only check for the condition specified and will exit if block in case of condition is not satisfied.
Syntax
if ( condition ) {
// statements to be executed
// if condition specified is valid or true
}Note the if is in lowercase letters.
Flowchart of JavaScript if Statement
How if Statement works in JavaScript?
In case of if statement in JavaScript, we specify the condition which will return normally Boolean value as true or false. It can be seen from the syntax and flowchart that the if statement is followed by a block of code which is called as if block. In case of the condition is true, the if block will be executed and in case of the condition becomes false, the if block will be skipped. In both cases, the program will execute the next statements afterward.
Examples to implement if Statement in JavaScript
Below are the examples mentioned:
Example #1
Condition on Number datatype
Code:
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript if statement
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 250px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> JavaScript if statement </h2>
<h3> Declarations: </h3>
<p> var a = 10; var b = 20; var c = 30; </p>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
</div>
</div>
<script type = "text/javascript">
var a = 10;
var b = 20;
var c = 30;
if(a == 10) {
document.getElementById("result1").innerHTML = "a is equal to 10";
}
if (b == 50) {
document.getElementById("result2").innerHTML = "b is equal to 50";
}
if (c == 30) {
document.getElementById("result3").innerHTML = "c is equal to 30";
}
</script>
</body>
</html>Output:
Explanation: Here, we have defined three variables of number datatype and used if statement on each to compare the values.As the first and third condition is true, statements corresponding to both are printed but as the second if condition is false, the corresponding if block is skipped from executing.
Example #2
Multiple types of comparisons
Code:
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript if statement
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> JavaScript if statement </h2>
<h3> Declarations: </h3>
<p> var a = 10; var b = 20; var c = 30; </p>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
</div>
</div>
<script type = "text/javascript">
var a = 10;
var b = 20;
var c = 30;
if(a < b) {
document.getElementById("result1").innerHTML = "a is less than b";
}
if (c > b) {
document.getElementById("result2").innerHTML = "c is greater than b";
}
if ( a != c) {
document.getElementById("result3").innerHTML = "a is not equal to c";
}
</script>
</body>
</html>Output:
Example #3
if statement inside another if statement
Code:
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript if statement
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 250px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> JavaScript if statement </h2>
<h3> Declarations: </h3>
<p> var a = 10; var b = 20; var c = 30; </p>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
</div>
</div>
<script type = "text/javascript">
var a = 10;
var b = 20;
var c = 30;
if(a < b) {
document.getElementById("result1").innerHTML = "a is less than b";
if (a < c) {
document.getElementById("result2").innerHTML = "a is less than c";
}
}
</script>
</body>
</html>Output:
Explanation: Here, if the outer if condition becomes true, then only the inner if condition will be executed. As the both if conditions are true both the statements will be printed.
Example #4
check if number is positive or negative using if statements
Code:
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript if statement
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> JavaScript if statement </h2>
<h3> Enter the number: </h3>
<input type = "text" id = "num" >
<input type = "button" value = "Submit" onclick = "checkOddEven()">
<div class = "resultText" >
<p id = "result"> </p>
</div>
</div>
<script type = "text/javascript">
function checkOddEven() {
var num = document.getElementById("num").value;
if ( num == 0) {
document.getElementById("result").innerHTML = " Entered number is Zero ";
}
if( num < 0) {
document.getElementById("result").innerHTML = " Entered number is Negative ";
}
if( num > 0) {
document.getElementById("result").innerHTML = " Entered number is Positive ";
}
}
</script>
</body>
</html>Output:
Explanation: Here, we have used if statements multiple times one after one for checking the number entered by the user.
Conclusion
The if statement is a conditional statement available in JavaScript which is used to make a decision and execute a particular block of code only in case a certain condition is satisfied. By using if condition multiple times or nesting inside one in another, we can achieve the end result required.
Recommended Articles
This is a guide to JavaScript if Statement. Here we discuss Introduction to JavaScript if Statement, Syntax, How does it works, Examples with codes and outputs. You can also go through our other related articles to learn more –
