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