JavaScript Array Iteration

JavaScript provides several methods to iterate over arrays, each serving different purposes. These methods allow you to process elements, modify them, or perform specific operations on array elements.

List of JavaScript Array Iteration Methods

• for loop: Flexible, manual control over iteration.
• for...of: Simple syntax for iterating over values.
• forEach(): Executes a function for each array element.
• map(): Creates a new array with transformed elements.
• filter(): Creates a new array with elements that pass a condition.
• reduce(): Reduces array to a single value.
• every(): Tests if all elements meet a condition.
• some(): Tests if any element meets a condition.
• find(): Finds the first element matching a condition.
• findIndex(): Finds the index of the first element matching a condition.

1. for Loop

The traditional for loop is a simple and versatile way to iterate through an array.

const fruits = ['Apple', 'Banana', 'Cherry'];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// Output: 
// Apple
// Banana
// Cherry

Key Points:

• Manual control over iteration.
• Can be used to skip or break iteration.

2. for...of Loop

The for...of loop iterates over the values of an array.

const fruits = ['Apple', 'Banana', 'Cherry'];
for (const fruit of fruits) {
    console.log(fruit);
}
// Output: 
// Apple
// Banana
// Cherry

Key Points:

• Easier and cleaner syntax for array iteration.
• Cannot directly access the index.

3. forEach()

The forEach() method executes a provided function once for each array element.

const fruits = ['Apple', 'Banana', 'Cherry'];
fruits.forEach(fruit => console.log(fruit));
// Output: 
// Apple
// Banana
// Cherry

Key Points:

• Does not return a new array.
• Cannot use break or continue.

4. map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled);  // Output: [2, 4, 6]

Key Points:

• Returns a new array.
• Original array remains unchanged.

5. filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);
console.log(even);  // Output: [2, 4]

Key Points:

• Returns a new array with filtered elements.
• Useful for extracting a subset of elements.

6. reduce()

The reduce() method executes a reducer function on each element of the array, resulting in a single output value.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // Output: 10

Key Points:

• Reduces array to a single value.
• Can be used for complex array transformations.

7. every()

The every() method tests whether all elements in the array pass the test implemented by the provided function.

const numbers = [1, 2, 3, 4];
const allPositive = numbers.every(num => num > 0);
console.log(allPositive);  // Output: true

Key Points:

• Returns true if all elements pass the test.
• Returns false if any element does not pass the test.

8. some()

The some() method tests whether at least one element in the array passes the test implemented by the provided function.

const numbers = [1, 2, 3, 4];
const hasNegative = numbers.some(num => num < 0);
console.log(hasNegative);  // Output: false

Key Points:

• Returns true if at least one element passes the test.
• Returns false if no elements pass the test.

9. find()

The find() method returns the value of the first element in the array that satisfies the provided testing function.

const numbers = [1, 2, 3, 4];
const found = numbers.find(num => num > 2);
console.log(found);  // Output: 3

Key Points:

• Returns the first matching element.
• Returns undefined if no element matches.

10. findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function.

const numbers = [1, 2, 3, 4];
const index = numbers.findIndex(num => num > 2);
console.log(index);  // Output: 2

Key Points:

• Returns the index of the first matching element.
• Returns -1 if no element matches.

Summary

These methods offer various ways to handle and manipulate arrays, making JavaScript a powerful language for working with collections of data.