JavaScript Array
Methods Explained

Understanding JavaScript Array Methods

JavaScript arrays come packed with powerful built-in methods that allow you to process, transform, and manipulate collections of data efficiently. These methods make code cleaner, shorter, and easier to maintain.

Commonly Used Array Methods

1. forEach() - Loop Over Each Element

The forEach() method is used to execute a function on each item in the array.

    const numbers = [1, 2, 3, 4, 5];
    numbers.forEach(function(num) {
      console.log(num * 2);
    });
    

Output:

    2
    4
    6
    8
    10
    

Question:

Can forEach() return a new array?

Answer: No, forEach() does not return a new array. It only performs side effects like logging or updating variables.

2. map() - Transform Each Element

The map() method creates a new array by transforming each element with a callback function.

    const prices = [10, 20, 30];
    const newPrices = prices.map(price => price + 5);
    console.log(newPrices);
    

Output:

    [15, 25, 35]
    

3. filter() - Get Matching Items

Use filter() when you want to return a new array with only those elements that satisfy a condition.

    const ages = [12, 17, 22, 30];
    const adults = ages.filter(age => age >= 18);
    console.log(adults);
    

Output:

    [22, 30]
    

Question:

What happens if no elements match the condition?

Answer: filter() returns an empty array if no elements pass the test.

4. reduce() - Reduce to a Single Value

reduce() processes each element and combines them into a single return value. Great for summing or building complex results.

    const nums = [1, 2, 3, 4];
    const sum = nums.reduce((acc, val) => acc + val, 0);
    console.log(sum);
    

Output:

    10
    

5. find() - Return First Match

find() returns the first element that satisfies the given condition.

    const users = [
      { id: 1, name: "Alice" },
      { id: 2, name: "Bob" },
      { id: 3, name: "Charlie" }
    ];
    const result = users.find(user => user.id === 2);
    console.log(result);
    

Output:

    { id: 2, name: "Bob" }
    

6. includes() - Check for Existence

includes() checks if a value exists in an array and returns true or false.

    const fruits = ["apple", "banana", "mango"];
    console.log(fruits.includes("banana")); // true
    console.log(fruits.includes("grape"));  // false
    

Output:

    true
    false
    

7. push() and pop() - Add/Remove from End

push() adds an item to the end; pop() removes the last item.

    const stack = [1, 2];
    stack.push(3); // [1, 2, 3]
    stack.pop();   // returns 3, stack becomes [1, 2]
    console.log(stack);
    

Output:

    [1, 2]
    

8. shift() and unshift() - Add/Remove from Start

unshift() adds to the beginning; shift() removes the first element.

    const queue = [2, 3];
    queue.unshift(1); // [1, 2, 3]
    queue.shift();    // returns 1, queue becomes [2, 3]
    console.log(queue);
    

Output:

    [2, 3]
    

Final Thoughts

Mastering array methods makes you a much more effective JavaScript developer. These functions are essential when working with lists of data and are often used in interviews and real-world apps.

Quick Questions to Practice

• What’s the difference between map() and forEach()?
• How would you get all even numbers from an array?
• Which method helps you accumulate a result, like a sum?
• What happens when you use pop() on an empty array?