Javascript Basics - Introduction to forEach()
Tags: javascript, beginners, tutorial
Published: 2021-10-16 22:43:06



First, lets take a quick look at a basic array 👀

```javascript
let array = [element0, element1, element2];
```

Each element in an array also has a corresponding index position. The first element in an array is at index 0, the second element is at index 1, and so on.

## forEach() Syntax

We can use the `forEach()` method to execute a callback function _for each_ non-empty element in an array. Let's look at the basic syntax of the forEach() method 🧐

```javascript
array.forEach(function (element, index, array) {
  // do something for each element
});
```

The callback function takes up to three parameters:

- **element** - refers to the current element at each iteration. This is a required parameter, but you can name it whatever you like!
- **index** - this parameter is optional, but it refers to the index position of each element. Remember that the first index position in an array is 0
- **array** - this parameter is optional and refers to the array that the elements that you are iterating over are from


## forEach() In Action


Now let's see the `forEach()` method in action!

Let's pretend we have a class with a group of students. We will put their first names into an array 🍎

```javascript
let classList = ["Linda", "Ainslie", "Tracey", "Rick"];
```

Now, let's use the `forEach()` method to iterate over this array and say 'Hello' to each student 🙋‍♀️

```javascript
classList.forEach(function (student) {
  console.log(`Hello, ${student}!`);
});
```

output:

`// Hello, Linda!`
`// Hello, Ainslie!`
`// Hello, Tracey!`
`// Hello, Rick!`

In this example we are using the `forEach()` method on the classList array. The parameter 'student' refers to the student names in the array. During the first iteration, 'student' refers to the element 'Linda'. In the second iteration it refers to 'Ainslie', and so on. The callback function in this example will print 'Hello' and the student name in the console. The function is called for every student in the classList array. It runs sequentially in ascending order from the first element in the array to the last.

Now let's add another parameter and see how we can access the index position for each element in the array 📍

When you add the index parameter, it must be the second parameter passed into the callback function.

```javascript
classList.forEach(function (student, index) {
  console.log(`Hello, ${student}! Your index number is: ${index}.`);
});
```

output:

`// Hello, Linda! Your index number is: 0.`
`// Hello, Ainslie! Your index number is: 1.`
`// Hello, Tracey! Your index number is: 2.`
`// Hello, Rick! Your index number is: 3.`

## forEach and Arrow Functions

The `forEach()` method uses a very clean and concise syntax compared to a regular for loop. You will often see people use arrow functions passed in as the callback. This is how our example could be written using an arrow function.

```javascript
classList.forEach((student, index) => {
  console.log(`Hello, ${student}! Your index number is: ${index}.`);
});
```

If you are only accessing the elements, you can tidy up the code even further 🧹

```javascript
classList.forEach(student => console.log(`Hello, ${student}!`));
```

## Special Characteristics of forEach()

The `forEach()` method syntax is a little easier to read and write than some of the other looping methods. There are some key differences to be aware of: 🕵️‍♀️

The following are some characteristics that are specific to `forEach()` :

- loops over every non-empty element in an array
- loops in ascending order from index 0 to the end of the array
- you cannot break or end the loop early
- it will not change the original array (_unless_ your callback function executes an operation to do so)
- it will always return undefined

----

Read more on MDN to become a `forEach()` wizard 🧙‍♀️

- [MDN - Array.prototype.forEach()]('https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach')