Combining/Channing Array Methods in JS
Learn the Combining or Channing of the array Methods in JavaScript
1. What is Channing ??
It is basically calling methods one after another in one statement. Each method in the chain returns an object that is then used with another method and so on. As you know most of the methods of Array return back the array, methods can be chained and used consecutively to make your code more concise.
- Consider the following data :
const years = [1989, 2015, 2000, 1999, 2013, 1973, 2012]; - Using the filter and map methods on the years' array, we are creating an array of display strings for each year in the 21st century (remember: the 21st century starts with the year "2001"). Each display string should be the year followed by "A.D."
displayYears = years.filter(num => num>=2001).map(num => num + “ A.D”);
console.log(displayYears);
- The filter method will only take the years of the 21st Century and the Map
method will add A.D. at the end of the years.
output:
[“A.D.2015”, “A.D.2013”, “A.D.2012”]
2. Objects in Array
It lets you store multiple values in a single variable. It store’s a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.
- Consider the following data:
const authors = [
{ firstName: “Beatrix”, lastName: “Potter” },
{ firstName: “Ann”, lastName: “Martin” },
{ firstName: “Beverly”, lastName: “Cleary” },
{ firstName: “Roald”, lastName: “Dahl” },
{ firstName: “Lewis”, lastName: “Carroll” }
]; - Using the map method on the authors array, we create an array of full name strings, comprising the first name, then a space, then the last name. We will store the new array in the fullAuthorNames variable.
let fullAuthorNames;
fullAuthorNames = authors.map(auth => auth.firstName + “ “ + auth.lastName);
Output:
[“Beatrix Potter”, “Ann Martin”, “Beverly Cleary”, “Roald Dahl”, “Lewis Carroll”]
3. Combining filter() or map()
- Consider the following Data :
const todos = [
{
todo: ‘Buy apples’,
done: false
},
{
todo: ‘Wash car’,
done: true
},
{
todo: ‘Write web app’,
done: false
},
{
todo: ‘Read MDN page on JavaScript arrays’,
done: true
},
{
todo: ‘Call mom’,
done: false
}
]; - Using the filter and map methods on the todos array, we create an array of unfinished task strings.
- The filter() will remove all the finished tasks from the array
- map() method will return back the todo of all the arrays and store it in the array unfinishedTasks.
let unfinishedTasks;
unfinishedTasks = todos.filter(num => num.done=== false).map(num => num.todo);
Output:
[“Buy apples”, “Write web app”, “Call mom”]
4. Combining filter( ) and reduce( )
- Consider the following data:
const purchaseItems = [
{
name: ‘apples’,
dept: ‘groceries’,
price: 2.49
},
{
name: ‘bread’,
dept: ‘groceries’,
price: 2.99
},
{
name: ‘batteries’,
dept: ‘electronics’,
price: 5.80
},
{
name: ‘eggs’,
dept: ‘groceries’,
price: 3.99
},
{
name: ‘t-shirts’,
dept: ‘apparel’,
price: 9.99
}
]; - Using the filter() and reduce() methods on the purchaseItems array, add the total price of all the groceries (items with a dept. of groceries). Store the total price in the groceryTotal variable.
- filter() method will remove all elements which are not from the grocery department.
- reduce() method will sum up the total price of the grocery item ,return and store the value in variable groceryTotal.
let groceryTotal;
groceryTotal= purchaseItems.filter(n => n.dept ===’groceries’).reduce((sum,n) => sum+n.price,0);
console.log(groceryTotal);
Conclusion:
We have seen the major channing array methods in JavaScript. Chaining is a pattern for calling/invoking methods in functional programming.
Thanks for reading🙂.
