"Build a Simple PHP Application" was retired on March 31, 2016. You are now viewing the recommended replacement.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Array Iteration Methods

Well done!

You have completed JavaScript Array Iteration Methods!

Sign up for Treehouse Back to Library

Combining filter() and map()

4:13 with Joel Kraft

You can combine filter() and map() to clean an array of unwanted values before transforming the leftover items. Let's work with some examples in this video.

Snippets from the Video

const userNames = ['Samir', 'Angela', 'Beatrice', 'Shaniqua', 'Marvin', 'Sean'];

    // Result: [{name: 'Samir'}, {name: 'Shaniqua'}, {name:'Sean'}];

const users = [
  {name: 'Samir', age: 27},
  {name: 'Angela', age: 33},
  {name: 'Beatrice', age: 42},
  {name: 'Shaniqua', age: 30},
  {name: 'Marvin', age: 23},
  {name: 'Sean', age: 47}
];

    // Result: ['Angela', 'Beatrice', 'Shaniqua', 'Sean'];

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Let's combine filter and map with arrays. 0:00
    This can be useful when you want to remove some elements before transforming 0:03
    the remaining elements in some way. 0:07
    For example, here's the list of names in an array. 0:10
    Let's take only the ones starting with the letter S and create an array of objects. 0:13
    Each object should have one property, 0:19
    name, which points to the string value of the username's array. 0:22
    Here's what we want to construct. 0:27
    Since you've already seen these two methods together, pause the video and 0:29
    see if you can work out how to create this array. 0:33
    To solve this, I first created a new variable, users. 0:38
    And I set it equal to userNames. 0:48
    And we wanted to filter and then map. 0:53
    Filter's callback will receive each name. 1:05
    So I'll call the parameter, name. 1:08
    It needs to return true, only when the name starts with S. 1:13
    So I'll return the expression name, charAt(0) 1:18
    equals capitol S, then 1:25
    the array the filter returns, contains name strings like the original array. 1:31
    So I'll use name, as the parameter as well. 1:36
    I want to return an object now, so 1:43
    I will write an object literal with name as 1:47
    the property, setting an equal to name. 1:52
    There is an issue that pertains to arrow functions, 1:57
    Because they use curly braces to surround their function bodies, the arrow 2:00
    function doesn't know this is an object literal, which also uses curly braces. 2:04
    I need to surround this object with parenthesis. 2:10
    That's just to tell JavaScript 2:14
    that I want to return this object literal from the callback. 2:18
    Because the variable name is the same as the property I wanna create, 2:22
    I can also use this property shorthand. 2:27
    Now I'll log users to the console. 2:31
    And I'll save this, and I'll run it. 2:42
    You can see, I have the three objects in an array now and they all start with S. 2:47
    Let's try one more. 2:53
    I'm gonna replace this code with a new object, 2:56
    and this is just all those users with ages now. 3:01
    And you can copy this from the teachers notes if you'd like to. 3:07
    Now, see if you can filter and map to create an array of name strings. 3:13
    The names should be the users 30 years and over. 3:18
    Pause the video and give it a shot if you want to. 3:22
    I'm going to paste my solution in now, so if you want to pause the video, 3:27
    this is your last chance. 3:31
    As you can see, I first filtered the user's array, 3:37
    returning true only for users who had ages greater than or equal to 30. 3:41
    Then I mapped over that array of objects returning only the usernames. 3:46
    If I save this and run it. 3:52
    You can see I end up with an array of strings of 3:58
    usernames with ages over or equal to 30. 4:02
    In the next video, 4:06
    let's combine filter with reduce to solve some common problems with data. 4:07

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up