Array functions are something that can help you with any type of manipulation or looping through an array of items in JavaScript. Some of the pre-built functions can have very similar use cases to one another.
.forEach()
Function .forEach() is another form of just a plain for loop that can be used to iterate through array items. This case of a function is used for more complex arrays, for example, an array of objects with a lot of entries than just an array of integers.
This function takes 1 parameter .forEach(callback). The parameter callback can take up to 3 parameters element, index & array (but only the element parameter is required, the rest is optional).
The parameter element will be used as a variable that stores the current element in the array. Parameter index refers to the element‘s index in the array and the parameter array points to the array that it was called on.
I do have to say that the newer prebuilt loop for..of in JavaScript is way more efficient than the .forEach() in code clarity and its performance.
Example
Here is an example of looping through an array of objects with name properties and logging every name into the console:
const array = [ { name : "Sumit Sharma"} , { name : "Aman Sharma"} ] ;
array.forEach( person => console.log(person.name)) ;
// returns:
// Sumit Sharma
// Aman Sharma
.map()
Function .map() is a manipulative function that can modify each element’s content in an array that it is called on. This function returns a new array with modified values, the array that it is called on will stay still. This function is useful for adding a little change to an already existing array, for example adding a property to an object or modifying it. Its construction and use are identical to the previous function .forEach() and both can be used interchangeably.
Just like the function .forEach(), this function also takes only 1 parameter .map(callback). The parameter callback can take up to 3 parameters element, index & array (but only the element parameter is required, the rest is optional).
Example
Here is an example of looping through an array of objects with price properties and adding a tax value of 5% to it:
const array = [ { price : 200} , { price : 300}] ;
const tax = 1.05 ;
array.map( item => item.price * tax) ;
// returns [ { price : 210 } , { price : 315} ] .filter()
Function .filter() is a search function that returns all the elements that fulfil the assigned condition. You can search by simple terms, for example, that element is equal to a certain integer, or by more advanced terms, for example, searching for an object with certain property that is equal to something. Both examples have a very frequent use as a developer.
This function returns an array of found results, if any, even if only 1 match is found. If a function does not find any match, it simply returns an empty array.
Just like the function .forEach(), this function also takes only 1 parameter .filter(callback). The parameter callback can take up to 3 parameters element, index & array (but only the element parameter is required, the rest is optional).
Examples
Here is an example of searching by simple terms through an array of integers and finding which elements equal to the value 1:
const array = [ 1,3,9,5,2,5,1] ;
array.filter( num => num == 1);
// returns [ 1,1 ]Conclusion
Creating complex functions that are run only once is not the best way to treat your code, instead, you can use these array functions that can be evaluated more easily. So these were the functions that can help you be faster than typing unnecessary code that can be simplified.
