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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Chaining Array Methods

3:37 with Joel Kraft

Because the map method returns an array, you can call another array method directly after it. The same is true for the filter method. This is commonly called chaining methods, because each call is like a link in a chain.

Snippets from the Video

const arr = [1,2,3];

const smallerArr = arr.filter(number => number !== 2);
const incrementedArr = smallerArr.map(number => number + 1);

console.log(incrementedArr); // => [2,4]

Removing Duplicates from an Array

To remove duplicate elements from an array, we can use filter(). Remember, the filter method provides three parameters to our callback function: the current element being processed in the array, the index of the current element being processed in the array, and the array filter() was called upon.

We can compare the index of the current element to the index of the current element in the array that filter() was called upon to determine if we've already encountered that element value. This works because the indexOf method will return the index of the first occurrence that is found in the array. So, indexes of duplicate elements will not equal the index of the first occurrence of their values.

const numbers = [1, 1, 2, 3, 4, 3, 5, 5, 6, 7, 3, 8, 9, 10];

const unique = numbers.filter(function(number, index, array) {
  return index === array.indexOf(number);
});

console.log(unique); // => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

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

    [MUSIC] 0:00
    In previous videos, I introduced you to the most common array iteration methods 0:04
    JavaScript developers use. 0:09
    You got to see how they behaved with simple array elements like strings and 0:11
    numbers. 0:15
    Arrays often contain more complex data structures like objects or 0:16
    other arrays, and that's where these method start to help you out. 0:20
    We'll take a look at some examples shortly, but 0:24
    first I want to take a closer look at the behavior of the map and filter methods. 0:27
    One of the useful features of these array methods 0:33
    is that they can be chained together. 0:35
    What I mean is that map and filter are methods of an array and 0:38
    they both return an array. 0:42
    This means you can connect or chain the methods together. 0:44
    For example, you can transform one array with map, then filter that new array. 0:47
    This lets us create very compact code that does a lot 0:53
    in only a few lines of programming. 0:56
    Let me show you what I mean, so 1:00
    far, we've been storing the results of filter and map in variables. 1:03
    Like this example here, I mentioned before that both these methods return arrays. 1:07
    This means when the JavaScript interpreter evaluates this filter method, for 1:13
    example, it becomes an array with out any 2s. 1:17
    Because the filter method returns an array, 1:21
    we can immediately call another array method on it at the end, like this. 1:24
    Now the JavaScript interpreter sees it has another task to do 1:30
    after it finishes with the filter method. 1:33
    Here we're calling map on a new array from the filter method. 1:36
    In other words the filter method takes the array we start with and removes the 2. 1:40
    Then the map method takes the array with no 2 and adds 1 to each element. 1:45
    And we end up with an array containing the numbers 2 and 4. 1:51
    As long as a method returns an array, you can call another array method on the end. 1:55
    And you can do this as much as you want. 2:00
    This pattern is common in programming, and you might hear it called method chaining 2:02
    because each method resembles a link in a chain. 2:07
    One way you could use this technique might be for 2:11
    removing the duplicates in an array of numbers before turning them into strings. 2:13
    You could start with the filter method to clean out the duplicates, 2:18
    then chain map on the end to transform the cleaned array into strings. 2:21
    By the way, if you'd like to see an example of using filter to remove 2:26
    array duplicates, see the teacher's notes. 2:30
    Because the JavaScript interpreter ignores whitespace, 2:34
    you will often see each method on a separate line like this. 2:37
    Chains like this can be easier to read and understand because you start with one 2:47
    value on the left, or top, and progress to a new value on the right, or bottom. 2:51
    You can plug methods in and 2:57
    out of the chain in a modular way, which makes the code more maintainable as well. 2:58
    For example, if I decided I didn't want to filter this array before mapping over it, 3:03
    I could just remove the line where filter is called. 3:09
    The other behavior to note here is that these methods don't affect 3:12
    the original array. 3:15
    They return a new array, because the original array remains unchained, 3:17
    it can be used in a different method chain or referred to in other ways. 3:21
    Generally, making new arrays means you have more options. 3:26
    With these points in mind, 3:30
    let's see some examples of how these methods can manipulate more complex data. 3:31

    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