Table of Contents
In the previous part of JavaScript 101 series we finished exploration of data types by learning about objects. Today, we will take a look at topic that will be very important in your future work. What we are going to talk about are if statements. These statements, as you will see, will become very handy in most of your JavaScript related projects. It will also allow us to move in this course and do more complex programming. So, let’s dive in …
Operators
Before we can put our hands on if statement and create our first example, we have to learn about operators available in JavaScript. These operators are “and”, “or”, “not”, “greater than”, “less than”, “equal value and equal type”, “equal to”, “not equal”, “not equal value or not equal type“, “greater than or equal to” and “less than or equal to”. All of these operators are symbolized by special characters shown below. They are very easy to learn and you will probably most of them, if not all, already know from school.
Comparison operators:
“equal to” - == “equal value and equal type” - === “not equal” - != “not equal value or not equal type“ - !== “greater than” - > “less than” - < “greater than or equal to” - >= “less than or equal to” - <=
Logical operators:
“and” - && “or” - || “not” - !
If else
When we are familiar with comparison and logical operators, we can finally explore the if statement and learn what it is and how it works. If statement is a way how you can set the program to do one different things according to provided conditions. In plain language it means that if this condition is true, do this thing, else do that thing (or nothing). If statement comprises two parts – if and else. Both of these parts then include block of code which will be executed under set conditions. Syntax of if else statement is following:
JavaScript:
If ( condition ) {
what to do if condition is met
} else {
what to do otherwise
}
However, you can also omit the “else” part completely, so whole syntax will contain only the “if” part.
JavaScript:
if ( condition ) {
what to do if condition is met
}
This can be used in situations when you want the program to do only one thing and ignore the rest. For example, let’s say you have a simple program asking user if it is raining. If yes, program will suggest taking an umbrella, else nothing will happen. The code would be following …
JavaScript:
var question = confirm(“Is it raining?”); // confirm returns true (OK button) or false (Cancel button)
if (question === true) {
alert(“You should take an umbrella.”);
}
– note: You can also write it shorter.
JavaScript:
var question = confirm(“Is it raining?”); // confirm returns true (OK button) or false (Cancel button)
if (question) {
alert(“You should take an umbrella.”);
}
I will quickly jump back to operators because you might be confused by “equal to” (==) and “equal value and equal type” (===) operator, so I will explain the difference between these two guys and also show you few examples to help you to grasp it. The difference between “==” and “===” is that the “==” operator will do necessary type conversions before it will compare provided values. “===” operator will compare the values without any conversion. For example, 13 (integer) and “13” (string) will be the same for “==” operator (it will return true), while they will be different for “===” (it will return false).
JavaScript:
// “==” - equal to example
if (13 == “13”) {
console.log(“Values are the same!”);
} else {
console.log(“Values are NOT the same!”);
}
// result - “Values are the same!”
// “===” - equal value and equal type
if (13 == “13”) {
console.log(“Values are the same!”);
} else {
console.log(“Values are NOT the same!”);
}
// result - “Values are NOT the same!”
Reason for that is the type and type conversion I mentioned earlier. “==” operator will first convert string “13” into integer 13 and then comparison. “===” will compare the values as they are – integer and string – which are not the same thing. Pay attention to which of these operators you use in your programs to avoid not working code and bugs.
Now, back to our umbrella example … You can create more complex script by including code for case if condition is not met – user clicks Cancel in our example. Let the program answer “Have a nice day.” when it is not raining.
JavaScript:
var question = confirm(“Is it raining?”);
if (question) {
// if condition is met – true is returned
alert(“You should take an umbrella.”);
} else {
// if condition is met – false is returned
alert(“Have a nice day”);
}
Another example when you can use if statement is when you need to ask user for his age in order to provide him with different content (let’s say you run a website for adults). To get this done you will need only few lines of code. First, create a variable “age” with prompt(“How old are you?”) as value. Second, write simple simple if statement and use comparison operators that suit this example – “greater than or equal to” (>=) or “less than or equal to” (<=).
JavaScript:
var age = prompt(“How old are you?”);
if (age >= 18) {
// if answer is 18 or higher
alert(“You are allowed to enter.”);
} else {
// if answer is lower 18
alert(“Sorry kid, nothing for you.”);
}
You can also get this done in shorter form by removing variable and placing the question right into the condition part of if statement.
JavaScript:
if (prompt(“How old are you?”) >= 18) {
// if answer is 18 or higher
alert(“You are allowed to enter.”);
} else {
// if answer is lower 18
alert(“Sorry kid, nothing for you.”);
}
Next example of using if statement can be security related. Let’s say you want to write a simple script that will control the length of password provided by user when he wants to create an account. The solution is to use “length” property of string and if statement set to check for certain length.
JavaScript:
if (prompt(“Please, set your password:”).length <= 8) {
// if password is shorter or equal than 8 characters
alert(“Provided password is to short.”);
} else {
// if password is longer than 8 characters
alert(“Provided password is secure enough”);
}
Summary
That’s all for this part focused on if statement. There are countless examples where you can practice it. Try, for example, to create a script that will check available money to help you decide if you should go shopping. If you want, you can submit your solution via comment or by writing me message on social network or mail below.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
