Array.forEach() Method
Tags: webdev, javascript, beginners, programming
Published: 2023-06-13 15:30:51

## What is ForEach Function?

The `forEach()` method is a method that is used to iterate over the elements of an array. It takes a callback function as an argument, and the callback function is called for each element in the array.

## Syntax

Here's the syntax for using `forEach()`:

```js
arr.forEach((element, index, array) => {
	// Do something with element
});
```

The callback function is invoked with three arguments:

- `element`: the current element being processed in the array
- `index` (optional): the index of the current element
- `array` (optional): the array that `forEach()` is being called on

The callback function is executed for each element in the array, in ascending order.

Here's an example of how to use `forEach()` to print all the elements of an array to the console:

```js
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function (number) {
	console.log(number);
});

// Output:
// 1
// 2
// 3
// 4
// 5
```

I prefer arrow functions in array functions because of cleaner syntax

`array.forEach(item => {})` instead of `array.forEach(function (item) {})`

Both are OK, it's totally upto you what you prefer

You can also use an arrow function as the `callback`, like this:

```js
numbers.forEach((number) => console.log(number));
```

In the examples above, the `callback` function logs each element of the numbers array to the console. The callback function takes a single argument, which is the current element being processed.

You can also pass the `index` of the current element and the array itself as arguments to the callback function. Here's an example that prints both the element and its index:

```js
numbers.forEach(function (number, index, array) {
	console.log(index + ": " + number);
});

// Output:
// 0: 1
// 1: 2
// 2: 3
// 3: 4
// 4: 5
```

The `forEach()` function does not return a value. It simply executes the callback function for each element in the array.

## ForEach vs For Loop

The `forEach()` method is similar to the `for` loop. The main difference is that the `for` loop can be used to iterate over any type of collection, not just arrays. The `forEach()` method is only used to iterate over arrays.

Here's an example of how to use a `for` loop to iterate over an array:

```js
const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
	console.log(numbers[i]);
}

// Output:
// 1
// 2
// 3
// 4
// 5
```

Here's an example of how to use `forEach()` to iterate over an array:

```js
const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => console.log(number));

// Output:
// 1
// 2
// 3
// 4
// 5
```

## When to use `forEach()`?

The `forEach()` method is useful when you want to iterate over an array and perform some action on each element. It's a cleaner way to write a `for` loop.

## Example

Here is an example of how you might use the `forEach()` function in the context of an e-commerce website.

Imagine that you have an array of products, and each product is represented by an object with the following properties:

- `id`: the unique ID of the product
- `name`: the name of the product
- `price`: the price of the product
- `quantity`: the number of units in stock

You can use the `forEach()` function to iterate over the array of products and perform some action on each product.

### Example 1: Displaying total price of all products

You might want to calculate the total value of all the products in stock. You can do this by using the `forEach()` function to sum the `price` of each product multiplied by its `quantity`.

Here's the code that does this:

```js
const products = [
	{ id: 1, name: "Product 1", price: 10, quantity: 5 },
	{ id: 2, name: "Product 2", price: 15, quantity: 2 },
	{ id: 3, name: "Product 3", price: 20, quantity: 3 },
];

let totalValue = 0;

products.forEach((product) => {
	totalValue += product.price * product.quantity;
});

console.log(totalValue); // prints 105 (10 * 5 + 15 * 2 + 20 * 3)
```

### Example 2: Apply 10% discount to all products having quantity > 3.

Here's the code that does this:

```js
products.forEach((product) => {
	if (product.quantity > 3) {
		product.price *= 0.9; // apply 10% discount
	}
});
```

Now the products array will contain the modified objects.

```js
[
	{ id: 1, name: "Product 1", price: 10, quantity: 5 },
	{ id: 2, name: "Product 2", price: 15, quantity: 2 },
	{ id: 3, name: "Product 3", price: 18, quantity: 3 },
];
```

### Example 3: Removing an object from the array

We can also use the `forEach()` function to remove elements from an array. For example, you might want to remove all the products that have a quantity of 0.

Here's the code that does this:

```js
products.forEach((product, index, array) => {
	if (product.quantity === 0) {
		array.splice(index, 1);
	}
});
```

Now the products array will contain the modified objects.

```js
[
	{ id: 1, name: "Product 1", price: 10, quantity: 5 },
	{ id: 2, name: "Product 2", price: 15, quantity: 2 },
	{ id: 3, name: "Product 3", price: 18, quantity: 3 },
];
```

## All done! 🎉 Quick recap:

The `forEach()` function is useful for iterating over an array and performing some action on each element. It is similar to the for loop, but it is more concise and easier to read.

`forEach()` is not supported by Internet Explorer (which most of the user doesn't use anymore). If you need to support older browsers, you can use a for loop or the `forEach()` function from a polyfill library like `Array.prototype.forEach`.