- Chaining Array Methods 3:37
- Method Chaining 1 objective
- Working with Objects in Arrays 7:40
- Working with Objects 1 objective
- Combining filter() and map() 4:13
- Combining filter() and map() 1 objective
- Combining filter() and reduce() 4:42
- Combining filter() and reduce() 1 objective
- Nested Data and Additional Exploration 7:25
- Array Flattening 1 objective
- Nested Data 1 objective
Preview
Video Player
00:00
00:00
Working with Objects in Arrays
7:40As a JavaScript developer, you'll often work with arrays of objects. Get some practice using the methods you've learned with arrays of objects.
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