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