Chaining of Array Methods in JavaScript

There are some methods in JavaScript that can loop through the array. We already have a knowledge about these array methods.

  1. Filter method ( filter())
  2. Map method ( map())
  3. Reduce method ( reduce())
  4. Find method ( find())
  5. Sort method ( sort())

We will learn how to chain all the array methods together.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

const products = [
  
    // Here we create an object and each
    // object has a name and a price
    { name: 'dress', price: 600 },
    { name: 'cream', price: 60 },
    { name: 'book', price: 200 },
    { name: 'bottle', price: 50 },
    { name: 'bedsheet', price: 350 }
];

chevron_right


We want to do two things.

  1. Filter those elements whose price is greater than 100 using filter() method.
  2. Map those elements to a new array with a new sale price(50% off).

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
    const products = [
  
        // Here we create an object and each
        // object has a name and a price
        { name: 'dress', price: 600 },
        { name: 'cream', price: 60 },
        { name: 'book', price: 200 },
        { name: 'bottle', price: 50 },
        { name: 'bedsheet', price: 350 }
    ];
  
    // Filters the elements with 
    // price above 100
    const filtered = products.filter(
        product => product.price > 100);
  
    const sale = filtered.map(product => {
        return `the ${product.name} is 
        ${product.price / 2} rupees`;
    });
  
    // log the sale price to console
    console.log(sale);
</script>

chevron_right


Output:

A quicker way to achieve this is by using array method chaining. All the array methods work on arrays and return arrays. So we can easily chain these methods.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
    const products = [
        { name: 'dress', price: 600 },
        { name: 'cream', price: 60 },
        { name: 'book', price: 200 },
        { name: 'bottle', price: 50 },
        { name: 'bedsheet', price: 350 }
    ];
  
    // Writing the different array methods
    // on different lines increases the
    // readability
    const sale = products
        .filter(product => product.price > 100)
        .map(product => `the ${product.name} 
            is ${product.price / 2} rupees`);
  
    document.write(sale);
</script>

chevron_right


Output:

Conclusion:

  1. The output in both the cases remains same. The second method is called chaining of array methods which makes the code a little more concise.
  2. Since the filter method returns an array we can chain it to the map method which works on an array and vice-versa.
  3. This process can be applied to all the array methods which makes the code concise.
  4. This method is not only applicable for arrays, but we can use them on strings also, as long as the methods return and work on strings. The same principle will be applied.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.