Array Iteration for Beginners: What is forEach() and map()?
Published: 2022-08-23 02:17:36

## 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!