Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.5 The `for .. of` Loop

The for .. of loop is a new construct that allows us to iterate over the values in a collection instead of the keys. Let’s take a look at how we can use it to iterate arrays, maps, or other iterable objects.

Syntax

  • for .. of

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.5 The `for .. of` Loop

Hi, folks, in this lesson, we're going to take a look at the for of loop, which was only added to JavaScript a couple of years ago. This is similar conceptually to the for in loop that we looked at in the last lesson, except that instead of getting the keys of the object being iterated, it gets the values instead. Object in the generic term, not just object literal in the JavaScript term. Because with the for of loop, we can't actually iterate actual objects. The for of loop is used to iterate over anything that is iterable. Which is usually an array-like collection of values. True arrays are iterable, but also array-like collections of items like the arguments value inside a function, for example, are also iterable. This makes the for of loop useful if we don't know whether we'll be working with a true array or an array like object. The syntax is very similar to the for in loop, that we looked at in the last lesson. We just use the of key word instead of the in key word. We don't need to use square bracket notation with the for of loop. We can access the value directly. Let's just take a look at the output in the browser. So the for of loop can iterate any kind of iterable, not just arrays. We can also use it with maps and sets, for example. So using a set works in pretty much the same way as using an array. When we come to use a map, however, we do need to revert to square bracket notation. Because recall that, when we get the value from a map, it returns an array. And we want to get the second item in that array, which will be the value. The first item on that array that gets returned at index zero is the key name. And let's just check in the browser that the output is what we expect. And of course, we don't use the add methods with maps, we use the set method. Let's just correct that. Just like with the for loop, we can stop executing the loop at any time using the break key word. This time we see only the first item from the last example, the value a. In terms of performance, the for of loop is slightly faster than both for and for in loops. But to be honest, you would have to be using an array or object with tens of thousands of items in it to really notice the difference. So, in this lesson we looked at the for of loop, the newest of the for loops in JavaScript. We saw that it could be used with arrays or any other iterable, but not with regular objects. We saw that the syntax was almost identical to the for in loop, except that instead of working with the keys of an iterable, we are working with the values instead. In the next lesson, let's take a look at iterators and iterables in more detail. Thanks for watching.

Back to the top