DEV Community

Cover image for JS Iterator objects
Diego Cachafeiro for Product Hackers

Posted on

7 3

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

tenor

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.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs