1.6 Conditional Statements -2-¶

Warm-up¶

Task 1: if the user name is equal to "Jojo" and her password is equal to "123". Display "Welcome Jojo" in the console.

var username = "Jojo";
var password = "123"
if(username === "Jojo" && password === "123"){
    console.log("Welcome Jojo!");
}

You will get: Welcome Jojo!.

Change the user name to "Ali".

var username = "Ali";
var password = "123"
if(username === "Jojo" && password === "123"){
    console.log("Welcome Jojo!");
}

You will get nothing.

Change the password to "456":

var username = "Jojo";
var password = "456"
if(username === "Jojo" && password === "123"){
    console.log("Welcome Jojo!");
}

You will also get nothing because the password condition does NOT satisfy.

Note(1): === checks equality in terms of type and value. While == checks for equality in terms of value only.

Note(2): && is the logical operator and. It is true if both of the statements are true. In our case, if the user name and password conditions both are true, the overall expression is true.

Task 2: If the user name is "Ali", and he has the room key. Display "You are allowed in the room" in the console.

var username = "Ali";
var hasKey = true;
if(username === "Ali" && hasKey){
    console.log("You are allowed in the room");
}

You will get: "You are allowed in the room".

Change the hasKey value to false:

var username = "Ali";
var hasKey = false;
if(username === "Ali" && hasKey){
    console.log("You are allowed in the room");
}

You will get nothing. The tested condition evaluates to false.

Notice that: I did not write hasKey === true because it is already implied. true ==== true is true, and false === true is false. It is okay to write hasKey === true, but it not necessary.

Task 3: If the customer has the coupon X123, and his order is above $50, give him/her a discount.

var customerCoupon = "X5";
var customerPaid = 30;
if(customerCoupon === 'X123' && customerPaid >= 50){
    console.log("You got a discount");
}

Nothing will show up because the customerDiscount is NOT equal to 'X123', and the customer paid less than 50.

Change the value and test the code again:

var customerCoupon = "X123";
var customerPaid = 30;
if(customerCoupon === 'X123' && customerPaid >= 50){
    console.log("You got a discount");
}

You will get nothing. Although the customer has the coupon but he paid less than 50. Test again:

var customerCoupon = "X123";
var customerPaid = 50;
if(customerCoupon === 'X123' && customerPaid >= 50){
    console.log("You got a discount");
}

The result will be: "You got a discount" because both conditions do satisfy.

The OR Logical Operator¶

What if the user gets a discount if his/her order is more than or equal to 50, or he has the coupon X123.

var customerCoupon = "X123";
var customerPaid = 20;
if(customerCoupon === 'X123' || customerPaid >= 50){
    console.log("You got a discount");
}

The result will be: You got a discount.

Why?! || evaluates to true if either of the statements is true. It means customerCoupon === 'X123' || customerPaid >= 50 is true if customerCoupon === 'X123' or customerPaid >= 50 is true.

In our case: "X123" === 'X123' is true, 20 >= 50 is false. Hence the overall customerCoupon === 'X123' || customerPaid >= 50 is true.

Let's test this code:

var customerCoupon = "X5";
var customerPaid = 70;
if(customerCoupon === 'X123' || customerPaid >= 50){
    console.log("You got a discount");
}

The result will be: You got a discount.

Why?! In our case: "X5" === 'X123' is false, 70 >= 50 is true. Hence the overall customerCoupon === 'X123' || customerPaid >= 50 is true.

and for this code:

var customerCoupon = "X123";
var customerPaid = 100;
if(customerCoupon === 'X123' || customerPaid >= 50){
    console.log("You got a discount");
}

The result will be: You got a discount.

Why?! In our case: "X123" === 'X123' is true, 100 >= 50 is true. Hence the overall customerCoupon === 'X123' || customerPaid >= 50 is true.

what about this code?

var customerCoupon = "U123";
var customerPaid = 10;
if(customerCoupon === 'X123' || customerPaid >= 50){
    console.log("You got a discount");
}

It evaluates to false because both statements are false.

Some practice¶

Task 4: if the room temperature is greater than 40, or less than 0, display "Extreme weather" in the console:

var roomTemp = 40;
if(roomTemp > 40 || roomTemp < 0){
  console.log("Extreme weather");
}

