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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.4 The `for .. in` Loop

While a classic for loop is used for iterating arrays, a for .. in loop is used to iterate objects.

Syntax

  • for .. in

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.4 The `for .. in` Loop

Hi folks, in this lesson we're going to continue looking at loops, this time focusing on the for in loop. As we saw in the last lesson, the regular for loop is useful for iterating the values in an array. The for in loop is useful for iterating the values inside an object instead. The for in loop has a much simpler structure than the basic for loop. With this loop, we also start out with the reserved word for and a set of parentheses. But inside the parentheses, we just have a single expression. Let's take a look at an example. So let's recap the syntax briefly. We start out with the for keyword. We then have an expression within parentheses. And lastly we have a block which will be executed for each property in the object that's being iterated. So this time the expression inside parenthesis is much simpler. We simple declare a new variable, in this case called prop, and then use the in keyword followed by the object that we'd like to iterate. Inside the block, we can add a simple console.log, which shows the value of the prop variable on each iteration of the loop. And also uses the prop variable with square bracket notation to extract each value from the object. Let's just take a look at the output in the browser, and we see the three key names, and the three values. On each iteration of the loop, the variable defined within parenthesis has the value of one of the keys in the object. And the block of expressions will be invoked for each key value pair within the object. With this type of loop, we don't need to specify or maintain a counter variable manually, JavaScript takes care of that for us. For in loops are only able to iterate over properties that are marked as enumerable. When we create an object literal, like we have done here, all of the properties that we specify are enumerable. But there are ways to define object properties as non-enumerable, and we'll look at that later in the course. Just be aware that the for loop will only iterate innumerable properties. However, it is possible for objects to inherit enumerable properties from other objects. So there is a simple check that we should always perform inside the body of a for loop. So in this example, the object literal that we've defined in the variable obj has inherited a method called hasOwnProperty. And this is used to check that the property that we're currently iterating actually belongs to the object. The hasOwnProperty method itself is non-enumerable, so it doesn't get logged out in the for loop. But there are situations were enumerable properties do get inherited, even by simple object literals. So it's very common to see this hasOwnProperty check inside the body of for loops. Another difference between for loops and for in loops is that with for loops, an array's elements are accessed sequentially. From the 0th index to the last index. For in loops, however, do not guarantee the order in which properties are accessed. This means that if you use the for in loop with an array rather than an object, the loop may not access the array items in the correct sequential order. And that's the primary reason why we should always use a for loop with arrays, and a for in loop with objects. So in this lesson we looked at the for in loop which is used to iterate all of the enumerable properties within an object. We looked at the structure of the loop, and saw how to perform a hasOwnProperty check to ensure that we are only working with the object's own properties and not any that it has inherited. In the next lesson, we'll focus on the newest type of loop in JavaScript, the for of loop. Thanks for watching

Back to the top