List of 28 Javascript Arrays Methods you should know

Arrays in Javascript provide a lot of methods. To make things easier, I will share a useful list with 28 JavaScript Array methods you should know.

Note: If you know nothing about array, go to javascript basic of array .

Array Methods

Let’s see more about each method of the list

1. concat()

This method is used to merge two or more arrays and returns a new array, without changing the existing arrays.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];

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

console.log(arr1);
// expected output: ["a", "b", "c"]

console.log(arr2);
// expected output: ["d", "e", "f"]

2. copyWithin()

Ths method shallow copies part of an array to another location in the same array and returns it without modifying its length.

const arr = ['h', 'e', 'l', 'l', 'o'];

// copy to index 1 ("e") all elements from index 3 to the end ("l", "o")
console.log(array1.copyWithin(1, 3));
// expected output: ["h", "l", "o", "l", "o"]

3. entries()

This method returns a new Array Iterator that contains the key/value pairs for each index in the array.

const arr = ['f', 'o', 'o'];

const entries = arr.entries();

for (let entry of entries) {
  console.log(entry); 
  // expected output: [0, "f"]
  // expected output: [1, "o"]
  // expected output: [2, "o"]
}

4. every()

This method check if all element s in the array passes the condition by the provided callback function, taking three argument. The first one is the currentValue, this will be the current element being processed in the array. The second is optional and is the index of the current element. The last one is also optional and is the array that every() was called upon. If passed, it return true otherwise false.

const arr = [1, 3, 5];

const even = (element) => !!(element % 2);

console.log(arr.every(even));
// expected output: true

5. fill()

this method fills (modifies) all the elements of an array from an optional parameter start index (default zero) to an optional parameter end index (default array length) with a static value and returns the modified array.

const arr = [1, 2, 3];

// fill with 3 from position 1
console.log(arra.fill(3, 1));
// expected output: [1, 3, 3]

console.log(arra.fill(7));
// expected output: [7, 7, 7]

const arr = new Array(3);

console.log(arr);
// expected output: [empty, empty, empty]

console.log(arr.fill(1));
// expected output: [1, 1, 1]

6. filter()

This method create new array with all elements that pass the condition inside the provided callback function, taking three arguments. The first one is the currentValue, this will be the current element being processed in the array. The second is optional and is the index of the current element. The last one is also optional and is the array that filter() was called upon. That function is a predicate, to test each element of the array, return true to keep the element, false otherwise.

const arr = [1, 2, 3];

const filter = arr.filter(element => !!(element % 2));

console.log(filter);
// expected output: Array [1, 3]

7. find()

This method returns the value of the first element in the array that passes the condition in the provided callback function, taking three argument. The first one is the currentValue, this will be the current element being processed in the array. The second is optional and is the index of the current element. The last one is also optional and is the array that find() was called upon. Otherwise undefined is returned. Take in consideration that the callback function is invoked for every index of the array from 0 to length - 1 until the condition is passed.

const arr = [1, 2, 3];

const finder = (element) => element > 2;

const found = arr.find(finder);

console.log(found);
// expect output: 3

8. findIndex()

This method returns the index of the first element in the array that passes the condition in the provided callback function, taking three argument. The first one is the currentValue, this will be the current element being processed in the array. The second is optional and is the index of the current element. The last one is also optional and is the array that findIndex() was called upon. Otherwise, it returns -1, indicating that no element passed the condition.

const arr = [1, 2, 3];

const indexFinder = (element) => element > 2;

const indexFound = arr.findIndex(indexFinder);

console.log(indexFound);
// expect output: 2

9. forEach()

This method you can to loop over array by executing a provided callback function once for each element, taking three arguments. The first one is the currentValue, this will be the current element being processed in the array. The second is optional and is the index of the current element. The last one is also optional and is the array that forEach() was called upon.

const arr = [1, 2, 3];

arr.forEach(element => {
    console.log(element);
});

// expected output: 1
// expected output: 2
// expected output: 3

10. includes()

This method check if an array includes the value passed among its entries, returning true or false as appropriate, taking two arguments. The first one is the valueToFind that is what we are looking for. The second is optional and is the fromIndex that is position of the array at which to begin searching fot the valueToFind

const arr = [1, 2, 3];

console.log(arr.includes(2));
// expected output: true

console.log(arr.includes(4));
// expected output: false

11. indexOf()

This method returns the first index at which a given element can be found in the array, or -1 if it is not present. This method takes two arguments, the first is the searchElement and the second is optional and is the fromIndex that will be the index to start the search

const arr = [1, 2, 3];

const index = arr.indexOf(2);

console.log(index);
// expect output: 1

12. join()

This method returns a new string by concatenating all of the array’s elements, separated by a optional string parameter separator or by commas. If the array has only one item, then that item will be returned without using this separator.

const arr = ['h', 'e', 'l', 'l', 'o'];

console.log(arr.join('')); 
// expected output: "hello"

13. keys()

This method returns a new Array Iterator that contains the keys for each index in the array.

const arr = ['f', 'o', 'o'];

const keys = arr.keys();

for (let key of keys) {
  console.log(key); 
  // expected output: 0 1 2
}

14. lastIndexOf()

This method returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at an optional parameter fromIndex otherwise it will be the arr.length - 1.

const fruits = ['Apple', 'Orange', 'Banana'];

console.log(fruits.lastIndexOf('Orange'));
// expect output: 1

15. map()

This method create new array with the result of calling the provided callback function on every element, taking three arguments. The first one is the currentValue, this will be the current element being processed in the array. The second is optional and is the index of the current element. The last one is also optional and is the array that map() was called upon.

const arr = [1, 2, 3];

