JavaScript Conditional Branching

Conditions are boolean values , true or false. It is true if it meets the requirement, false otherwise. That is expressions (conditions) are evaluated to either true or false.

There are methods to check for a truthy condition:

• If statement;
• if..else statement;
• else if statements;
• switch statements;
• ternary statements;

If statement

The if statement checks if a condition (...) is true. If true, the statements in a block scope get executed.

Syntax:

if (condition) {
    statement1;
    statement2;
         .
         .
    statementN;
}

The condition must be true for the statements 1 to N to be executed.

Below is an example:

if (true) {
    console.log('statement will be executed'); 
// statement will be executed
}

Truthy values include true, '...', and numbers except 0.

The code snippet above can be rewritten as shown below:

if (1) {
    console.log('statement will be executed'); 
// statement will be executed
}

For a falsy condition, statements are not executed.

if (false) {
    console.log('statement will not be executed'); // no output
}

Falsy values are false, 0, '', null, undefined, NaN.

The code snippet above can be rewritten as shown below:

if (0) {
    console.log('statement will be executed'); // no output
}

else if statements

It is possible to have multiple false conditions and one truthy condition.

When there are multiple conditions to choose from, only the first correct truthy condition gets to execute the statement.

const num = 25;

if (num > 26) {
  console.log('Yes!');
} else if (num > 21) {
  console.log('I think so'); // I think so
} else if (num > 22) {
  console.log('I think so too');
} 

Because a condition was already true (25 > 21), other truthy options get ignored (25 > 22).

else statement

The else statement is also called the default statement because it gets executed when other options (if and else if statements) are false.

const num = 25;

if (num > 26) {
  console.log('No!');
} else if (num < 21) {
  console.log("I don't think so");
} else if (num < 22) {
  console.log("I also don't think so too");
} else {
  console.log('Yes!'); // Yes
} 

switch statements

The switch statement is an alternate method to if and if..else if statements.

Below is an alternative, but the easier way of writing if...else if statements:

const num = 25; 

switch (num) {
  case 26: 
    console.log('No!');
    break;
  case 21:
  case 22:
  case 23:
  case 24:
    console.log("I don't think so");
    break;
  default:
    console.log('Yes!'); // Yes!
}

The break keyword breaks from the current case if it's false.

Ternary Conditional Operator

Ternary operator ? has three operands around it. It is the best alternative to the if...else statement.

Syntax:

condition ? true : false; 
// or
condition ? value1 : value2;

Operands are:

• condition,
• true, and
• false

See the example below:

const age = 28;

const checkAge = (age > 23) ? 'Yes!' : 'No!';
console.log(checkAge); // Yes!

The ternary conditional operator can also replace the if..else if statements.

const age = 28;

const checkAge = (age < 10) ? 'Not at all!' : 
(age < 10) ? "I don't think so!":
(age > 26) ? "Yes!":
'else the above options are false';

console.log(checkAge); // Yes!

Conditions with single statements

For conditions with single statements, the curly braces {} can be omitted.

const age = 20;

if (age < 5) {
  console.log('No!');
} else {
  console.log('Yes!'); // Yes!
}

Below is the same code snippet above but shorter:

const age = 20;

if (age < 5) console.log('No!');
else console.log('Yes!'); // Yes!

For better code readability, use cure braces always (optional).

Happy Coding!!!

TechStack Media | Bluehost

• Get a website with a free domain name for 1st year and a free SSL certificate.
• 1-click WordPress install and 24/7 support.
• Starting at $3.95/month.
• 30-Day Money-Back Guarantee.