ES6 Array Helper Methods

ES6 is an in-depth series which has many features, that makes the life of a developer much easier and one of them is array helpers. If you don’t know about ES6, I have a brief introduction article on it, have a read.

ES6: Array Helpers

Array helpers as the name suggests are related to arrays and is used to perform complex operations on array objects very easily. Even if you don’t know array helpers you can do each and everything for what it is used for by just using the “for” loop but if you are into a project i.e. not from scratch and another developer has already written some of his code and he/she has used array helper but you don’t know about it, that will blow your mind. Using these array helpers you can avoid using tons of manual for loops.

So using array helper in your code or note is absolutely your choice but you should learn it and after learning, you will surely gonna love it. If you master these array helpers you’re going to find that you can manipulate with collections of data more easily and the majority of web applications end up being themed around working with the collections of data.

Array helper methods got drafted in ES5.1 but got codified in ES6.

Below are the seven array helper methods:

• forEach
• map
• filter
• find
• every
• some
• reduce

Let’s get more deeply into them, I will tell you both ways to manipulate the collection of data i.e. the classic ES5 for loops and ES6 array helpers and will leave it on you to see which one is pretty good.

“forEach” Helper

forEach helper can be used when you want to perform an operation on each element of an array.

//Let suppose we have an array of numbers and we want to console log all elements of array
const numbers=[1,2,3,4,5,6];
//Using traditional for loop
for(let i=0;i<numbers.length;i++){
 console.log(numbers[i]);
}
//Using ES6 forEach helper
//number is denoted for each element in numbers
numbers.forEach(function(number){
 console.log(number);
});

“map” Helper

map helper can be used when you want to perform an operation on each element of an array and store in a new array.

//Let suppose we have an array of numbers and we want to double each element of array and store in a new array doubleNumbers
const numbers=[1,2,3,4,5,6];
let doubleNumbers=[];
//Using traditional for loop
for(let i=0;i<numbers.length;i++){
 doubleNumbers.push(numbers[i]*2);
}
//Using ES6 map helper
//number is denoted for each element in numbers
doubleNumbers = numbers.map(function(number){
 return number*2;
});

“filter” Helper

filter helper can be used when you want to filter the elements of the array with some criteria and push in another array.

//Let suppose we have an array of products and we want to filter out the products of type fruit from them and store in a new array fruitProducts
const products=[
 { name:’cucumber’,type:’vegetable’ },
 { name:’banana’,type:’fruit’ },
 { name:’apple’,type:’fruit’ },
 { name:’cabbage’,type:’vegetable’ }
];
let fruitProducts=[];
//Using traditional for loop
for(let i=0;i<products.length;i++){
 if(products[i].type===’fruit’){
   fruitProducts.push(products[i]);
 }
}
//Using ES6 filter helper
//product is denoted for each element in products
fruitProducts = products.filter(function(product){
 return product.type===’fruit’;
});

“find” Helper

find helper can be used when you want to search a particular element in an array.

//Let suppose we have an array of users and we want to fetch the details of user with the name ‘Ram”
const users=[
 { name:’Sist’,email:'sist123@mail.com',phone:886767},
 { name:’Ram’,email:'ram123@mail.com',phone:456744},
 { name:’Jack’,email:'jack123@mail.com',phone:887654},
 { name:’John’,email:'john123@mail.com',phone:909076}
];
let ram;
//Using traditional for loop
for(let i=0;i<users.length;i++){
 if(users[i].name===’Ram’){
  ram=users[i];
  break;
 }
}
//Using ES6 find helper
//user is denoted for each element in users
ram=users.find(function(user){
 return user.name===’Ram’;
});

But this find helper has a drawback i.e. find helper finds only the first element with the criteria like in the above example if the array had two users named “Ram” and you use find helper it will find only the first user with the name “Ram”.

“every” and “some” Helper

I am covering both every and some helper in a single program because they are very much related to each other.

every helper can be used to find whether every element of an array follows particular criteria whereas some helper can be used to if there is some element in an array following that particular criteria.

//Let suppose we have an array of laptops and we a software and a game
//Minimum ram required for running the software is 4
//Minimum ram required for running the game is 8
const laptops=[
 { name:’thinkpad’,ram:16},
 { name:’ideapad’,ram:4},
 { name:’apple’,ram:8},
 { name:’predator’,ram:32}
];
//By seeing the above array we can say that every laptop can run that software whereas some laptops can run the game.
let someLaptopCanRunGame;
let someLaptopCanRunSoftware;
//only assuming true if false will be flipped in for loop
let everyLaptopCanRunGame=true;
let everyLaptopCanRunSoftware=true;
//Using traditional for loop
for(let i=0;i<laptops.length;i++){
 if(laptops[i].ram<4){
  everyLaptopCanRunSoftware=false;
 }
 else{
  someLaptopCanRunSoftware=true;
 }
 if(laptops[i].ram<8){
  everyLaptopCanRunGame=false;
 }
 else{
  someLaptopCanRunGame=true;
 }
}
//Using ES6 every and some helper
//laptop is denoted for each element in laptops
everyLaptopCanRunSoftware=laptops.every(function(laptop){
 return laptop.ram>=4;
});
someLaptopCanRunSoftware=laptops.some(function(laptop){
 return laptop.ram>=4;
});
everyLaptopCanRunGame=laptops.every(function(laptop){
 return laptop.ram>=8;
});
someLaptopCanRunGame=laptops.some(function(laptop){
 return laptop.ram>=8;
});

“reduce” Helper

reduce helper is the toughest and flexible array helper, all other array helper methods can be implemented using reduce helper.

//Let suppose we have an array of numbers and we want to get sum of all elements of the array
const numbers=[1,2,3,4,5,6];
let sum=0;
//Using traditional for loop
for(let i=0;i<numbers.length;i++){
 sum+=numbers[i];
}
//Using ES6 reduce helper
//number is denoted for each element in numbers
sum=numbers.reduce(function(sum,number){
 return sum+number;
},0);
//This zero denotes initial value of sum.

You may have seen Balanced Parenthesis program, Do you know you can do it very easily using reduce helper. Follow the link to see.

Users do forget to use return keyword in array helper methods in the initial stage it is the most common mistake you can do, so make sure you don’t forget to use the return keyword.

I have tried to explain these array helper methods in a very short and simple way. I will try to write more articles explaining all the syntaxes of ES6. Hope it was useful.

Reading is good but reading with implementation is great!

Suggestions and critics about the article are most welcome.