Working with Objects in Arrays

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