JavaScript arrays are versatile data structures that allow us to store and manipulate collections of elements. JavaScript provides a wide range of built-in array methods that empower developers to perform various operations on arrays efficiently. In this post, we will dive into some of the most commonly used JavaScript array methods and explore their functionalities with code examples.

JavaScript provides a variety of built-in methods that you can use to manipulate arrays. Here is an explanation of some commonly used JavaScript array methods:

  1. push()

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

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

     

  2. pop()

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

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

     

  3. shift()

    Removes the first element from an array and returns that element. It also shifts the indexes of the remaining elements.

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

     

  4. unshift()

    Adds one or more elements to the beginning of an array and returns the new length of the array. It also shifts the indexes of the existing elements.

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

     

  5. concat()

    Returns a new array by merging two or more arrays.

    let fruits1 = ['apple', 'banana'];
    let fruits2 = ['orange', 'mango'];
    let mergedFruits = fruits1.concat(fruits2);
    console.log(mergedFruits);  // Output: ['apple', 'banana', 'orange', 'mango']

     

  6. slice()

    Returns a shallow copy of a portion of an array into a new array.

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

     

  7. splice()

    Changes the content of an array by removing, replacing, or adding elements at a specified index.

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

     

  8. forEach()

    Executes a provided function once for each array element.

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

     

  9. map()

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

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

     

  10. indexOf()

    Returns the first index at which a given element is found in the array, or -1 if the element is not found.

    let fruits = ['apple', 'banana', 'orange', 'mango'];
    let index = fruits.indexOf('orange');
    console.log(index);  // Output: 2​

     

  11. lastIndexOf()

    Returns the last index at which a given element is found in the array, or -1 if the element is not found.

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

     

  12. includes()

    Determines whether an array includes a certain element and returns a boolean value.

    let fruits = ['apple', 'banana', 'orange'];
    let includesBanana = fruits.includes('banana');
    console.log(includesBanana);  // Output: true​

     

  13. join()

    Joins all elements of an array into a string, using a specified separator.

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

     

  14. reverse()

    Reverses the order of the elements in an array.

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

     

  15. sort()

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

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

     

  16. filter()

    Creates a new array with all elements that pass a certain condition.

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

     

  17. reduce()

    Applies a function against an accumulator and each element in the array to reduce it to a single value.

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

     

  18. find()

    Returns the first element in the array that satisfies a provided testing function.

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

     

  19. findIndex()

    Returns the index of the first element in the array that satisfies a provided testing function.

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

     

  20. some()

    Checks if at least one element in the array satisfies a provided testing function. It returns a boolean value.

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

     

  21. every()

    Checks if all elements in the array satisfy a provided testing function. It returns a boolean value.

    let numbers = [2, 4, 6, 8, 10];
    let allEvenNumbers = numbers.every(function(number) {
      return number % 2 === 0;
    });
    console.log(allEvenNumbers);  // Output: true​

     

  22. flatMap()

    Maps each element using a mapping function and flattens the result into a new array.

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

     

  23. reduceRight()

    Applies a function against an accumulator and each element in the array, starting from the rightmost element.

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

     

  24. flat()

    Creates a new array with all sub-array elements concatenated recursively up to the specified depth.

    let nestedArray = [1, [2, [3, [4, 5]]]];
    let flattenedArray = nestedArray.flat(2);
    console.log(flattenedArray);  // Output: [1, 2, 3, 4, 5]​

     

  25. isArray()

    Checks if a value is an array.

    let fruits = ['apple', 'banana', 'orange'];
    let isFruitsArray = Array.isArray(fruits);
    console.log(isFruitsArray);  // Output: true​

     

  26. keys()

    Returns a new array iterator that contains the keys of the array.

    let fruits = ['apple', 'banana', 'orange'];
    let keysIterator = fruits.keys();
    for (let key of keysIterator) {
      console.log(key);  // Output: 0, 1, 2
    }​