- Overview
- Transcript
4.2 Switch Statements
Similar to an if is the switch statement, which allows us to take a different code path based on the value of something. I’ll show you how it works in this lesson.
Syntax
switch
case
break
default
1.Introduction2 lessons, 07:42
1.1Introduction02:12
1.2Setup05:30
2.Language Fundamentals8 lessons, 1:00:53
2.1Variables06:33
2.2Data Types11:28
2.3Arithmetic, Assignment, and Comparison Operators10:24
2.4Unary, Logical, Comma, and Spread Operators09:02
2.5Operator Precedence03:50
2.6Reserved Words04:17
2.7Strict Mode04:34
2.8Functions10:45
3.Data Structures5 lessons, 22:52
3.1Arrays04:29
3.2Objects04:30
3.3Sets04:57
3.4Maps04:21
3.5Weak Maps and Weak Sets04:35
4.Controlling Program Execution7 lessons, 37:06
4.1Conditionals07:49
4.2Switch Statements04:41
4.3The For Loop06:39
4.4The `for .. in` Loop05:17
4.5The `for .. of` Loop04:02
4.6Iterators05:03
4.7While Loops03:35
5.Using JavaScript13 lessons, 1:44:36
5.1Working With Strings09:32
5.2Template Literals05:46
5.3Working With Numbers06:57
5.4Working With Arrays12:53
5.5Iterating and Transforming Arrays07:33
5.6Working With the Object Type13:55
5.7Object Literal Extensions06:45
5.8Working With Object Instances06:45
5.9Getters and Setters05:00
5.10Custom Objects11:28
5.11The `Math` API04:54
5.12Working With Dates and Times08:10
5.13The `Array` Constructor04:58
6.Functions8 lessons, 56:07
6.1The `this` Object06:15
6.2Working With Functions10:11
6.3Scope07:37
6.4Arrow Functions06:59
6.5Generator Functions08:13
6.6Closures05:00
6.7Prototypes06:26
6.8Default and Rest Parameters05:26
7.Miscellaneous6 lessons, 52:39
7.1Destructuring Assignments08:09
7.2AJAX08:30
7.3Regular Expressions10:51
7.4More About Regular Expressions08:38
7.5Classes06:48
7.6ES Modules09:43
8.Working With the DOM6 lessons, 37:39
8.1Selecting HTML Elements05:02
8.2Manipulating HTML Elements07:40
8.3DOM Traversal05:25
8.4Adding and Removing Elements04:45
8.5Creating Elements and Other Nodes04:39
8.6DOM Events10:08
9.Web APIs4 lessons, 17:41
9.1The Selector API03:03
9.2Geolocation05:29
9.3Web Storage05:24
9.4Web Workers03:45
10.Asynchronous JavaScript5 lessons, 26:23
10.1Promises09:52
10.2Promise Chaining05:11
10.3The async Keyword03:21
10.4The await Keyword04:04
10.5More About async and await03:55
11.Conclusion1 lesson, 00:43
11.1Conclusion00:43
4.2 Switch Statements
Hi folks, in this lesson we're going to cover the switch statement which is an alternative to the if statement in that it consists of a series of branches that are executed depending on whether a condition is met. When an if else statement begins to get too large and has many branches, it can be useful to change it to a switch statement instead. A switch statement can perform faster than an equivalent if, and some argue that the construct is more readable. Another differentiator between if and switch is that if is normally used with boolean or truthy and falsey conditions, whereas switch statements can be used with other values like strings. The syntax for a switch statement is fairly straight-forward. Let's look at a simple example. So, first of all, we've declared a variable called switcher which has the string value two. This isn't part of the switch statement, but we will use it in conjunction with the switch statement. So we start out with the reserved word switch, followed by an expression in parentheses. We'll use the switcher variable as the condition to switch on. We can now add cases for what we expect the switching variable, in this case, the variable switcher, to match. The switch block as a whole is surrounded by curly brackets, but the individual case statements within it are not. To define a case block, we use the keyword case, followed by the value that we expect the switch variable to equal. In this case block, we can just log a message to the console. It's very important to end case blocks with the break keyword. We'll come back to that in just a moment. So let's add another case now. And let's just add one more case block. So our switch statement consist of three separate case blocks, let's run it in a browser and see what happens. In these case, we see the message the value was two. Because the variable that we are switching on, the switch variable, contains the string two. So that matches our second case block. So I mentioned that it was important to always use the break keyword. Let's see what happens if we don't. This time we see two log messages, both the second and third. This is why it is very important to always use the break keyword at the end of each case. If we don't, then program execution falls from the case that gets matched into all cases below it. So if we had cases for four, five, six and so on and so forth, all of those would be logged. That's why the break statement is very important. As well as providing cases for particular values of the expression, we can also add a default clause that will be executed if none of the other cases match. And now let's just change our switcher so it doesn't match any of the cases. And let's go back to the browser. We can see that in this case, the default block was executed because none of the other cases match. So this is a bit like the else block at the end of an if block. So, in this lesson, we looked at the switch statements, which works in a similar way to the if else statement that we looked at in the last lesson. The difference is that this construct is able to conditionally execute one or more blocks based on any type of value rather than true or false conditions, like with the if statement. In the next lesson, we can move on to look at loops, starting with the for loop. Thanks for watching.