What is "iteration"?
Iteration is the process of going through each element of an array and doing something. There are a lot of reasons you might want to do something to each element in an array. Luckily, JavaScript has a lot of ways to do things! We're going to explore the two JavaScript iteration methods forEach() and map() and figure out what they are, and when to use them.
What to know before starting
There are some considerations to make before iterating over an array. The first thing you want to ask yourself is what am I trying to accomplish through iteration? What exactly would I like to be returned to me after I have each element do something? Let's see how forEach() and map() can operate similarly but have different return values.
Using forEach()
forEach() is very aptly named because it will take an array and perform some function for each value in the array. If we want forEach() to to perform some sort of function, then it will have take a function as a parameter. This is called a callback function and it will be used in both forEach() and map(). A callback function is the something that is happening for each element in the array! Take a look at the example below:
const people = ["Mac", "Dennis", "Charlie", "Dee", "Frank"];
people.forEach(person => console.log(`${person} is a my favorite!`);
// CONSOLE:
// Mac is my favorite!
// Dennis is my favorite!
// Charlie is my favorite!
// Dee is my favorite!
// Frank is my favorite!
What's important to note about the return of this forEach()? Well let's examine what's happening. For each person in the people array, a callback function returns a log of the person to the console. So the callback function is what's returning a value. So what does the forEach() iteration method return? Well...nothing! It doesn't return a value it just calls upon a function to return a value for each element in the array. We can check this by trying to log the forEach() array to the console.
const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.forEach(number => number*2);
console.log(doubleNumbers);
// CONSOLE:
// undefined
It's apparent that using forEach() does not return a value of doubleNumbers to the console. What if we want those values returned to us so we can manipulate them further? Perhaps we can make use of map()
Using map()
When you create a map of something, you recreate something on a different scale. Theoretically, a map of the United States should just be a smaller United States. That's essentially what we're doing with our map() function! We're just changing something about our array, but, as opposed to forEach(), map() returns a new array of the same size. Take a look at the code below:
const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.map(number => number*2);
console.log(doubleNumbers);
// CONSOLE:
// [2, 4, 6, 8, 10]
We can see that map() takes a callback function just like forEach(). However, unlike forEach() we see that an array doubleNumbers is logged. This array is the returned value of each element after the callback function has been performed on that element.
Ok, so what?
Well it's important to know if you want an array returned or if you just want some action performed to each element. There are instances where a new array is unnecessary because the array only exists for some action to be performed upon its elements. Alternatively, it can be very useful to return a new, updated array to use further in your code. It all depends on your uses. Explore the uses of forEach() and map() and see where they excel and where their limitations might lie. Happy coding!
Top comments (0)