JavaScript Conditional Branching
Tags: javascript, html, node, codenewbie
Published: 2021-01-24 22:29:41

{% youtube WA9RZ5vOciE %}

---
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:
```js
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:

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

For a falsy condition, statements are not executed.

```js
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:

```js
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*.

```js
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`).

---
[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613668162316/G1zfmhxQd.png)](https://www.cssigniter.com/members/aff/go/belloosagienoah)

---
### *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.

```js
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:

```js
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:

```js
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.

```js
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.

```js
const age = 20;

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

Below is the same code snippet above but shorter:

```js
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!!!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
### 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.

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/430x288/430x288PW.png"> </a>