TIL17 - JS - Conditionals

1. If

Syntax:

if (conditional) {
  code block;
}

2. If.. Else

Syntax

if (conditional) {
  code block;
} else {
  code block;
}

3. Comparison Operators

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

4. Logical Operators

• && and
• || or
• ! not

aka boolean operators

5. Truth vs. Falsy

If all you want to do is check whether a variable exists with a valid value, rather than check whether the variable has a specific value, then you can just input the variable name as the condition

Truthy case
> ex)

let myVar = 'exists!'
if (myVar) {
  console.log('the variable 'myVar' exists');
}

In the above code, the if statement would evaluate to true and thus 'the variable 'myVar' exists' will be printed to the console since myVar is a declared variable with a valid value assigned to it.


In this case, the value of myVar ('exists!') is a "truthy" value, and thus evaluates to true in conditionals.

Falsy case
Then what values are falsy?

• 0
• '', "" (empty strings)
• null
• undefined
• NaN (Not a Number)

6. Variable Assignment using Logical Expression

You can combine the knowledge of truthy/falsy values with the || logical operator to express if/else conditional statement in a short-hand notation.

Syntax

let variableName = first condition || second condition

> ex) in the following example, if the username is defined, the customer variable would be "username"; otherwise, it would be assigned "guest"

let customer;
if (username) {
  customer = username;
} else {
  customer = 'guest';
}

above code can be re-written in the following short-hand form:

let customer = username || 'guest'

The || operator checks the left side condition first. The second condition is evaluated only if the first condition is false. Such evaluation method in the boolean operator semantics is referred to as short circuit evaluation.

So if the first condition (username) evaluates to true, the customer variable is assigned the actual value of username. Otherwise, the || expression then checks the right side condition, in which case the customer variable would be assigned the value of the second condition ('guest'), which is a truthy value.

> ex2)

let device = '';
let yourDevice = device || 'iPhone';
console.log('You can use ${yourDevice} to view this page!');

above example would print:
You can use iPhone to view this page!
because the device variable is assigned an empty string, which is a falsy value. This would assign the value 'iPhone' to the yourDevice variable according to the logical expression device || 'iPhone'

7. Ternary Operator

The if..else statement can be also written in a short-hand form using ternary operator

Syntax

condition ? first expression : second expression;

> ex)

let isOpen = true;
if (isOpen) {
  console.log('Welcome to the store!');
} else {
  console.log('We are currently closed!');
}

above if..else statement can be re-written using ternary operator as follows:

isOpen ? console.log('Welcome to the store!') :
console.log('We are currently closed!');

the above expression

• starts with the condition isOpen, followed by the ? notation
• two expressions follow, separated by the : notation
• if the condition isOpen evaluates to true, the first expression is executed (print Welcome to the store!)
• if the condition isOpen evaluates to false, the second expression is executed (print We are currently closed!)

8. Else if

The if.. else statements are binary expressions - the condition evalues to either yes or no (true or false)

Adding the else if statements to the if.. else allows for checking multiple conditions

Syntax

if (condition) {
  code block;
} else if (condition) {
  code block;
} else {
  code block;
}

9. Switch Statement

Instead of using else if statements, you can use switch statements

Using the switch statement can be simpler

Syntax

switch (variableName) {
  case conditionalvalue1:
    code1;
    break;
  case conditionalvalue2:
    code2;
    break;
  case conditionalvalue3:
    code3;
    break;
  ...
  default:
    codedefault;
    break;
}

• start with the switch keyword
• inside the (), write the variable whose value you want to check
• in the code block, for each case you are checking, write case keyword and then the value that the variable should match, followed by :
• then write the code that should execute if this case is true
• end the case code with the break keyword
• add as many cases to check as needed
• the last 'case' is the default case, which should execute if none of the above cases are true

> ex)

let finalPosition = 'first place'
switch (finalPosition) {
  case 'first place':
    console.log('You won gold medal');
    break;
  case 'second place':
    console.log('You won silver medal);
    break;
  case 'third place':
    console.log('You won bronze medal);
    break;
  default:
    console.log('No medal awarded');
    break;
}
// Outcome: You won gold medal