const map = arr.map(element => element * 2);

console.log(map);
// expected output: Array [2, 4, 6]

16. pop()

This method removes the last element from the end of Array and returns that removed element.

const fruits = ['Apple', 'Orange'];

fruits.pop();

console.log(fruits);
// expect output: Array ["Apple"]

17. push()

This method adds one or more elements to end of Array and returns the new length.

const fruits = ['Apple', 'Orange'];

console.log(fruits.push('Banana'));
// expect output: 3

console.log(fruits);
// expect output: Array ["Apple", "Orange", "Banana"]

18. reduce()

This method applies a provided function against an accumulator and each element in the array to reduce it to a single output value.

The reducer function takes four arguments:

• Accumulator (acc)
• Current Value (cur)
• Current Index (idx)
• Source Array (src)

The reducer function’s returned value is assigned to the accumulator, whose value is remembered across each iteration.

const arr = [1, 2, 3];

const reducer = (accumulator, currentValue) => accumulator + currentValue;

console.log(arr.reduce(reducer, 0));
// expected output: 6

19. reduceRight()

This method applies a function against an accumulator and each value of the array from right-to-left to reduce it to a single value, is like the reduce() method but in the opposite direction.

const arr = ['o', 'l', 'l', 'e', 'h'];

const reducer = (accumulator, currentValue) => accumulator + currentValue;

console.log(arr.reduceRight(reducer, ''));
// expected output: "hello"

20. reverse()

This method reverses an array in place. The first array element becomes the last, and the last array element becomes the first. Take in consideration that the original array will not be modified.

const arr = [1, 2, 3];

arr.reverse();

console.log(arr);
// expect output: Array [3, 2, 1]

21. shift()

This method removes the first element from the top of an Array and returns that removed element.

const fruits = ['Apple', 'Orange'];

fruits.shift();

console.log(fruits);
// expect output: Array ["Orange"]

22. slice()

This method returns a shallow copy of a portion of an array into a new array. The original array will not be modified. This method takes two optional arguments. The first in the begin that is the index which to begin extraction, this one could be negative indicating an offset from the end of the sequence. The second is the end index before which to end extraction.

const arr = [1, 2, 3];

const partialArr = arr.slice(1);

console.log(partialArr);
// expect output: Array [2, 3]

const arr = [1, 2, 3];

const partialArr = arr.slice(1, 2);

console.log(partialArr);
// expect output: Array [2]

const arr = [1, 2, 3];

const partialArr = arr.slice(-1);

console.log(partialArr);
// expect output: Array [3]

23. some()

This method check if at least one element in the array passes the condition by the provided callback function, taking three argument. The first one is the currentValue, this will be the current element being processed in the array. The second is optional and is the index of the current element. The last one is also optional and is the array that some() was called upon. If passed, it return true otherwise false.

const arr = [1, 2, 3];

const even = (element) => !!(element % 2);

console.log(arr.some(even));
// expected output: true

24. sort()

This method sort the elements of an array either ascending or descending order and returns the sorted array. This method takes one argument that is a callback function. This compareFunction is optional and defines the sort order and receives two arguments the firstElement and the secondElement, if omitted the default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values. Take in consideration that the original array will not be modified.

const arr = [3, 2, 1];

arr.sort();

console.log(arr);
// expect output: Array [1, 2, 3]

const arr = [3, 2, 1];

const ascendingSort = (a, b) => {
    if (a < b) {
        return -1;
    }
    if (a > b) {
        return 1;
    }

    return 0;
}

arr.sort(ascendingSort);

console.log(arr);
// expect output: Array [1, 2, 3]

const arr = [1, 2, 3];

const descendingSort = (a, b) => {
    if (a > b) {
        return -1;
    }
    if (a < b) {
        return 1;
    }

    return 0;
}

arr.sort(descendingSort);

console.log(arr);
// expect output: Array [3, 2, 1]

25. splice()

This method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place and returns the deleted elements. This method takes three arguments. The first is the start that is the index at which to start changing the array, if greater than the length of the array, start will be set to the length of the array, if negative, it will begin that many elements from the end of the array. The second is optional and is deleteCount is an integer indicating the number of elements in the array to remove from start. The third argument in fact could be as many elements as you want, they are the element to add to the array, beginning from start. Take in consideration that the original array will not be modified.

const arr = [1, 2, 3];

arr.splice(2);

console.log(arr);
// expected output: Array [1, 2]

const arr = [1, 2, 3];

// remove at index length - 2
arr.splice(-2);

console.log(arr);
// expected output: Array [1]

const arr = [1, 2, 3];

// inserts at index 1
arr.splice(1, 0, 4);

console.log(arr);
// expected output: Array [1, 4, 2, 3]

const arr = [1, 2, 3];

// replace at index 1
const deletedItems = arr.splice(1, 1, 4);

console.log(arr);
// expected output: Array [1, 4, 3]

console.log(deletedItems);
// expected output: Array [2]

26. toString()

This method returns a string that represents the specified Array and its elements.

const fruits = ['Apple', 'Orange'];

console.log(fruits.toString());
// expect output: "Apple, Orange"

27. unshift()

This method adds one or more elements to the top of an Array and returns the new length.

const fruits = ['Apple', 'Orange'];

console.log(fruits.unshift('Banana'));
// expect output: 3

console.log(fruits);
// expect output: Array ["Banana", "Apple", "Orange"]

28. values()

This method returns a new Array Iterator that contains the keys for each value in the array.

const arr = ['f', 'o', 'o'];

const values = arr.values();

for (let value of values) {
  console.log(value); 
  // expected output: "f" "o" "o"
}

You can find more info of Array at MDN