Nested Data and Additional Exploration

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