Skip to content

Latest commit

 

History

History
249 lines (163 loc) · 6.61 KB

Array-iteration-methods.md

File metadata and controls

249 lines (163 loc) · 6.61 KB

What Are the Different Ways to Iterate Over an Array in JavaScript ?

JavaScript provides multiple methods to iterate over arrays, ranging from traditional loops to modern iteration techniques. Each method has its specific use cases, depending on the operation to be performed and the need for performance or simplicity.

1. Traditional for Loop

The for loop is one of the most basic and widely used methods for iterating over an array. It provides complete control over the iteration process.

Syntax:

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

Use Case:

Use when you need maximum control over the iteration, such as skipping elements or iterating backward.

2. for...of Loop

The for...of loop is a modern and concise way to iterate over arrays. It directly provides the values of the array elements.

Syntax:

const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
  console.log(value);
}

Use Case:

Use for simple iterations where only the array values are needed.

3. forEach() Method

The forEach() method is a higher-order function that executes a provided function once for each array element.

Syntax:

const arr = [1, 2, 3, 4, 5];
arr.forEach((value, index) => {
  console.log(`Index: ${index}, Value: ${value}`);
});

Use Case:

Use for straightforward operations on each element without breaking the loop or returning values.

4. map() Method

The map() method creates a new array by applying a provided function to each element of the array.

Syntax:

const arr = [1, 2, 3, 4, 5];
const squared = arr.map((value) => value * value);
console.log(squared); // [1, 4, 9, 16, 25]

Use Case:

Use when you need to transform each element and return a new array.

5. filter() Method

The filter() method creates a new array containing only the elements that satisfy a given condition.

Syntax:

const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter((value) => value % 2 === 0);
console.log(evenNumbers); // [2, 4]

Use Case:

Use when you want to extract elements based on a condition.

6. reduce() Method

The reduce() method applies a reducer function on each element of the array to reduce it to a single value.

Syntax:

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, value) => accumulator + value, 0);
console.log(sum); // 15

Use Case:

Use when you need to accumulate or combine values, such as calculating sums or averages.

7. some() and every() Methods

  • some() checks if at least one element satisfies a condition.
  • every() checks if all elements satisfy a condition.

Syntax:

const arr = [1, 2, 3, 4, 5];
console.log(arr.some((value) => value > 3)); // true
console.log(arr.every((value) => value > 0)); // true

Use Case:

Use for conditional checks on elements.

8. find() and findIndex() Methods

  • find() returns the first element that satisfies a condition.
  • findIndex() returns the index of the first element that satisfies a condition.

Syntax:

const arr = [1, 2, 3, 4, 5];
console.log(arr.find((value) => value > 3)); // 4
console.log(arr.findIndex((value) => value > 3)); // 3

Use Case:

Use when you need to locate a specific element or its index.

9. while Loop

The while loop iterates as long as a specified condition is true.

Syntax:

const arr = [1, 2, 3, 4, 5];
let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

Use Case:

Use for scenarios where the condition for iteration is dynamic.

10. do...while Loop

The do...while loop executes the block of code at least once before checking the condition.

Syntax:

const arr = [1, 2, 3, 4, 5];
let i = 0;
do {
  console.log(arr[i]);
  i++;
} while (i < arr.length);

Use Case:

Use when you want to ensure the loop body executes at least once.

11. keys(), values(), and entries() Methods

  • keys(): Iterates over indices.
  • values(): Iterates over values.
  • entries(): Iterates over [index, value] pairs.

Syntax:

const arr = [1, 2, 3];
for (const index of arr.keys()) {
  console.log(index); // 0, 1, 2
}

for (const value of arr.values()) {
  console.log(value); // 1, 2, 3
}

for (const [index, value] of arr.entries()) {
  console.log(index, value); // 0 1, 1 2, 2 3
}

Use Case:

Use for specific iteration requirements like working with indices, values, or both.

Comparison Table

Method Key Features Returns Value?
for Full control over iteration No
for...of Simplified iteration over values No
forEach() Executes a function for each element No
map() Transforms elements into a new array Yes
filter() Filters elements based on a condition Yes
reduce() Reduces array to a single value Yes
some() Checks if any element satisfies a condition Yes (boolean)
every() Checks if all elements satisfy a condition Yes (boolean)
find() Finds the first element that satisfies a condition Yes
findIndex() Finds the index of the first matching element Yes
while Iterates based on dynamic conditions No
do...while Ensures the body is executed at least once No
keys(), values(), entries() Iterates over indices, values, or both Yes

Conclusion

JavaScript provides numerous ways to iterate over arrays, each suitable for different scenarios. Choose the method that best fits your requirements for readability, performance, and functionality.