ES6 — Array Helper Methods
ECMAScript v5.1 standards came in year 2011 and these helper methods were drafted as part of that .Finally, these helper methods were codify in ECMAScript 6 (ES6). These helper methods are around for a while and used as part of other modules i.e. lodash.
Let’s start with one by one and try to see the usage of each.To illustrate the difference , sample are written using “For loop” then using the helper methods with anonymous functions and helper methods with fat arrow function.
forEach
It performs the specified action for each element in an array. It accepts iteration function that iterate through each items in array. Let’s take an array and write using basic for loop and rewrite it using anonymous and at arrow function. Check out the below code.
Output
map
This is most widely used helper method .It will loop through the each item of array ,process and return new set of array .
Output
filter
Returns the elements of an array that meet the condition specified in a callback function.In the below example we are filtering out the data which match out condition i.e. direction name here .
Output
find
Returns the value of the first element in the array where predicate is true, and undefined .
Output
some
Performs the specified action for each element in an array. It iterator through items of array ,check if “any of item” fulfils the condition specified and return Boolean value .
Output
every
It is similar to the “some ” helper method but it validate that condition is fulfil by each item of the array.
Output
reduce
It is most flexible helper and other helpers method can be implemented using “reduce” helper .
Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
In “reduce” , we need pass initial values for the functions.
Below is simple example we are doing sum and as initial value “0” is passed .
Result sum is 60 here .
Now let’s take a real practical example where we want to get all the email id from a “users”array .
Output
With these helpers now we can write better “Clean Code” and probability of introducing the error will also be less .
Try out helper method and share with others . Cheers !
