DEV Community

Azeez Rotimi Arigbabuwo
Azeez Rotimi Arigbabuwo

Posted on

JavaScript Conditional Statements

Conditional statements are like a decision we make based on circumstances. For example, if I wake up very early, I do some exercise e.g Road work and cardio, else if I wake up 30mins late, I skip road work and do just cardio, else I eat breakfast and write some code. These if-else decisions can be modeled in code by creating conditional statements. A conditional statement checks a specific condition(s) and performs a task based on the condition(s).

if Statement

In programming, task can be perform based on a condition using an if statement. example:

if (true) {
    console.log('Print this message!');
} // output: Print this message!

The 'if statement' is composed by writing:

  • The if keyword followed by a set of parentheses () which is followed by a code block, or block statement, indicated by a set of curly braces {}.
  • Inside the parentheses (), a condition is provided that evaluates to true or false.
  • If the condition evaluates to true, the code inside the curly braces {} runs or executes.
  • If the condition evaluates to false, the block won’t execute.

else Statement

If we wanted to add some default behavior to the if statement, we can add an else statement to run block of code, when the condition evaluate to false. example:

if (false) {
    console.log('The code in this block will not run');
} else {
    console.log('But the code in this block will');
} // output: But the code in this block will

An else statement must be paired with an if statement, and together they are referred to as an if...else statement.

  • else keyword is used following the code block of an if statement.
    • Has a code block that is wrapped by a set of curly braces {}.
    • The code inside the else statement code block will execute when the if statement’s condition evaluates to false. if...else statements allow us to automate solutions to yes-or-no questions, also known as binary decisions.

Comparison Operator

When writing a conditional statement, we sometimes need to use different types of an operator to compare values. these operators are called comparison operators.

List of some comparison operators and their syntax

  • less than <
  • greater than >
  • less than or equal to <=
  • greater than or equal to >=
  • equal to ===
  • not equal to !==

Comparison operators compare the value on the left with the value on the right. Example:

10 < 12 // Evaluate to true

We can also use comparison operators on different data types like strings:

'apples' === 'oranges' // false

Since the two strings are not the same, the comparison statement evaluates to false. All comparison statements evaluate to either true or false and are made up of:

  • Two values that will be compared.
  • An operator that separates the values and compares them accordingly (>, <, <=,>=,===,!==). Example: 
let hungerLevel = 7;
if (hungerLevel >= 7) {
  console.log('Time to eat!');
} else {
  console.log('We can eat later!');
}// output = Time to eat!

Note: There is a difference between === and == and also !== and !=. If the two operands
are of the same type and have the same value, then === produces true and !== produces false. The == and != do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values. examples:

 17 == '17'   // true
 17 === '17'   // false

false == '0'  // true
false === '0'  // false

'string' == 'string' // true
'string' === 'string' // true

it's best practice to use the === and !== operators, unless you fully understand the conversions that take place with == and !=.

Logical operators

In conditionals, boolean true or false values will most times be in use. In javaScript logical operators is used to work with a boolean value. There are three(3) logical operators:

  • The and operator (&&)
  • The or operator (||)
  • The not (!)

When we use the && operator, we are checking that two things are true:

if (stopLight === 'green' && pedestrians === 0) {
  console.log('Go!');
} else {
  console.log('Stop');
}

When using the && operator, both conditions must evaluate to true for the entire condition to evaluate to true and execute. Otherwise, if either condition is false, the && condition will evaluate to false and the else block will execute.
If we only care about either condition being true, we can use the || operator:

if (day === 'Saturday' || day === 'Sunday') {
  console.log('Enjoy the weekend!');
} else {
  console.log('Do some work.');
}

When using the || operator, only one of the conditions must evaluate to true for the overall statement to evaluate to true.

The ! not operator reverses, or negates, the value of a boolean:

let excited = true;
console.log(!excited); // Prints false

let sleepy = false;
console.log(!sleepy); // Prints true

Essentially, the '!' operator will either take a true value and pass back false, or it will take a false value and pass back true.

Logical operators are often used in conditional statements to add another layer of logic to our code.

Truthy and Falsy

truthy an falsy are used to evaluate a non-boolean condition, like string and numbers.

Here’s an example:

let myVariable = 'I Exist!';
if (myVariable) {
   console.log(myVariable)
} else {
   console.log('The variable does not exist.')
}

The code block in the if statement will run because myVariable has a truthy value; even though the value of myVariable is not explicitly the value true when used in a boolean or conditional context, it evaluates to true because it has been assigned a non-falsy value.

Falsy values are:

  • 0
  • Empty strings like " " or ' '
  • null which represent when there is no value at all
  • undefined which represent when a declared variable lacks a value
  • NaN which means Not a Number

Here’s an example with numbers:

