Comprehensive Guide to JavaScript Array Methods with Examples

Let’s dive into a tutorial on how JavaScript array methods work, along with examples for each. JavaScript provides a variety of built-in methods to manipulate arrays. Here are some of the most commonly used array methods:

1. push()

Purpose: Adds one or more elements to the end of an array and returns the new length of the array.

Example:

let fruits = ['apple', 'banana'];
let newLength = fruits.push('orange');
console.log(fruits); // Output: ['apple', 'banana', 'orange']
console.log(newLength); // Output: 3

2. pop()

Purpose: Removes the last element from an array and returns that element.

Example:

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(fruits); // Output: ['apple', 'banana']
console.log(lastFruit); // Output: 'orange'

3. shift()

Purpose: Removes the first element from an array and returns that element.

Example:

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
console.log(fruits); // Output: ['banana', 'orange']
console.log(firstFruit); // Output: 'apple'

4. unshift()

Purpose: Adds one or more elements to the beginning of an array and returns the new length of the array.

Example:

let fruits = ['banana', 'orange'];
let newLength = fruits.unshift('apple');
console.log(fruits); // Output: ['apple', 'banana', 'orange']
console.log(newLength); // Output: 3

5. slice()

Purpose: Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).

Example:

let fruits = ['apple', 'banana', 'orange', 'grape'];
let citrus = fruits.slice(1, 3);
console.log(citrus); // Output: ['banana', 'orange']

6. splice()

Purpose: Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

Example:

let fruits = ['apple', 'banana', 'orange', 'grape'];
let removed = fruits.splice(2, 1, 'kiwi', 'mango');
console.log(fruits); // Output: ['apple', 'banana', 'kiwi', 'mango', 'grape']
console.log(removed); // Output: ['orange']

7. forEach()

Purpose: Executes a provided function once for each array element.

Example:

let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit, index) {
    console.log(index + ': ' + fruit);
});
// Output:
// 0: apple
// 1: banana
// 2: orange

8. map()

Purpose: Creates a new array populated with the results of calling a provided function on every element in the calling array.

Example:

let numbers = [1, 2, 3];
let doubled = numbers.map(function(number) {
    return number * 2;
});
console.log(doubled); // Output: [2, 4, 6]

9. filter()

Purpose: Creates a new array with all elements that pass the test implemented by the provided function.

Example:

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]

10. reduce()

Purpose: Executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Example:

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 10

11. find()

Purpose: Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

Example:

let numbers = [1, 2, 3, 4, 5];
let found = numbers.find(function(number) {
    return number > 3;
});
console.log(found); // Output: 4

12. findIndex()

Purpose: Returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1.

Example:

let numbers = [1, 2, 3, 4, 5];
let index = numbers.findIndex(function(number) {
    return number > 3;
});
console.log(index); // Output: 3

13. sort()

Purpose: Sorts the elements of an array in place and returns the sorted array.

Example:

let fruits = ['banana', 'apple', 'grape'];
fruits.sort();
console.log(fruits); // Output: ['apple', 'banana', 'grape']

let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
    return a - b;
});
console.log(numbers); // Output: [1, 2, 3, 4, 5]

14. reverse()

Purpose: Reverses the array in place. The first array element becomes the last, and the last array element becomes the first.

Example:

let fruits = ['apple', 'banana', 'orange'];
fruits.reverse();
console.log(fruits); // Output: ['orange', 'banana', 'apple']

15. concat()

Purpose: Merges two or more arrays. This method does not change the existing arrays but returns a new array.

Example:

let fruits = ['apple', 'banana'];
let moreFruits = ['orange', 'grape'];
let combined = fruits.concat(moreFruits);
console.log(combined); // Output: ['apple', 'banana', 'orange', 'grape']

These are some of the essential array methods in JavaScript. They provide powerful ways to manipulate and interact with arrays, making it easier to handle data in your programs.

Enjoy!