How to Loop Through an Array with a forEach Loop in JavaScript

The Array scores

const scores = [22, 54, 76, 92, 43, 33];

Explanation:

1. What is an array?

   • An array in JavaScript is a collection of elements stored in a single variable. These elements can be of any data type (numbers, strings, objects, etc.).
   • Arrays are zero-indexed, meaning the first element has an index of 0, the second has an index of 1, and so on.

2. What does this array represent?

   • The array scores contains a list of numbers: [22, 54, 76, 92, 43, 33].
   • These numbers could represent anything—scores in a game, grades in a test, or any numerical data.

3. Array Length:

   • The length of the array is 6, as it contains 6 elements.
   • The length property is helpful when looping through the array because it tells us how many elements there are.

   console.log(scores.length); // Output: 6

1. Index and Values in scores:
   • Each value in the array has an index:
     • Index 0: Value 22
     • Index 1: Value 54
     • Index 2: Value 76
     • Index 3: Value 92
     • Index 4: Value 43
     • Index 5: Value 33

• Accessing an element by index:
  

   console.log(scores[0]); // Output: 22
   console.log(scores[3]); // Output: 92
  

Using Loops to Work with the scores Array

Now let's see how we use different loops to iterate through the array and process its elements.

---

Example: Using forEach Loop

scores.forEach((score) => console.log(score));

How it works:

• The forEach method calls the provided callback function for each element in the array.
• The callback gets the current element (score) as an argument.
• The method loops through all 6 elements in the scores array and logs them to the console.

---

Example: Using while Loop

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

How it works:

• We initialize i to 0 (to start with the first element).
• The condition i < scores.length ensures that the loop runs until i reaches 6 (the length of the array).
• Inside the loop, we log the value of scores[i] and increment i to move to the next index.

---

Example: Using do...while Loop

let i = 0;
do {
    console.log(scores[i]);
    i++;
} while (i < scores.length);

How it works:

• Similar to the while loop, but here, the body of the loop runs at least once even if the condition is false.

---

Example: Using for Loop

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

How it works:

• The for loop is compact:
  • let i = 0 initializes the counter.
  • i < scores.length checks the condition.
  • i++ increments the counter after each iteration.
• Inside the loop, we log scores[i] for each index.

---

Example: Using for...in Loop

for (i in scores) {
    console.log(scores[i]);
}

How it works:

• The for...in loop iterates over the indices (keys) of the array.
• We access the value using scores[i] for each index.

---

Example: Using for...of Loop

for (score of scores) {
    console.log(score);
}

How it works:

• The for...of loop directly iterates over the values of the array.
• This is simpler because you don’t need to use the index to access the values.

---

Summary of Outputs:

For all the above loops, the output for the array scores is:

22
54
76
92
43
33

Each method achieves the same result but differs in syntax and use cases. You can choose the one that best suits your requirements for readability and functionality.