Skip to content

1.5 Conditional Statements -1-

Writing conditions

Remember the previous project; the discount. Here you are the code:

var customer1 = "Soso";
var customer1GetsDiscount = 150 >= 100;
console.log(customer1 + " got the  discount: " + customer1GetsDiscount ); //Soso gets discount: true
var customer2 = "Sami";
var customer2GetsDiscount = 50 >= 100;
console.log(customer2 + " got the  discount: " + customer2GetsDiscount ); //Sami gets discount: false

In order to know if a customer got the discount or not, we test the customer's subtotal against the threshold of $100. We repeat this test for every single user. For example, for the customer, named Sami: var customer2GetsDiscount = 50 >= 100

Will not it better to write the test only once?! How to do it? Read the following code:

var customerPaid = 50;
if(customerPaid >= 100){
  var customerGetsDiscount = true;
}else{
  var customerGetsDiscount = false;
}
  1. Here I created a variable called customerPaid. It contains the value of the customer's subtotal.
  2. Then I checked whether customerPaidvalue is greater than or equal to 100.
  3. If yes, another variable will be created. It is called customerGetsDiscount. We assign true value to it it.
  4. If not, false is assigned to the variable customerGetsDiscount

Let's check this code with Soso's subtotal:

var customerPaid = 150;
if(customerPaid >= 100){
  var customerGetsDiscount = true;
}else{
  var customerGetsDiscount = false;
}
console.log(customerGetsDiscount);

You will get: true

Let's test it with Sami's subtotal:

var customerPaid = 50;
if(customerPaid >= 100){
  var customerGetsDiscount = true;
}else{
  var customerGetsDiscount = false;
}
console.log(customerGetsDiscount);

You will get: false

Let's test it with another customer, named Ali. Ali paid $200:

var customerPaid = 200;
if(customerPaid >= 100){
  var customerGetsDiscount = true;
}else{
  var customerGetsDiscount = false;
}
console.log(customerGetsDiscount);

You will get: true

Great! Let's do some practice!

Some Practice

Task 1: If 30 is less than 80, display true in the console; otherwise, display false.

if(30 > 80){
  console.log(true);
}else{
  console.log(false);
}

You will get: true

Task 2: If the provided name is equal to Ali, display "Allowed" in the console; otherwise, display "NOT allowed".

var providedName = "Ali";
if(providedName == "Ali"){
  console.log("Allowed");
}else{
  console.log("Not Allowed");
}

You will get: Allowed.

Let's change the tested name:

var providedName = "Ola";
if(providedName == "Ali"){
  console.log("Allowed");
}else{
  console.log("Not Allowed");
}

You will get: Not allowed.

Nice!

Task 3: If someone's temperature is greater than or equal to 37.5, display "Above 37.5" in the console.

var personTemp = 38;
if(personTemp >= 37.5){
  console.log("Above 37.5");
}

You will get: Above 37.5.

check it for another person:

var personTemp = 37;
if(personTemp >= 37.5){
  console.log("Above 37.5");
}

You will get nothing.

Notice that you did not need to add else part here. Just use it when you need it.

Task 4: if the room temperature is less than or equal to 25, display "It can be normal or cold." in the console.

var roomTemp = 15;
if(roomTemp <= 25){
  console.log("It can be normal or cold.");
}

You will get: It can be normal or cold.

Check for another room temperature:

var roomTemp = 70;
if(roomTemp <= 25){
  console.log("It can be normal or cold.");
}

You will get nothing in the console.

Task 5: If the thing, the kid bought, is NOT equal to ice cream, display "You are such a good kid" in the console; otherwise, display "You should not buy ice cream".

var kidBuys = "bread";
if(kidBuys != "ice cream"){
  console.log("You are such a good kid");
}else{
  console.log("You should not buy ice cream");
}

The result will be: You are such a good kid.

Let's change what did the kid buy:

var kidBuys = "ice cream";
if(kidBuys != "ice cream"){
  console.log("You are such a good kid");
}else{
  console.log("You should not buy ice cream");
}

The result will be: You should not buy ice cream.

Task 6: If the provided variable type is "number", display "It is a number" in the console.

var testVar = 10;
if(typeof testVar === 'number'){
  console.log("It is a number");
}

The result will be: It is a number.

Change the value of testVar:

var testVar = "Hello";
if(typeof testVar === 'number'){
  console.log("It is a number");
}

You will get nothing in the console.