You will get nothing because40 > 40 is false, 40 < 0 is false.

Task 5: If the kid bought an ice cream or a chocolate bar, display "you should not buy ice cream or chocolate" in the console.

var kidBuys = "chocolate";
if(kidBuys === "chocolate" || kidBuys === "ice cream"){
  console.log("You should not buy ice cream or chocolate");
}

The result will be: You should not buy ice cream or chocolate

Task 6: If there are clouds in the sky, or it is very hot, display "It is going to rain" in the console; otherwise, display "There is no rain".

var thereAreClouds = false;
var isItHot = true;
if(thereAreClouds || isItHot){
  console.log("It is going to rain");
}else{
  console.log("There is no rain");
}

You will get: It is going to rain

Task 7: If the student's math mark is above 80, or his/her Arabic mark is above 90, he will be rewarded; otherwise, not.

var mathMark = 82;
var arabicMark = 70;
if(mathMark > 80 || arabicMark > 90){
  var rewarded = true;
}else{
  var rewards = false;
}
console.log(rewarded);

The result will be true

Task 8: if the user's age is greater than or equal to 18, or he has a special permission, display "Allowed" in the console.

var age = 17;
var hasPermission = false;
if(age >= 18 || hasPermission){
  console.log("Allowed")
}

You will get nothing.

The NOT Logical Operator¶

Task 9: Read the following code and try to understand it.

var testValue = false;
if(!testValue){
  console.log("The condition is true");
}else{
  console.log("The condition is false");  
}

You will get: The condition is true

Task 10: Read the following code and try to understand it.

var testValue = true;
if(!testValue){
  console.log("The condition is true");
}else{
  console.log("The condition is false");  
}

You will get: The condition is false

Notice that: ! is the logical not operator. It negates the value/statement. if the value/statement is true, it evaluates to false. if the value is false, it evaluates to true.

Task 11: if the person has not the room key, deny his/her access.

var hasKey = false;
if(!hasKey){
  var accessDenied = true;
}else{
  accessDenied = false;
}
console.log(accessDenied);

you will get: true

Task 12: If the user name is empty, display a message "Please provide us with your username! The username field can not be empty!" in the console.

var username = "";
if(!username){
  console.log("Please provide us with your username! The username field can not be empty!")
}

You will get: Please provide us with your name! The name field can not be empty!

why?! Empty strings evaluate to false in JavaScript

Task 13: If the room temperature is not zero, the boy can go out.

var temp = 0;
if(!temp){
  var boyCanNotGoOut = true;
}else{
  var boyCanNotGoOut = false;
}
console.log(boyCanNotGoOut);

you will get: true

why?! '0' evaluates to false in JavaScript

Task 14: If the user did not provide us with the password, ask him to provide it.

var password = null;
if(!password){
  console.log("Please provide us with the password");
}

you will get: Please provide us with the password

why?! null evaluates to false in JavaScript

What is null? It is a JavaScript data type like string, number, and Boolean. It is used when the value of a variable is absent.

Can not we just use var password = ''?! Yes it can be, but there is a difference between '' and null. Let's check it:

Task 15: Read this code and try to understand it.

var username = '';
if(!username){
  console.log("Please provide us with the username");
  console.log(typeof username);
}
var password = null;
if(!password){
  console.log("Please provide us with the password");
  console.log(typeof password)
}

You will get:

Please provide us with the username
string
Please provide us with the password
object

'' is a string, while null is an object. What is an object? we will talk about objects later. Now think of objects as things. null is a thing, while an empty string is a thing of type string. Do not worry if you do not understand this. We will discuss it later in more details.

Note(3): null means the absence of the value. While '' means there is a value but it is empty.

Task 16: if the student's math mark is not provided in the student record, ask the math teacher to provide it.

var mathMark = null;
if(!mathMark){
  console.log("Please provide us with math mark");
}

you will get: Please provide us with math mark

Note(4): we use null here because the value of the math mark is absent for now.

Task 17: if the threshold value is not provided , ask the chemistry man to enter it:

var thresholdValue = null;
if(!thresholdValue){
  console.log("Please provide us with the threshold value");
}

You will get: Please provide us with the threshold value