Chaining of Array Methods in JavaScript - GeeksforGeeks

09 Jul, 2020
There are some methods in JavaScript that can loop through the array. We already have a knowledge about these array methods.
Filter method ( filter())Map method ( map())Reduce method ( reduce())Find method ( find())Sort method ( sort())
Filter method ( filter())
Map method ( map())
Reduce method ( reduce())
Find method ( find())
Sort method ( sort())
We will learn how to chain all the array methods together.
Example:
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 }];
We want to do two things.
Filter those elements whose price is greater than 100 using filter() method.Map those elements to a new array with a new sale price(50% off).
Filter those elements whose price is greater than 100 using filter() method.
Map those elements to a new array with a new sale price(50% off).
Example:
<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>
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:
<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>
Output:
Conclusion:
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.Since the filter method returns an array we can chain it to the map method which works on an array and vice-versa.This process can be applied to all the array methods which makes the code concise.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.
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.
Since the filter method returns an array we can chain it to the map method which works on an array and vice-versa.
This process can be applied to all the array methods which makes the code concise.
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.
javascript-basics
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Difference Between PUT and PATCH Request
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills