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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.5 Iterating and Transforming Arrays

Arrays have so many useful methods that I had to break the array lesson into two parts! In this lesson, we continue looking at how we can work with arrays, this time focusing on methods for iterating and transforming them.

Syntax

  • forEach
  • some
  • every
  • reduce
  • map

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


5.5 Iterating and Transforming Arrays

Hi, folks. In this lesson, we're going to continue looking at arrays, this time focusing on some of the many iteration methods that arrays have. As well as being used with for and for-of loops, arrays themselves contain methods that iterate them in different ways. For basic iteration, we can use the forEach method. So the forEach method is called on an array and we pass a callback function to this method. The callback function will be invoked for each item within the array and has passed the current item each time it gets invoked. In this case, we just log it to the console. Unlike the for, or for-of loops, it's not possible to exit from a forEach loop early. It will always visit every element in the array. If we do want to only partially iterate the items in the array, we do have some other options. We could use the some method instead. The signature of the some method is similar to the signature of the forEach method. It's still a method that is called on the array instances, and it still gets passed a callback function. This callback function is passed the current from the array each time the callback gets invoked. The difference between some and forEach, is that the some method will iterate the array that it is called on until the callback function returns true. In this example, that will be on the second iteration. So let's check the browser's output this time. This time we only see two console logs. And that is because the callback function returns true when the current item equals y, and that is the second item in the array. And it's at that point that the some method stops. The some method itself will return true once it stops iterating. If the callback that we provide doesn't return true at all, the method will return false. The opposite of the some method is the every method. This method works in exactly the same way as the some method, except that it stops iterating the array when the callback function returns false. Let’s check the output for this one. This time we only see one console log. We only see one console log. Because as soon as the every method invokes the callback function for the second item, that item will not equal x. And so it will return true and the every method will stop iterating. Another useful method is the reduce method, which reduces an array down to a single value. Let's use a new array for this example. Like the other methods that we've looked at so far, the reduce method is passed a callback function. This callback function will be passed the value returned by the callback on the previous iteration, as well as the current item in the array. In this example, we just return the sum of the previous item, plus the current item. As well as passing a callback function, we also pass a second argument to the reduce method. This argument is the value that the previous argument to the callback function should have the very first time the callback function is invoked. So let's take a look at the output. So basically, what we've done is use the reduce method to sum all of the numbers in the array. One of the most powerful iteration methods that arrays have is the map method, which is used to map an array into another array. In this example, we first added an object of references which associates a letter with its equivalent in the Greek alphabet. We then have an array containing the values a, b, c. Like the callbacks past methods that we've looked at in this lesson, the callback can receive up to three arguments. The first argument is the current item. And it will also receive the index as the second argument to the callback, as well as the original array as the third argument. Although we don't actually use these in this example, they are available if you need them. So the callback function will be invoked for each item in the array that it is called on. Whatever we return from this callback, on each iteration, will end up as a new element in the new array that the map method returns. So let's take a look at the output. So we've mapped the first array, a, b, g, into a new array containing alpha, beta, gamma. So the map method takes an array and creates a new array by iterating the original array. We can modify the values from the original array and transform them or create entirely new elements for the new array, just like we did in this example. So in this lesson, we looked at some of the methods that all arrays have for iterating through the items in the array. We looked at the basic forEach method first, which simply visits each item in the array and invokes a callback function for them. We then moved on to look at some variations of this behavior such as the some and every methods, which iterate the array until the call back function returns either true or false respectively. We also saw the reduce method, which reduces the array values down into a single value. And lastly, we looked at the map method, which maps one array into another array. All of these methods can be extremely useful when working with arrays, so it's good to understand them well. In the next lesson, we can look at some of the useful properties and methods that we can access through the Object type. Thanks for watching.

Back to the top
View on GitHub