Task 7: If the provided variable type is "string", display "It is a string" in the console.

var testVar = 10;
if(typeof testVar === 'string'){
  console.log("It is a string");
}

You will get nothing in the console.

Change the value of testVar:

var testVar = "Hello";
if(typeof testVar === 'string'){
  console.log("It is a string");
}

The result will be: It is a string

Task 8: If the provided variable type is "Boolean", display "It is a Boolean" in the console.

var testVar = true;
if(typeof testVar === 'boolean'){
  console.log("It is a boolean");
}

The result will be: It is a boolean.

Change the value of testVar:

var testVar = "true";
if(typeof testVar === 'boolean'){
  console.log("It is a boolean");
}

You will get nothing in the console.

Task 9: if the user enters the correct password, which is 123, set the loginAllowedto true; otherwise, set it to false. Display the value of loginAllowed in the console.

var requiredPassword = "123";
var userPassword = "xyz";
if(userPassword !== requiredPassword){
  var loginAllowed = false;
}else{
  var loginAllowed = true;
}
console.log(loginAllowed);

You will get: false

Task 10: repeat the task 9, and set the userPassword to 123.

var requiredPassword = "123";
var userPassword = "123";
if(userPassword !== requiredPassword){
  var loginAllowed = false;
}else{
  var loginAllowed = true;
}
console.log(loginAllowed);

You will get: true

Note (1) != checks whether its operands are not equal in terms of value only. Whereas, !== checks whether its operands are not equal in terms of value and type.

Writing more conditions

We learned much so far. What if we want to write more conditions. I mean: let's go back to task 4 in the previous section. We wanted to check the room temperature. If the room temperature is less than or equal to 25, display something in the console. We can say that:

  1. Less than 25 can be normal, cold, or extremely cold.

  2. Less than 15 can be a bit cold or extremely cold.

  3. Less than 0 is extremely cold.

We need to write more conditions to evaluate the room temperature precisely. We can write the following sentences:

var roomTemp = 6;
if(roomTemp <= 25){
  console.log("It can be normal, cold or extremely cold");
}
if(roomTemp <15){
  console.log("It can be a bit cold or extremely cold");
}
if(roomTemp <0){
  console.log("It is extremely cold");
}

The result will be:

It can be normal, cold or extremely cold
It can be a bit cold or extremely cold

Well, what's happened here?

  1. JavaScript engine reads the code line by line from top to bottom.

  2. It reads the first condition roomTemp <= 25. It is true because 6 is less than 25. So it displays It can be normal, cold or extremely cold in the console.

  3. It reads the second condition roomTemp <15. It is true because 6 is less than 15. So it displays It can be a bit cold or extremely cold in the console.

  4. It reads the third condition roomTemp <0. It is false because 6 is NOT less than 0. So it displays nothing in the console.

Well! We learned something new! but this is not what we need. We need to evaluate the room temperature with a single statement, not with many! Let's try to follow another approach:

var roomTemp = 6;
if(roomTemp <= 25 && roomTemp >= 20){
  console.log("The weather is nice.");
}
if(roomTemp < 20 && roomTemp >= 10){
  console.log("Well, it is a bit cold!");
}
if(roomTemp <10 && roomTemp >= 5){
  console.log("Woe, it is really cold!");
}
if(roomTemp <0){
  console.log("It is extremely cold!");
}

What is going on here? What is &&? && means and. Let me explain more:

  1. JavaScript reads roomTemp <= 25 && roomTemp >= 20: 6 <= 25 && 6 >= 20: is 6 less than or equal to 25 (true) and is 6 greater than or equal to 20 (false) ==> true and false = false. Then the condition does NOT satisfy.

  2. JavaScript reads roomTemp < 20 && roomTemp >= 10: 6 < 20 && 6 >= 10: is 6 less than 20 (true) and is 6 greater than or equal to 10 (false) ==> true and false = false. Then the condition does NOT satisfy.

  3. JavaScript reads roomTemp <10 && roomTemp >= 5: 6 <10 && 6 >= 5: is 6 less than 10 (true) and is 6 greater than or equal to 5 (true) ===> true and true = true. Then the condition DOES satisfy. In the console, you will see: "Woe, it is really cold!"

  4. JavaScript reads roomTemp <0: 6 <0 is 6 less than 0? false. Then the condition does NOT satisfy.

Note(2): && is a logical operator. It evaluates to true if both statements are true.