Beginners Tutorial on forEach in JavaScript

1. Introduction

• The forEach() method in JavaScript is used to iterate over an array and execute a provided callback function on each element. It’s important to note that forEach() does not return anything (it returns undefined), making it non-chainable.

Video Tutorial - YouTube

Parameters

• callbackFn:
  A function to execute for each element in the array. Its return value is discarded.
  The function is called with the following arguments:

  • element - The current element being processed in the array.
  • index - The index of the current element being processed in the array.
  • array - The array forEach() was called upon.

• thisArg (Optional)

Parameters of callbackFn in Detail

a. element

• This is the value of the current element in the array during the iteration.
• Example:

const numbers = [10, 20, 30]
numbers.forEach((element) => {
  console.log(element) // Outputs: 10, then 20, then 30
})

b. index

• This is the index (zero-based) of the current element in the array.
• Example:

  const numbers = [10, 20, 30]
  numbers.forEach((element, index) => {
    console.log(`Element: ${element}, Index: ${index}`)
  })
  // Outputs:
  // Element: 10, Index: 0
  // Element: 20, Index: 1
  // Element: 30, Index: 2

c. array

• This is the entire array that is being iterated over.
• Example:

  const numbers = [10, 20, 30]
  numbers.forEach((element, index, array) => {
    console.log(array) // Outputs [10, 20, 30] on every iteration
  })

2. Basic Overview of forEach

• Syntax and basic usage:

  const numbers = [1, 2, 3]
  numbers.forEach((number) => console.log(number))

3. Advanced Use Cases

a. Manipulating DOM Elements

• Using forEach() to manipulate multiple DOM elements is a common practice in JavaScript, especially when working with a list of elements selected using methods like document.querySelectorAll

  const buttons = document.querySelectorAll('.button')
  buttons.forEach((button, index) => {
    button.textContent = `Button ${index + 1}`
    button.addEventListener('click', () =>
      alert(`You clicked Button ${index + 1}`)
    )
  })

b. Nested Arrays and forEach

• Example with a 2D array:

  const matrix = [
    [1, 2],
    [3, 4],
    [5, 6],
  ]
  matrix.forEach((row) => row.forEach((cell) => console.log(cell)))

4. Common Pitfalls

a. Breaking out of forEach

In JavaScript, you cannot use break or continue inside a forEach() loop because forEach() is a method, not a loop in the traditional sense like a for, while, or do-while loop. Here's why:

Why break and continue Don’t Work in forEach()

• break and continue are designed for control flow in traditional loops like for, while, and do-while.
• The forEach() method operates by calling a callback function for each element of the array, and it does not expose control over the iteration process to the user.
• Once the forEach() method starts executing, it iterates through all elements without any way to stop or skip iterations from the inside.

b. What Happens If You Try to Use break or continue?

If you attempt to use break or continue inside a forEach() callback, you will get a SyntaxError, as these keywords are not valid within a function context.

Example:

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

numbers.forEach((num) => {
  if (num === 3) {
    break; // SyntaxError: Illegal break statement
  }
  console.log(num);
});

Similarly, using continue would cause:

numbers.forEach((num) => {
  if (num === 3) {
    continue; // SyntaxError: Illegal continue statement
  }
  console.log(num);
});

c. How to "Break" or "Skip" in forEach()

Although forEach() does not support break or continue, you can achieve similar behavior with the following workarounds:

i. Simulating continue with return:

• Using return inside the callback skips the current iteration, effectively mimicking continue.
• Example:

  const numbers = [1, 2, 3, 4, 5]

  numbers.forEach((num) => {
    if (num === 3) {
      return // Skips the rest of the callback for this iteration
    }
    console.log(num)
  })
  // Outputs: 1, 2, 4, 5

ii. Modifying the Original Array

• By default forEach() does not mutate the array, but it can lead to mutation if the callback explicitly modifies it.
• Example of how modifying the array inside forEach affects iteration:

  const numbers = [1, 2, 3]
  numbers.forEach((num, index, arr) => {
    arr[index] = num * 2
  })
  console.log(numbers) // [2, 4, 6]

iii. Avoiding undefined in Callbacks

• Handling missing elements in sparse arrays:

  const arr = [1, , 3]
  arr.forEach((value) => console.log(value)) // Skips undefined

5. Real-World Example

• Walk through a practical example, such as filtering and transforming API data:

  const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 },
  ]

  users.forEach((user) => {
    console.log(`${user.name} is ${user.age} years old.`)
  })

Video Tutorial - YouTube