let numberOfApples = 0;

if (numberOfApples){
   console.log('Let us eat apples!');
} else {
   console.log('No apples left!');
} // Prints 'No apples left!'

The condition evaluates to false because the value of the numberOfApples is 0. Since 0 is a falsy value, the code block in the else statement will run.

Ternary Operators

Ternary operators is use to simplify an if...else statement using short-hand syntax. example:

let isNightTime = true;
if(isNightTime) {
    console.log('Turn on the light');
} else {
    console.log('Turn off the light');
}

This can be performed using ternary operator:

let isNightTime = true;
isNightTime ?  console.log('Turn on the light') : console.log('Turn off the light');

Like if...else statements, ternary operators can be used for conditions that evaluate to true or false.

else if statement

else if statement is use to add more conditions to our if...else to get many possible outcome. The else if comes right after the if and before the else statement. example:

let stopLight = 'yellow';
if (stopLight === 'red') {
    console.log('Stop!');
} else if (stopLight === 'yellow') {
    console.log('Slow down');
} else if (stopLight === 'green') {
    console.log('Go!');
}  else {
    console.log('Caution, unknown');
}

if/else if/else statements are read from top to bottom, so the first condition that evaluates to true from the top to bottom is the block that gets executed.

Switch Keyword

A switch statement provides an alternative way to write the else if statement, with a syntax that is easier to read and write. example:

let stopLight = 'yellow';
switch (stopLight) {
    case 'red' :
      console.log('Stop!');
      break;
    case 'yellow' :
       console.log('Slow down');
       break;
    case 'green' :
       console.log('Go!');
       break;
    default :
       console.log('Caution, unknown');
       break;
}
  • The switch keyword initiates the statement and is followed by ( ... ), which contains the value that each case will compare. In the example, the value or expression of the switch statement is stopLight.
  • Inside the block, { ... }, there are multiple cases. The case keyword checks if the expression matches the specified value that comes after it. The value following the first case is 'red'. If the value of stopLight equaled 'red', that case‘s console.log() would run.
  • The value of stopLight is 'yellow', so the second case runs— 'Slow down' is logged to the console.
  • The break keyword tells the computer to exit the block and not execute any more code or check any other cases inside the code block. Note: Without the break keyword at the end of each case, the program would execute the code for all matching cases and the default code as well. This behavior is different from if/else conditional statements that execute only one block of code.
  • At the end of each switch statement, there is a default statement. If none of the cases are true, then the code in the default statement will run.

Let use a conditional statement to provide a solution to some javaScript problems.

Task

Complete the getGrade(score) function, It has one parameter: an integer,score , denoting the number of points Julia earned on an exam. It must return the letter corresponding to her grade according to the following rules:

  • if 25 < score <= 30 then grade = A
  • if 20 < score < 25 then grade = B
  • if 15 < score < 20 then grade = C
  • if 10 < score < 15 then grade = D
  • if 5 < score < 10 then grade = E
  • if 0 <= score < 5 then grade = F

Solution

function getGrade(score) {
    let grade;
    if (0 <= score && score <= 5) {
        grade = "F";
    } else if (5 < score && score <= 10) {
        grade = "E";
    } else if (10 < score && score <= 15) {
        grade = "D";
    } else if (15 < score && score <= 20) {
        grade = "C";
    } else if (20 < score && score <= 25) {
        grade = "B";
    } else if (25 < score && score <= 30) {
        grade = "A";
    } else {
      grade = "Did not take test!"
    }
    return grade;
}
console.log(getGrade(11));
// output : D.

Good, now that we've seen the if...else and else if in action, let see how the switch statement works.

Task

Complete the getLetter(s) function in the editor. It has one parameter: a string, s, consisting of lowercase English alphabetic letters (i.e., a through z). It must return A, B, C, or D depending on the following criteria:

  • If the first character in string s is in the set {a, e, i, o, u}, then return A.
  • If the first character in string s is in the set {b, c, d, f, g}, then return B.
  • If the first character in string s is in the set {h, j, k, l, m}, then return C.
  • If the first character in string s is in the set {n, p, q, r, s, t, v, w, x, y, z}, then return D.

Solution

function getLetter(s) {
    let letter;
   switch (s.charAt(0)) {
        case("a"):
        case("e"):
        case("i"):
        case("o"):
        case("u"):
            letter = "A";
            break;
        case("b"):
        case("c"):
        case("d"):
        case("f"):
        case("g"):
            letter = "B";
            break;
        case("h"):
        case("j"):
        case("k"):
        case("l"):
        case("m"):
            letter = "C";
            break;
        default:
            letter = "D";
            break;
    }
    return letter;
}
console.log(getLetter("adfgt"));
// output : A

That is how coditional statements are use to solve problems.

Resources

Top comments (0)