JavaScript Conditional Statements
JavaScript Conditional Statements
Introduction:
JavaScript conditional statements are used to make decisions in a program. They allow the
program to execute different blocks of code based on whether a given condition is true or
false. By using conditional statements, a program can respond differently to different inputs
or situations, making the code more flexible and interactive.
Conditional statements help control the flow of execution in JavaScript. Instead of running all
statements one after another, the program checks conditions and decides which statements
should run. This is very important in real-world applications such as form validation, login
systems, and decision-based operations where different actions are required under different
conditions.
JavaScript conditional statements are widely used in real-world web applications. They are
used to validate user input in forms, check login credentials, display different messages to
users, control access to pages, and handle errors. For example, a website can show a success
message if a password is correct or an error message if it is wrong. This makes websites more
user-friendly and interactive.
JavaScript provides several conditional statements such as:
1. If statement
2. if...else statement
3. if...else if...else statement
4. Nested if statement
5. switch statement
Srinivas Institute of Technology, Valachil 1
JavaScript Conditional Statements
1. if Statement in JavaScript
This conditional statement runs a block of code only when the condition given is true. If the
condition is false, it skips the code inside the block.
Syntax:
The syntax for the if statement is given below:
if (condition)
{
// code will run only if the condition is true
}
Flowchart:
Srinivas Institute of Technology, Valachil 2
JavaScript Conditional Statements
Example:
<!DOCTYPE html>
<html>
<head>
<title>If Statement Example</title>
</head>
<body>
<h2>JavaScript If Statement</h2>
<script>
let age = 20;
if (age >= 18)
[Link]("You are eligible to vote.");
</script>
</body>
</html>
Output:
Srinivas Institute of Technology, Valachil 3
JavaScript Conditional Statements
2. if...else statement
This conditional statement is used to check a condition and then run a block of code if it is
true, and another block if it is false. It allows your program to make decisions between two
outcomes.
Syntax:
The syntax for if…else statement is given below:
if (condition) {
// code if the condition is true
} else {
// code if the condition is false
}
Flowchart:
Srinivas Institute of Technology, Valachil 4
JavaScript Conditional Statements
Example:
<!DOCTYPE html>
<head>
<title>If Else Statement Example</title>
</head>
<body>
<h2>JavaScript If–Else Statement</h2>
<script>
let marks = 45;
if (marks >= 40) {
[Link]("Result: PASS");
} else {
[Link]("Result: FAIL");
</script>
</body>
</html>
Output:
Srinivas Institute of Technology, Valachil 5
JavaScript Conditional Statements
3. if...else if...else statement
You can use this conditional statement when you have to check multiple conditions one after
another. If the condition is true, that particular block runs, and the rest are skipped.
Syntax:
The syntax for if…else if…else ladder in JavaScript is given below:
if (condition1) {
// code
}
else if (condition2) {
// code
}
else {
// code
Srinivas Institute of Technology, Valachil 6
JavaScript Conditional Statements
Flowchart:
Srinivas Institute of Technology, Valachil 7
JavaScript Conditional Statements
Example:
<!DOCTYPE html>
<html >
<head>
<title>If Else If Statement Example</title>
</head>
<body>
<h2>JavaScript If – Else If – Else Statement</h2>
<script>
let marks = 72;
if (marks >= 75) {
[Link]("Grade: A") }
else if (marks >= 60) {
[Link]("Grade: B") }
else if (marks >= 40) {
[Link]("Grade: C"); }
else {
[Link]("Grade: Fail"); }
</script>
</body>
</html>
Output:
Srinivas Institute of Technology, Valachil 8
JavaScript Conditional Statements
4. Nested if statement
You can use the nested if…else statements in JavaScript when one condition depends on
another. You have to place an if…else block inside another if…else block to check more specific
conditions.
Syntax:
The syntax for a nested if-else statement in JavaScript is given below:
if (condition1) {
if (condition2) {
// code if both conditions are true }
else {
// code if condition1 is true but condition2 is false } }
else {
// code if condition1 is false }
Flowchart:
Srinivas Institute of Technology, Valachil 9
JavaScript Conditional Statements
Example:
<!DOCTYPE html>
<html >
<head>
<title>Nested If Statement Example</title>
</head>
<body>
<h2>JavaScript Nested If Statement</h2>
<script>
let age = 20;
let hasVoterID = true;
if (age >= 18) {
if (hasVoterID === true) {
[Link]("You are eligible to vote."); }
else {
[Link]("You are not eligible: Voter ID required."); } }
else {
[Link]("You are not eligible: Age must be 18 or above."); }
</script>
</body>
</html>
Output:
Srinivas Institute of Technology, Valachil 10
JavaScript Conditional Statements
5. switch statement
The switch statement in JavaScript allows you to compare one value against multiple values.
It helps to keep your code clean and easier to read than multiple if…else statements in
JavaScript.
Syntax:
The syntax for the switch statement in JavaScript is given below:
switch (expression) {
case value1:
// code
break;
case value2:
// code
break;
case value n:
//code
break;
default:
// code if no case matches
}
Srinivas Institute of Technology, Valachil 11
JavaScript Conditional Statements
Flowchart:
Srinivas Institute of Technology, Valachil 12
JavaScript Conditional Statements
Example:
<!DOCTYPE html>
<html lang>
<head>
<title>Switch Statement Example</title>
</head>
<body>
<h2>JavaScript Switch Statement</h2>
<script>
let day = 3;
switch (day) {
case 1:
[Link]("Monday");
break;
case 2:
[Link]("Tuesday");
break;
case 3:
[Link]("Wednesday");
break;
case 4:
[Link]("Thursday");
break;
case 5:
[Link]("Friday");
break;
case 6:
[Link]("Saturday");
Srinivas Institute of Technology, Valachil 13
JavaScript Conditional Statements
break;
case 7:
[Link]("Sunday");
break;
default:
[Link]("Invalid day");
</script>
</body>
</html>
Output:
Srinivas Institute of Technology, Valachil 14
JavaScript Conditional Statements
Conclusion:
In conclusion, JavaScript conditional statements play a vital role in controlling the flow of a
program by allowing decisions to be made based on given conditions. By using statements
such as if, if–else, else if, switch, and the ternary operator, developers can execute different
blocks of code depending on whether conditions evaluate to true or false. These conditional
constructs make programs more dynamic, interactive, and user-friendly. Proper use of
conditional statements improves code readability, logic implementation, and overall
efficiency, making them an essential concept for writing effective JavaScript applications.
Srinivas Institute of Technology, Valachil 15
JavaScript Conditional Statements
Reference:
[Link]
[Link]
[Link]
Srinivas Institute of Technology, Valachil 16