DEV Community

loading...

.forEach(), .map(), .filter() .... What's the difference?

ogwurujohnson profile image Johnson Ogwuru Updated on ・1 min read

.forEach:

.forEach(), is used to execute the same code on every element in an array but does not change the array and it returns undefined.

Example:
In the example below we would use .forEach() to iterate over an array of food and log that we would want to eat each of them.

let food = ['mango','rice','pepper','pear'];
food.forEach(function(foodItem){
    console.log('I want to eat '+foodItem);
});
Enter fullscreen mode Exit fullscreen mode

Running this on your console;

forEach result

.map():
.map() executes the same code on every element in an array and returns a new array with the updated elements.

Example:
In the example below we would use .map to iterate over the elements of the cost array and divide each element by 10, then assign our new array containing the new cost to the variable newCost.

let cost = [100,400,300,700];
let newCost = cost.map(function(costItem){
    return costItem / 10;
});
console.log(newCost);
Enter fullscreen mode Exit fullscreen mode

Running this on your console;

map result

.filter():
.filter() checks every element in an array to see if it meets a certain criteria and returns a new array with the elements that return truthy for the criteria.

Example:
In the example below we would use .filter to return values that are less than 200.

let cost = [100,400,50,40,700];
let smallCost = cost.filter(function(costItem){
    return costItem < 200
});
console.log(smallCost);
Enter fullscreen mode Exit fullscreen mode

Running this on your console;

filter result

That's all folks...

Discussion (16)

Collapse
patricktingen profile image
Collapse
ogwurujohnson profile image
Collapse
patricktingen profile image
Patrick Tingen

It was a bit tongue in cheek, and I don't want to be too PC, but it's these small things that could make a (small) difference.

That's all, folks 😇

Thread Thread
ngattusohw profile image
Nick Gattuso

You're being too PC lol. Great article ogwuru.

Thread Thread
ogwurujohnson profile image
Collapse
9z3 profile image
Roman Gusev

Are you assuming that only guys can be interested in higher-order functions?

Thread Thread
ogwurujohnson profile image
Johnson Ogwuru Author

Nope, not at all

Thread Thread
isaacleimgruber profile image
IsaacLeimgruber

Lmao what is this triggered question pls

Collapse
realabbas profile image
Ali Abbas

Absolute Knowledge. Great Article Dev

Collapse
ogwurujohnson profile image
Johnson Ogwuru Author

Thanks, glad you enjoyed it.

Collapse
andrewdtanner profile image
Andrew Tanner 🇪🇺

Simple. Love it! Now I know what Map and Filter do.

Collapse
ogwurujohnson profile image
Johnson Ogwuru Author

I'm happy you loved it. Thanks

Collapse
isaacleimgruber profile image
IsaacLeimgruber

Fold_left/Fold_right some days?

Collapse
zain667 profile image
zain

simple and clean, thanks a lot

Collapse
angelomiranda profile image
Angel

i agreed

Collapse
angelomiranda profile image
Angel

These are definitely essential knowledge engineers have to know. Would add a supplemental video on top of this post.

Forem Open with the Forem app