Understanding Switch Statement In Javascript
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-08-09 00:44:30

Hello, I'm [Aya Bouchiha](developer.aya.b@gmail.com), today, we're going to discuss switch statements in Javascript.

The switch is a statement used to perform different operations based on multiple conditions (cases)

## Writing a switch statement

```javascript
switch (expression) {
	case 'value_1':
		// do something
		break;
	case 'value_2':
		// do something
		break;
	case 'value_3':
		// do something
		break;
	default:
	// do something if the varaibale does not match any case
}
```

-   we need to know that if the variable matches multiple cases, the code block of the first matched case will be executed.
-   **case**: we use it to match against an expression, If it matches, the code block of this case will be executed. If It is not, The default code block will be executed.
-   **default**: is used to perform some operations if the variable does not match any case of the specified cases.
-   **break** (optional): is a statement associated with each case that orders the program to breaks out of the switch statement.

Example 1:

```javascript
const country = 'Morocco';

switch (country) {
	case 'USA':
		console.log('Washington');
		break;
	case 'Morocco':
		console.log('Rabat');
		break;
	case 'Egypt':
		console.log('Cairo');
		break;
	case 'Spain':
		console.log('Madrid');
		break;
	case 'France':
		console.log('Paris');
		break;
	default:
		console.log('your country is not in our list');
}
```

on this code above, the program will log **Rabat**, because the given country is equal to **Morocco**.

```javascript
Rabat
```

Example 2

Let's delete all break statements;

```javascript
const country = 'Morocco';

switch (country) {
	case 'USA':
		console.log('Washington');
	// break;
	case 'Morocco':
		console.log('Rabat');
	// break;
	case 'Egypt':
		console.log('Cairo');
	// break;
	case 'Spain':
		console.log('Madrid');
	// break;
	case 'France':
		console.log('Paris');
	// break;
	default:
		console.log('your country is not in our list');
}
```

Output:

```
Rabat
Cairo
Madrid
Paris
your country is not in our list
```

We observe that the code blocks of the matched case which is Morocco, and the rest cases including the default one are executed due to forgetting to write break statements.

Example 3

Let's remove break statements that are only inside Morocco's and Egypt's case, Let's see what will happen :)

```javascript
const country = 'Morocco';

switch (country) {
	case 'USA':
		console.log('Washington');
		break;
	case 'Morocco':
		console.log('Rabat');
	// break;
	case 'Egypt':
		console.log('Cairo');
	// break;
	case 'Spain':
		console.log('Madrid');
		break;
	case 'France':
		console.log('Paris');
		break;
	default:
		console.log('your country is not in our list');
}
```

Output:

```
Rabat
Cairo
Madrid
```

We observe that the code blocks of Morocco's and Egypt's cases are executed because of not writing a break statement.

### conclusion 1

-   If the break statement is not written, the code block of the matched case and the rest cases including the default one, will be executed until the program finds a break statement.

Example 4:

If we wrote the same code of example 3 and we replaced Spain's break statement with a return statement, the program will log the same thing.

```javascript
const country = 'Morocco';
switch (country) {
	case 'USA':
		console.log('Washington');
		break;
	case 'Morocco':
		console.log('Rabat');
	// break;
	case 'Egypt':
		console.log('Cairo');
	// break;
	case 'Spain':
		console.log('Madrid');
		return;
	case 'France':
		console.log('Paris');
		break;
	default:
		console.log('your country is not in our list');
}
```

Output:

```
Rabat
Cairo
Madrid
```

### Conclusion 2

-   break statement is not required if the code block contains a return statement.

Example 5:

```javascript
const price = 60;

switch (price) {
	case 100:
		console.log('you have to pay 100$');
		break;
	case 80:
		console.log('you have to pay 80$');
		break;
	case 60:
		console.log('you have to pay 60$');
		break;
	default:
		console.log("I don't know !");
}
```

Output:

```
you have to pay 60$
```

In this example, the program logged "you have to pay 60$" because the price is 60. Let's do a small change by replacing the price cases with a string without changing the value, just adding a double or single quote :)

```javascript
const price = 60;

switch (price) {
	case '100':
		console.log('you have to pay 100$');
		break;
	case '80':
		console.log('you have to pay 80$');
		break;
	case '60':
		console.log('you have to pay 60$');
		break;
	default:
		console.log("I don't know !");
}
```
Output:
```
I don't know!
```

We observe that the code block of the default case is executed instead of the third case code block due to changing the datatype.

### conclusion 3

Switch cases use strict comparison which is ===, So the cases values should be the same type of the given expression.


#### Summary

- **Switch** statement use strict comparison.
-   **case**: we use it to match against an expression, If it matches, the code block of this case will be executed. If It is not, The default code block will be executed.
-   **default**: is used to perform some operations if the variable does not match any case of the specified cases.
-   **break** (optional): is a statement associated with each case that orders the program to breaks out of the switch statement. In addition, a break statement is not required if the code block contains a return statement.
- If the break statement is not written, the code block of the matched case and the rest cases including the default one, will be executed until the program finds a break or a return statement.


Hope you enjoyed reading this post

## Suggested Posts

+ [Youtube Courses, Projects To Learn Javascript](https://dev.to/ayabouchiha/youtube-courses-projects-to-master-javascript-3lhc)

+ [You Complete Guide To Set Object In Javascript](https://dev.to/ayabouchiha/you-complete-guide-to-set-object-in-javascript-12gc)

+ [All JS String Methods In One Post!](https://dev.to/ayabouchiha/all-js-string-methods-in-one-post-4h23)

## References

+ [www.w3schools.com](www.w3schools.com)
+ [www.developer.mozilla.org](www.developer.mozilla.org)

To Contact Me:

email:developer.aya.b@gmail.com

telegram: [Aya Bouchiha](https://t.me/AyaBouchiha)

Hope you enjoyed reading this post :)