AppDividend
Latest Code Tutorials

Javascript Switch Statement Tutorial With Example

0 125

Get real time updates directly on you device, subscribe now.

Javascript Switch Statement Tutorial With Example is today’s topic. In a programming language, The switch statement is used to perform different actions based on various conditions. You can use multiple if…else…if statements, but it is a little bit cumbersome instead you can use the switch statement to execute the code based on conditions. In one function, you can handle multiple conditions using a switch statement.

The switch statement which handles this situation precisely, and it does so more efficiently than repeated if…else if statements.

Javascript Switch Statement Tutorial

The syntax for a switch statement in javascript is following.

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

This is how a switch statement works:

  • The switch expression is evaluated once at the beginning.
  • The value of the expression is compared with the other values of each case in a switch statement.
  • If there is a match found, the associated block of code is executed.

Let us take an example.

// app.js

const ps4Game = 'Spider-Man 2018 video game';
switch (ps4Game) {
case 'FIFA 19':
	console.log('FIFA 19 is good playstation game');
	break;

case 'Assassin\'s Creed Odyssey':
	console.log('Assassin\'s Creed Odyssey is better game');
	break;

case 'Spider-Man 2018 video game':
	console.log('Spider-Man 2018 video game is best Playstation Video Game');
	break;

default:
	console.log('Sorry, we are out of ' + ps4Game + '.');
}

See the output in the console.

 

Javascript Switch Statement Tutorial With Example

The switch statement first evaluates its expression. It then looks for the first case whose expression evaluates to the exact value as the result of the expression using the strict comparison === and transfers the control to that case clause, executing the associated statements. If multiple cases match found, the first case that matches is performed, even if the cases are not equal to each other.

If there is no match case clause found, the program looks for an optional default clause, and if found, then it transfers the control to that case clause and executes the associated statements.

If no default clause, then the program continues execution at the statement following the end of the switch. By the convention of the switch statement, the default clause is the last clause, but it does not always to be so.

An optional break statement associated with each case clause label ensures that the program breaks out of switch once when the matched statement is executed and continues execution at the statement following switch. If the breaks statement is omitted, then the program continues execution at the next statement in the switch statement.

Switch statement multiple cases in JavaScript

Let see the scenario where we execute multiple cases.

// app.js

const ps4Game = 'Spider-Man 2018 video game';
switch (ps4Game) {
case 'FIFA 19':
	console.log('FIFA 19 is good playstation game');

case 'Assassin\'s Creed Odyssey':
	console.log('Assassin\'s Creed Odyssey is better game');

case 'Spider-Man 2018 video game':
	console.log('Spider-Man 2018 video game is best Playstation Video Game');
	
case 'Fortnite':
	console.log('Fortnite video game is best multiplayer Playstation Video Game');

default:
	console.log('Sorry, we are out of ' + ps4Game + '.');
}

In the above example, we have used the fall-through feature of the switch statement. A matched case will run until a break, or the end of the switch statement is found. The output is following.

 

Switch statement multiple cases in JavaScript

The above method takes advantage of the fact that if there is no break below the case statement, it will continue to execute the following case clause statements regardless if the case meets the criteria.

Block-scope variables within switch statements

With the support of ES6 made available in the most modern browsers, there will be cases where you do want to use let and const statements to declare block-scoped variables. Let us see the following example in action.

// app.js

const frameworks = 'Django';
switch (frameworks) {

case 'Angular': {
	let language = 'JS';
	console.log(language);
	break;
}
case 'Laravel': {
	let language = 'PHP';
	console.log(language);
	break;
}

case 'Django': {
	let language = 'Python';
	console.log(language);
	break;
}

default: {
	console.log('Empty action received.');
	break;
}
}

The above code will now output Python in the console as it should, without any errors at all.

 

Block-scope variables within switch statements

Here, we can use one variable to multiple cases because we are wrapping our case statements with brackets. Otherwise, we get an error like Uncaught SyntaxError: Identifier ‘message’ has already been declared.

Finally, Javascript Switch Statement Tutorial With Example is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.