Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Work some more advanced array problems using the methods you've learned about in this course.
Snippets from the Video
const movies = [
['The Day the Earth Stood Still', 'Superman', 'Ghostbusters'],
['Finding Dory'],
['Jaws', 'On the Waterfront']
]
// Result: ['The Day the Earth Stood Still', 'Superman', 'Ghostbusters', 'Finding Dory', 'Jaws', 'On the Waterfront']
const users = [
{
name: 'Samir',
age: 27,
favoriteBooks:[
{title: 'The Iliad'},
{title: 'The Brothers Karamazov'}
]
},
{
name: 'Angela',
age: 33,
favoriteBooks:[
{title: 'Tenth of December'},
{title: 'Cloud Atlas'},
{title: 'One Hundred Years of Solitude'}
]
},
{
name: 'Beatrice',
age: 42,
favoriteBooks:[
{title: 'Candide'}
]
}
];
// Result: ['The Iliad', 'The Brothers Karamazov', 'Tenth of December', 'Cloud Atlas', 'One Hundred Years of Solitude', 'Candide'];
Using concat to Combine Arrays
In the video we use the spread operator to combine arrays. Here's the same example using the concat array method instead:
const flatMovies = movies
.reduce((arr, innerMovies) => arr.concat(innerMovies), []);
Read more about using concat by following the link below.
MDN Resources
-
0:00
We're almost to the end with this introduction to array iteration methods.
-
0:04
Here's another common array data pattern I want to prepare you to tackle.
-
0:08
Sometimes, you can have an array of arrays, and you need to take the elements
-
0:13
out of each internal array and place them in one big array.
-
0:16
So for example, let's say I had an array of movie titles, and
-
0:21
I wanted to have all the movie titles in one big array.
-
0:24
This is commonly called flattening because you're putting the internal elements
-
0:28
all on one level.
-
0:30
In this case, we want to end up with an array, but
-
0:33
it will be a different kind of array than we have.
-
0:36
Because we have arrays, but we want strings.
-
0:39
Map won't work for this because one way or another, we'd still end up with
-
0:43
just three elements, and we need each title to be its own element.
-
0:48
Because we want to fundamentally alter the array structure, we can use reduce to
-
0:53
collect the internal array elements and place them in a new array.
-
0:58
I'll show you how.
-
0:59
First, I'll declare a variable to capture the new array.
-
1:08
Then I need to call reduce on the movies array.
-
1:14
For the callback, I want the accumulator to be a new array.
-
1:19
And I'll name each array item innerMovies.
-
1:27
I want to set a new empty array for the first iteration.
-
1:33
Inside the callback, I pull the array elements out of innerMovies,
-
1:38
which are the strings themselves, and place them in the accumulator.
-
1:43
I could do this a number of ways.
-
1:45
Arrays have a concat method for example,
-
1:48
that I could use to concatenate the inner movies array onto the accumulator array.
-
1:53
Look for details on concat in the teacher's notes.
-
1:57
I'm going to use the spread operator,
-
1:59
which places the elements of an array into another array.
-
2:02
If the spread operator is new to you, check out the teachers notes for
-
2:06
more information about them.
-
2:08
Because we have two arrays that we want to join, I'll return a new
-
2:13
array that starts with the all the elements collected inside the accumulator.
-
2:21
And ends with all the elements from innerMovies.
-
2:27
And then I will log this to the console.
-
2:36
I'll save it and run iteration.js.
-
2:42
And, movies.array.
-
2:48
I want reduce not array.
-
2:51
I'll save that.
-
2:55
Clear and run it.
-
3:00
And you can see we have an array of strings now.
-
3:04
Let me show you how to use this on a larger example.
-
3:09
Let's take our users from an earlier video.
-
3:13
What if each user wanted to track their favorite books,
-
3:16
which were kept in a user object?
-
3:20
Something like this.
-
3:24
You can copy this from the snippets in the teacher's notes below if you want to.
-
3:29
Let's say we want to create an array of all the favorite titles from every user.
-
3:34
To do this, we need to iterate over the array of customers.
-
3:38
And in each customer, iterate over the favorite books array, pulling out titles.
-
3:44
Let's walk through how to tackle this problem.
-
3:46
If you want to pause now and try to work it on your own, please do.
-
3:55
While we just worked with an array of arrays, now we have an array of objects.
-
4:00
Each object contains an array of objects.
-
4:03
As with many of these problems, this could be solved a number of ways.
-
4:07
I'll take the approach of simplifying this structure first,
-
4:11
then applying the flattening technique you just learned.
-
4:14
I'll map over the outer array, and
-
4:16
inside I'll map again to create an array of arrays.
-
4:20
Let me show you what I mean.
-
4:22
I'll start by creating a variable, books.
-
4:29
And I'll map over the users array.
-
4:34
And I'll put map on its own line.
-
4:42
In the body of the callback, we want to return an array of book titles.
-
4:46
We can do that by mapping over the favoriteBooks array, and
-
4:49
returning the titles.
-
5:06
The inner call to map returns an array of strings and
-
5:10
the outer call to map returns an array of those string arrays.
-
5:14
So we can now reduce over this array to flatten it.
-
5:19
I'll add reduce to the chain, and build up the array of strings,
-
5:23
the same way we did earlier.
-
5:49
And I'll log books to the console.
-
5:56
And save and run this file.
-
6:03
You can see we get our array of strings.
-
6:06
You'll find that the more you work with these methods,
-
6:08
the more useful they'll become.
-
6:11
You can start with a practice right after this video.
-
6:14
But first, let me show you how to find more information about
-
6:17
the methods we covered as well as other methods.
-
6:20
Let's go to the MDN page for arrays.
-
6:24
On the left, you can see all the array methods listed together.
-
6:28
But if I expand this index, you can click on iteration methods.
-
6:36
And that'll bring up all the array methods we've covered as well as some other ones.
-
6:44
>> Let's click on every, for example.
-
6:48
>> This method lets you check whether all elements meet a certain condition.
-
6:52
It returns a Boolean value.
-
6:54
Basically, this method asks if every element meets the supplied condition, and
-
7:00
returns true if so and false if not.
-
7:04
Thank you for exploring array iteration methods with me.
-
7:08
I hope you had fun learning about them, and
-
7:09
that you feel comfortable practicing them, and using them on your own from here.
-
7:14
They're powerful tools that give you a lot of control to wrangle and
-
7:18
digest array based data.
-
7:20
I hope to see you soon in a later course.
-
7:23
Til then, have fun coding!
You need to sign up for Treehouse in order to download course files.
Sign up