DEV Community: Azeez Rotimi Arigbabuwo

JavaScript Conditional Statements

Azeez Rotimi Arigbabuwo — Sun, 03 May 2020 15:18:46 +0000

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

VARIABLES IN JAVASCRIPT

Azeez Rotimi Arigbabuwo — Sun, 15 Mar 2020 17:27:02 +0000

VARIABLES IN JAVASCRIPT

Variable is used to label and store data in computer memory.
Variable can update information stored in variable, git reference or get information stored in a variable.
It's important to distinguish that variable is not a value, they contain value and represent them.

let and const are new keyword to declare a variable, introduced in ES6. Before that programmers can declare a variable with only the var keyword. example:

var food = 'pizza';
console.log(food); // output: pizza

let keyword signal that values can be reassigned a different value e.g

let myName = 'Azeez';
console.log(myName); //output: Azeez
myName = 'Rotimi';
console.log(myName); //output: Rotimi

var also can be reassigned in the same way.

var and let are both used for variable declaration in javascript but the difference between them is that var is function scoped and let is block scoped. example:

console.log(x);
var x=5;
console.log(x); //Output: undefined, 5

if an undeclared variable is logged to the console and later declared with var and assigned a value, it will return undefine and the value assigned to it.

an error will be returned if let is used in declaring such variable. example:

console.log(x); // output: ReferenceError: x is not defined
let x=5;
console.log(x); //Output: 5

If the let variable is declared without a value, the variable will be automatically initialized with a value of undefined example:

let myAge;
console.log(myAge); // output: undefined.

The const keyword however cannot because its constant. If you try reassigning a const variable, a TypeError, will be thrown. example:

const myCity = "Lagos";
console.log(myCity); // output: Lagos
myCity = "Ibadan";
console.log(myCity); // output: TypeError

If a const variable is not assigned any value, a SyntaxErrorwould be thrown. example:

const myAge; // output: SyntaxError

const keyword should only be used if programmers are sure it won't be reassigned or redeclared in the future.

Mathematical Assignment Operators:

This is using math operators and variable to calculate new variable and assign to a variable. example:

let goal = 2;
goal = goal + 3;
console.log(goal); // output: 5

In the above example, we declared the variable goal with the number 2 and assigning to it goal = goal + 3 increased the value of goal = 2, to 5.

goal can be reassigned by using built-in mathematical assignment operator. example:

let goal = 2;
goal += 3;
console.log(goal); // output: 5

same can be done for other math operator -, *, /, %

The Increment and Decrement Operators.

Increment operator ++ and Decrement operator -- are other mathematical assignment operators.

The Increment ++ increase the value by 1. example:

let goal = 2;
goal ++;
console.log(goal); // output: 3

The Decrement ++ decrease the value by 1. example:

let goal = 2;
goal --;
console.log(goal); // output: 1

String Concatenation with Variable

The + operator can used to combine two string values even if those value are being stored in variable. example:

let song = 'indigo';
console.log('I love ' + song + '.'); // I love indigo.

String Interpolation

With E6 we can insert, or interpolate, variable into string using template. example:

const myPet = 'cat';
console.log(`I own a pet ${myPet}.`);
// Output: I own a pet cat.

A template literal is wrapped by backticks (`).
Inside the template literal, you’ll see a placeholder, ${myPet}. The value of myPet is inserted into the template literal.
When we interpolate I own a pet ${myPet}., the output will print is the string: 'I own a pet cat.'

Typeof

The typeof operator checks the value to its right and returns or passes back, a string of the data type.

const food = 'Beans';
console.log(typeof food); // Output: string

const total = 10;
console.log(typeof total); // Output: number

const string = false; 
console.log(typeof string); // Output: boolean

other typeof include undefined, null, symbol, object.

DEV Community: Azeez Rotimi Arigbabuwo

JavaScript Conditional Statements

if Statement

else Statement

Comparison Operator

List of some comparison operators and their syntax

Logical operators

Truthy and Falsy

Ternary Operators

else if statement

Switch Keyword

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

Task

Task

Resources

VARIABLES IN JAVASCRIPT

VARIABLES IN JAVASCRIPT

Mathematical Assignment Operators:

The Increment and Decrement Operators.

String Concatenation with Variable

String Interpolation

Typeof

RESOURCES

`if` Statement

`else` Statement

`else if` statement