Important Array Functions In JS

In programming, an array is a collection of elements or items. The array data structure is widely used in all programming languages that support it.

In this Article, I'll show you a short Overview of the most important array methods in JavaScript:

Array.map()

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

    const array1 = [1, 4, 9, 16];

   // pass a function to map
   const map1 = array1.map(x => x * 2);

   console.log(map1);
   // expected output: Array [2, 8, 18, 32]

for more information

Array.find()

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

    const array1 = [5, 12, 8, 130, 44];

    const found = array1.find(element => element > 10);

    console.log(found);
    // expected output: 12
    console.log(map1);
    // expected output: Array [2, 8, 18, 32]

for more information

Array.findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

    const array1 = [5, 12, 8, 130, 44];

    const isLargeNumber = (element) => element > 13;

    console.log(array1.findIndex(isLargeNumber));
    // expected output: 3

for more information

Array.splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. To access part of an array without modifying it, see slice().

    const months = ['Jan', 'March', 'April', 'June'];
    months.splice(1, 0, 'Feb');
    // inserts at index 1
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "June"]

    months.splice(4, 1, 'May');
    // replaces 1 element at index 4
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "May"]

for more information

Array.slice()

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

    const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

    console.log(animals.slice(2));
    // expected output: Array ["camel", "duck", "elephant"]

    console.log(animals.slice(2, 4));
    // expected output: Array ["camel", "duck"]

    console.log(animals.slice(1, 5));
    // expected output: Array ["bison", "camel", "duck", "elephant"]

    console.log(animals.slice(-2));
    // expected output: Array ["duck", "elephant"]

    console.log(animals.slice(2, -1));
    // expected output: Array ["camel", "duck"]

for more information

Array.concat()

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

    const array1 = ['a', 'b', 'c'];
    const array2 = ['d', 'e', 'f'];
    const array3 = array1.concat(array2);

    console.log(array3);
    // expected output: Array ["a", "b", "c", "d", "e", "f"]

for more information

Array.reduce()

The reduce() method executes a user-supplied “reducer” callback function on each element of the array, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

Perhaps the easiest-to-understand case for reduce() is to return the sum of all the elements in an array.

The reducer walks through the array element-by-element, at each step adding the current array value to the result from the previous step (this result is the running sum of all the previous steps) — until there are no more elements to add.

This is shown in the following interactive example:

   const array1 = [1, 2, 3, 4];
   const reducer = (previousValue, currentValue) => previousValue + currentValue;

   // 1 + 2 + 3 + 4
   console.log(array1.reduce(reducer));
   // expected output: 10

   // 5 + 1 + 2 + 3 + 4
   console.log(array1.reduce(reducer, 5));
   // expected output: 15

for more information

Array.filter()

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

   const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

   const result = words.filter(word => word.length > 6);

   console.log(result);
   // expected output: Array ["exuberant", "destruction", "present"]

for more information