Web Development

JavaScript Conditional Statement

JavaScript Conditional Statement is section 16 of Beginner’s Guide to JavaScript.

In our JavaScript Syntax article, we talked about a operator called conditional operator with the characters of ‘?’ and ‘:’. Conditional statement mean the same concept in more readable text level. Conditional statements are used to perform different actions based on different conditions.

It can be written in several ways in JavaScript.

  • Use if to specify a block of code to be executed, if a specified condition is true
  • Use else to specify a block of code to be executed, if the same condition is false
  • Use multiple else if parts to specify a new condition to test, if the first condition is false
  • Use switch to specify many alternative blocks of code to be executed

The if Statement

Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

Syntax goes like this.

if (condition) {
    block of code to be executed if the condition is true
}

Note that if is in lowercase letters. Uppercase letters (If or IF) will generate a JavaScript error.

[code languague=”js”] if (mark> 50) {
remark= “Good”;
}
[/code]

This scenario can be used for give remarks for marks of a student.

The else Statement

Use the else statement to specify a block of code to be executed if the condition is false.

To write the else, there should always be a if part. Syntax is goes like this.

if (condition) {
    block of code to be executed if the condition is true
} else {
    block of code to be executed if the condition is false
}

So the else part of the marks scenario can be written as follows.

[code languague=”js”] if (mark> 50) {
remark= “Good”;
}else{
remark= “Bad”;
}
[/code]

Multiple else if Statements

Use the else if statement to specify a new condition if the first condition is false.

Syntax is goes like this.

if (condition1) {
    block of code to be executed if condition1 is true
} else if (condition2) {
    block of code to be executed if the condition1 is false and condition2 is true
} else {
    block of code to be executed if the condition1 is false and condition2 is false
}

If you like to add more remarks for different levels of marks, this can be written as follows.

[code languague=”js”] if (mark> 80) {
remark= “Very Good”;
}else if(mark > 50){
remark= “Good”;
}else if(mark > 20){
remark= “Bad”;
}else{
remark= “Very Bad”;
}
[/code]

The Switch Statement

Use the switch statement to select one of many blocks of code to be executed.

Syntax is goes like this.

switch(expression) {
case n:
        code block
        break;
case n:
        code block
        break;
default:
        default code block
}

Let’s see how it works step by step.

  • The switch expression is evaluated once.
  • The value of the expression is compared with the values of each case.
  • If there is a match, the associated block of code is executed.

(We’ll cover up the break part in detail in the next article. So for now just take it execution is jump  out from the switch when break was executed. Remember it not stop the whole execution, just a jump out)

The difference between else if statement and switch statement is, switch can only handle equal comparisons. Therefor we cannot use switch statements to represent our remark scenario. So we are using it for another scenario. look at the example.

[code languague=”js”] switch (new Date().getDay()) {
case 0:
day = “Sunday”;
break;
case 1:
day = “Monday”;
break;
case 2:
day = “Tuesday”;
break;
case 3:
day = “Wednesday”;
break;
case 4:
day = “Thursday”;
break;
case 5:
day = “Friday”;
break;
case 6:
day = “Saturday”;
break;
}
[/code]

It uses today’s weekday number to calculate weekday name.

The default Keyword

The default keyword specifies the code to run if there is no case match. Look at the following.

[code language=”js”] switch (new Date().getDay()) {
case 6:
text = “Today is Saturday”;
break;
case 0:
text = “Today is Sunday”;
break;
default:
text = “Looking forward to the Weekend”;
}
[/code]

If the value passed into switch is not 6 or 0, then the default part executes.


 

What’s Next?

Learn what is JavaScript Branching Statements

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW