JavaScript Conditionals

❮ Prev Next ❯

With the comparison operators in place, we can talk about conditionals.

An ifstatement is used to make the program take a route, or another, depending on the result of an expression evaluation.

This is the simplest example, which always executes: 


if (true){ 
  //do something
}

on the contrary, this is never executed: 


if (false){ 
  //do something (? never ?)
}

The conditional checks the expression you pass to it for a true or false value. If you pass a number, that always evaluates to true unless it's 0. If you pass a string, it always evaluates to true unless it's an empty string. Those are general rules of casting types to a boolean.

The if statement lets you execute a block of code if some test is passed.

Let's see another real-time example: 

let x = 5;
if (x === 5){ 
  console.log("x is equal to 5!");
}

Now if we change the value of xto 3this will not execute anything. Because the condition it not fulfil, that is why we have elsethat will execute the next condition when the first one happens to be not fulfil. We will talk about it later but before let me Introduce some usefull logic here.

Did you notice the curly braces? That is called a block, and it is used to group a list of different statements.

A block can be put wherever you can have a single statement. And if you have a single statement to execute after the conditionals, you can omit the block, and just write the statement: 


if (true) doSomething()

But we always suggest to use curly braces to be more clear and more conventional.

Else

You can provide a second part to the if statement: elseclause will execute code if the test fails.. 


if (true){ 
  //do something
}else {
  //do something else
}

Let see the real-time example: 

let x = 5;
if (x === 1){ 
  console.log("x is equal to 1!");
}else if(x === 2) {
  console.log("x is equal to 2!");
}else if(x === 5) {
  console.log("x is equal to 5!");
}else{
  console.log("x isn't 1, 2 or 5!");
}

Example 

let x = 5;
if (x === 1){ 
  console.log("x is equal to 1!");
}else if(x === 2) {
  console.log("x is equal to 2!");
}else if(x === 5) {
  console.log("x is equal to 5!");
}else{
  console.log("x isn't 1, 2 or 5!");
}

Conditionals: SWITCH

If you're going to be doing a large number of tests, it makes sense to use a switch statement instead of nested ifs. Switches in javascript are quite powerful, allowing evaluations on both the switch and the case. 

let x = 5;
switch (x){ 
  case 1:
    console.log("x is equal to 1!");
    break;
  case 2:
    console.log("x is equal to 2!");
    break;
  case 3:
    console.log("x is equal to 5!");
    break;
  defalut:
    console.log("'x isn't 1, 2 or 5!");
}

Note that if you omit the break statement that ALL of the code to the end of the switch statement will be executed. So if x is actually equal to 5 and there is no break statement, an console for "x is equal to 5" will appear as well as an console for "x isn't 1,2, or 5!".

Example 

let x = 5;
switch (x){ 
  case 1:
    console.log("x is equal to 1!");
    break;
  case 2:
    console.log("x is equal to 2!");
    break;
  case 3:
    console.log("x is equal to 5!");
    break;
  default:
    console.log("'x isn't 1, 2 or 5!");
}

Sometimes it makes more sense to do the evaluation in the case statement itself. In this case you'd use true, falseor an expression which evaluates to true or false in the switch statement. 

let x = 5;
switch (x){ 
  case (x === 1):
    console.log("x is equal to 1!");
    break;
  case (x === 2):
    console.log("x is equal to 2!");
    break;
    case (x === 5):
    console.log("x is equal to 5!");
    break;
  default:
    console.log("'x isn't 1, 2 or 5!");
}

Example 

let x = 5;
switch (x){ 
  case (x === 1):
    console.log("x is equal to 1!");
    break;
  case (x === 2):
    console.log("x is equal to 2!");
    break;
    case (x === 5):
    console.log("x is equal to 5!");
    break;
  default:
    console.log("'x isn't 1, 2 or 5!");
}

Conditionals: Ternary Operators

Ternary operators are a shorthand if/else block who's syntax can be a bit confusing when you're dealing with OPC (Other People's Code). The syntax boils down to this. 


let  userName = "Muhammad";
let  hello = (userName == "Muhammad")? "Hello Muhammad!" : "Hello Not Muhammad!";

In this example the statement to be evaluated is (userName=='Muhammad'). The question marks ends the statement and begins the conditionals. If UserName is, indeed, Muhammad then the first block 'Hello Muhammad!'will be returned and assigned to our hello variable. If userName isn't Muhammad then the second block ('Hello Not Muhammad!')is returned and assigned to our hello variable.

Example 


let  userName = "Muhammad";
let  hello = (userName == "Muhammad")? "Hello Muhammad!" : "Hello Not Muhammad!";
console.log(hello);
❮ Prev Next ❯