JS Iterator objects

When we want to iterate through an object we usually fall in the trap (or not) to use always the same iterators, like for or .map(), but there is a whole world of iterators in JS each one with their respective functions and differences between each other.

In this post I will explain to you practical uses and differences between .map(),.filter(), .find(), .reduce() and .forEach().

1. Starting with .map()

The .map() iterator will go through the elements in the array to populate a new array with the results of the function you provide inside of it.

const array = ["name1", "name2", "name3"];

// pass a function to map
const map = array.map((x, i) => {
  return x.concat(` surname${i+1}`);
});

console.log(map);
// expected output: Array ["name1 surname1", "name2 surname2", "name3 surname3"]

As you can see the .map() iterator creates a new array populated with what we passed inside of it.

2. .filter()

The .filter() iterates through the array and will return a new array populated with the elements that passes the condition provided inside of it.

const array = ["name1", "name2", "name3"];

// pass a function to filter
const filter = array.filter(x => !x.includes(2));

console.log(map);
// expected output: Array ["name1", "name3"]

3. .find()

The .find() method will return the first element that passes the condition inside of the array.

const array = ["name1", "name2", "name3"];

// pass a function to filter
const find = array.find(x => x.includes(2));

console.log(map);
// expected output: Array "name2"

4. .reduce()

The .reduce() method will execute a reducer function that you will provide inside of it, this will result in a single output value from the multiple elements inside of the array.

The reducer function can take four arguments:

1. Accumulator
2. Current Value
3. Current Index
4. Source Array

const reducer = (sum, val) => sum + val;
const initialValue = 0;
const arr = [1, 3, 5, 7];

const sumReduce = arr.reduce(reducer, initialValue);
console.log(sumReduce);
// 16

5. .forEach()

The .forEach() method will execute a function for each one of the elements in the array that iterates.

In case you are wondering why ever use foreach instead of the other ones, well forEach is more of a generic tool provided by Js, I'll tell you to use it when you don't have any better and more specific tool as we saw in the previous methods.

For example, the one that you can confuse it more is with .map() the difference between them is that map is for modifying the array and returning modified, while .forEach() can iterate through the array with any necessary modification like just console.log the array.

Well I hope this article helped you and provided you with a little more knowledge for your day to day coding, any suggestions or comments are welcome in the comment section.