Next lesson playing in 5 seconds

Cancel
  • 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.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00: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.

Back to the top