Code has been added to clipboard!

Tips and Tricks on JavaScript if else Statement in a Nutshell

Reading time 4 min
Published Aug 10, 2017
Updated Oct 2, 2019

When you're coding in JavaScript, one of the fundamental things to grasp is the JavaScript if else statement. It is used to make your code adapt to specific conditions that you youself specify.

In this tutorial, you will learn all about its purpose and syntax. Using JavaScript if else statements will make your code more flexible and user friendly.

JavaScript if else: Main Tips

  • if, else if and else are conditional statements. They run code when a condition is met.
  • JavaScript if statement runs a code block if a specific set condition is true.
  • JavaScript else statement runs a block of code if the if statements condition is false.
  • JavaScript else if statement runs a code block if the condition of if is false but an extra condition proves to be true.

Choosing and Writing Statements

if JavaScript statement runs a block of code if a specific set condition is true.

If that same condition turns out to be false, JavaScript else statement runs a block of code. In this case, an extra condition might be set using JavaScript else if statement. It will run a block of code if the new conditions returns true.

If both if and else if statements aren't true, JavaScript else statement will run its block of code.

Sounds a bit complicated? Let's see a simple example:

Example
function exampleFunction() {
    var number = 15;
    var text;
    if (number < 15) {
        text = "Number is less than 15";
    } else if (number == 15){
        text = "Number is equal to 15";
    } else {
        text = "Number is greater than 15";
    }
    document.getElementById("test").innerHTML = text;
}

As you try this example in the code editor, try changing the value in the second line and rerunning the code to see the differences.

Examples

As you can see, the syntax for the JavaScript if else statement is really quite simple. Still, memorizing it might not be the same as understanding how to use it in practice.

We will now analyze three examples of using JavaScript if else statement in real code. The Try it Live buttons will allow you to open each of them in a code editor and play around with them a little so you get a better idea of the concept.

Example 1

In this example, we use JavaScript to check what time it is - to be more precise, whether it's before 8pm, in which case the function will return a "Good day!", and if it's a later hour, it will return "Good evening!".

We assign the time variable a date object with a method that gets the current hour. Then, using if statement JavaScript checks whether the current hour is earlier or later than 20:

Example
function exampleFunction() {
    var time = new Date().getHours(); 
    var text;
    if (time < 20) {
        text = "Good day!";
    } else {
        text = "Good evening!";
    }
    document.getElementById("test").innerHTML = text;
}

Example 2

In the following example, we change the JavaScript if statement's condition so it checks if the hour is earlier than 10, in which case it outputs "Good morning!". In addition to that, we now add JavaScript else if statement, which checks if the hour is earlier than 20. If the first condition of if is false, and if the condition of else if is met, we output "Good day!".

Finally, JavaScript else statement returns "Good evening!" if both of the previous conditions are false:

Example
var time = new Date().getHours(); 
if (time < 10) { 
   document.write("Good morning!"); 
} else if(time < 20) { 
   document.write("Good day!"); 
} else { 
   document.write("Good evening!");
}

Example 3

In the following example, we have a script, which takes the input of an HTML input field and checks its value through if and else if statements. If a user inputs c, the text states they entered the correct value.

JavaScript else if statement condition checks if you enter b or d. If that is true, the function returns that you are close to the right answer, because these letters are next to c in the alphabet.

If you enter any other value, JavaScript else statement informs you that you entered a wrong answer:

Example
var letter = document.getElementById("my_input").value;
var text; 
if (letter === "c") {
     text = "Woo wee! You got it!";
} else if (letter === "b" || letter === "d") {
    text  = "Close enough, champ!";
} else {
    text = "Awh... Not even close, man.";
}
document.getElementById("test").innerHTML = text;

JavaScript if else: Summary

  • You can use JavaScript if statement to check for a specific condition and execute some code if the condition is met.
  • If it is not, you can use else if statement to check for an addition condition and execute some code if it is met.
  • You can use JavaScript else statement to execute some code if none of the conditions are met.
What Is JavaScript Used For?
Tutorial
Introduction
Output
Syntax
Comment
Commands
Operators
Comparison and Logical Operators
Data Types
Math.random()
Type Conversion
Function Definitions
Events
Objects
Object Properties
Prototype
Array
Sorting Arrays
Strings
Numbers
Number Format
Math Object
Onclick Event
Date
Date Formats
Scope
Regular Expressions
Reserved Words
Common Mistakes
Performance
Forms
Form Validation
Window: The Browser Object Model
Popup Boxes
Cookies
JSON
AJAX Introduction
AJAX Form
Automatic File Download
Functions
Array Methods
String Methods
Date Methods
Timing Events
Cheat Sheet
JavaScript in HTML
HTML DOM Methods
HTML DOM Changing HTML
HTML DOM Animation
HTML DOM EventListener
HTML DOM Navigation
HTML DOM NodeList
HTML DOM Element Nodes
Array Functions
Boolean
Calling a Function
Date Functions
Global Objects
Input Text
Operator
Statements
String Functions
Math
Math.random
Number
RegEx
alert
array.filter
array.length
array.map
array.reduce
array.push
array.sort
break and continue
className
confirm
decodeURIComponent
for
forEach
if
indexOf
innerHTML
location.reload
number.toString
onclick
onload
parseInt
prompt
replace
setAttribute
setInterval
setTimeout
slice
splice
string.includes
string.indexOf
string.split
style.display
submit
substr
substring
switch
test
throw, try and catch
toLowerCase
toUpperCase
use strict
while
window.history
window.location
window.navigator
window.screen