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
As a JavaScript developer, you'll often work with arrays of objects. Get some practice using the methods you've learned with arrays of objects.
Snippets from the Video
const users = [
{name: 'Samir'},
{name: 'Angela'},
{name: 'Beatrice'}
];
Arrays can hold any JavaScript value
in them, like objects for example.
0:00
Why would this be useful?
0:05
Arrays are great ways to bundle different
pieces of data about one thing.
0:07
For instance,
if you are dealing with a user
0:12
you might want to know the users name,
age, and birthday.
0:15
In JavaScript, you'd need three different
data types to store these details,
0:18
a string, number and a date.
0:22
With objects, you can bundle these
together and add labels to each piece of
0:25
data, or strings, so
you can use to ask for the data later.
0:28
If you are working with users though,
0:32
you will need to be able
to store many of them.
0:34
To keep track of all the user objects,
you might put them into an array.
0:37
I have an array of user objects here.
0:41
You'll often see objects like
this broken onto their own lines.
0:44
These just have one property.
0:48
A name property.
0:50
For a challenge, pause the video and
0:52
see if you can remove the username
Samir from this array using filter.
0:54
I'll create a new variable below this one,
called newUsersArray.
1:02
And I set it equal to users.filter and
1:11
then user will be the parameter.
1:16
and the user parameter to the call-back
will be an object since that's what this
1:24
array contains.
1:28
We'll need to check the name property and
1:30
return false only if it
hold the string "Samir",
1:34
so user.name does not equal Samir.
1:39
I'll log this to the console, And save it.
1:45
And then we'll run the file.
1:55
And it works as expected.
1:59
Now, let's add an age
property to each object.
2:02
And I'll make these different ages.
2:18
Now see if you can use map
to produce an array of
2:25
strings that tell how old each user is,
like this.
2:30
Pause the video if you wanna
work this out yourself.
2:44
Starting from the code we already have,
I'll just replace filter with map.
2:51
User objects are still passed
to this call-back, but
2:58
now we want to construct and
return a string.
3:01
I'll use a template literal.
3:05
And I'll just copy this text as a guide.
3:11
And then I'll replace
the name with a placeholder.
3:17
And we'll use user.name here.
3:23
And for the age,
3:27
we'll interpolate user.age.
3:30
Running this now.
3:35
We get the result we expected.
3:40
Now let's stretch what you've learned so
far a little further.
3:44
Remember how I said you can use reduce to
combine array elements into one value?
3:48
The value it returns doesn't need to be
a primitive, like a string or number,
3:54
it can be an object or even another array,
depending on the needs of your program.
3:59
For this challenge, see if you can
use reduce to create a new object
4:04
where the user's names become properties,
whose values are their ages.
4:09
I'll show you what I mean.
4:14
The new object should look like this.
4:16
So each of the user's name.
4:22
Values are the properties
of this new object, and
4:25
each age is the value of that property.
4:28
And I'll just comment this out, so
it doesn't interfere with the program.
4:33
Go ahead and
see if you can work this out on your own.
4:40
It´s okay if you got stuck,
I´ll show you how I would do this now.
4:47
Again, I´ll start with a code we already
have here, replacing map with reduce.
4:52
In addition to the user object,
reduce takes an accumulator parameter,
5:00
which will be the object we want to build.
5:04
I'll name it users object.
5:07
And I'll get rid of this
function body here.
5:14
And I'll also want to initialize
this with a new object.
5:20
And this will be passed into the
usersObject each time through the array,
5:26
and we'll add the properties
onto this new object.
5:30
In the body of the callback, we'll want
to create a new property on usersObject.
5:35
The name property.
5:46
And we wanna set that to the age.
5:51
Like so.
5:58
I'm gonna change this variable
name to the usersObject,
6:01
since that's what we're ending up
with at the end of this reduce call.
6:05
And then I will also change
it in my console.log.
6:09
So I will save this and run it.
6:13
And I got an error.
6:20
It says cannot set property
'Angela' of undefined.
6:24
So reduce has made it as far as the second
element, before throwing this error.
6:29
And it's trying to add the property Angela
onto usersObject, which is undefined.
6:35
So the reason it's undefined is.
6:43
The first time through,
reduce has this initial
6:46
Object that it uses for usersObject.
6:50
And then the second time through
it doesn't have anything,
6:54
because we haven't returned
anything from our callback.
6:58
So just remember you always have to
return a value from your callback.
7:02
And I'll put usersObject.
7:07
Save that, and
down here I'll clear and run it again.
7:13
And great, we get our object with names
for properties and ages for values.
7:20
Now that we've started
working with objects,
7:27
let's use method chaining to apply more
than one action to some arrays of data.
7:29
In the next video,
we will use filter and map together.
7:35
See you there.
7:38
You need to sign up for Treehouse in order to download course files.
Sign up