15 Useful JavaScript Array Methods You Might Not Be Using

15 Useful JavaScript Array Methods You Might Not Be Using

At this point, I don't think I really need to write a long introduction on arrays. But if any of you is interested in refreshing your knowledge on arrays and basic array methods, you can do that here. I already wrote a detailed article on it, so go and have a read ;)

Since we are done with our almost non-existent intro, let's get started!

1. Array.from()

This method creates a new but shallow-copied Array instance from an array-like or iterable object.

Example:

console.log(Array.from('hello'));
// output: Array ["h", "e", "l", "l", "o"]

console.log(Array.from([2, 3, 4], x => x + x));
// expected output: Array [4, 6, 8]

2. Array.fill()

This method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.

Example:

const arrayA = [1, 2, 3, 4];

// fill with 1 from position 2 until position 4
console.log(arrayA.fill(0, 2, 4));
// output: [1, 2, 1, 1]

// fill with 6 from position 1
console.log(arrayA.fill(5, 1));
// output: [1, 6, 6, 6]

console.log(arrayA.fill(8));
// output: [8, 8, 8, 8]

3. Array.filter()

This method creates a new array with all elements that pass the test implemented by the provided function.

Example:

const words = ['hello', 'hi', 'elite', 'amazing', 'adios', 'present'];

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

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

4. Array.find()

This 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.

Example:

const arrayA = [7, 12, 8, 140, 54];

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

console.log(found);
// output: 12

5. Array.forEach()

This method executes a provided function once for each array element.

Example:

const arrayA = ['c', 'd', 'e'];

arrayA.forEach(element => console.log(element));

// output: "c"
// output: "d"
// output: "e"

6. Array.map()

Right pointing backhand index This method creates a new array populated with the results of calling a provided function on every element in the calling array.

Example:

const arrayA = [3, 4, 7, 16];

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

console.log(map1);
// output: Array [6, 8, 14, 32]

7. Array.flat()

This method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Example:

const arrA = [0, 1, 2, [5, 7]];

console.log(arrA.flat());
// output: [0, 1, 2, 5, 7]

const arrB = [0, 1, 2, [[[5, 7]]]];

console.log(arrB.flat(2));
// output: [0, 1, 2, [5, 7]]

8. Array.reverse()

This method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

Example:

const arrayA = ['A', 'B', 'C'];
console.log('arrayA:', arrayA);
// output: "arrayA:" Array ["A", "B", "C"]

const reversed = arrayA.reverse();
console.log('reversed:', reversed);
// output: "reversed:" Array ["C", "B", "A"]

console.log('arrayA:', arrayA);
// output: "arrayA:" Array ["C", "B", "A"]

9. Array.every()

This method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

Example:

const isBelow = (currentValue) => currentValue < 50;

const arrayA = [3, 0, 39, 19, 40,45];

console.log(arrayA.every(isBelow));
// output: true

10. Array.copyWithin()

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

Example:

const arrayA = ['A', 'B', 'C', 'D', 'E'];

// copy to index 0 the element at index 3
console.log(arrayA.copyWithin(0, 3, 4));
// output: Array ["D", "B", "C", "D", "E"]

// copy to index 1 all elements from index 3 to the end
console.log(arrayA.copyWithin(1, 3));
// output: Array ["D", "D", "E", "D", "E"]

11. Array.reduce()

The easiest-to-understand explanation for reduce() is that it returns the sum of all the elements in an array. It walks through the array element-by-element and at each step, it adds the current array value to the result from the previous step until there are no more elements to add.

Moreover, it can also apply any callback function such as mean, median, count, etc. The sum is the simplest and easiest to understand use case!

Example:

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

// 3 + 2 + 8 + 4
console.log(arrayA.reduce(reducer));
// output: 17

// 5 + 3 + 2 + 8 + 4
console.log(arrayA.reduce(reducer, 5));
// output: 22

12. Array.flatMap()

This method returns a new array that is basically formed by applying a given callback function to each element of the array, and then flattening the result by one level. It is identical to a map() followed by a flat() of depth 1. But it is slightly more efficient and time-saving than calling those two methods separately.

Example:

let arrA = [3, 2, 9, 4];

arrA.flatMap(x => [x * 2]);
// [6, 4, 18, 8]

// only one level is flattened
arrA.flatMap(x => [[x * 2]]);
// [[3], [4], [9], [8]]

13. Array.some()

This method checks to see if at least one of array’s item passed a certain pre-defined condition. If passed, it return "true" otherwise "false".

   const arrayA = [1, 2, 3, 4, 5, 6];

  // at least one element is greater than 3?
  const largeNum = arr.some(num => num > 3);
  console.log(largeNum); 
  // output: true

14. Array.of()

This method create array from every arguments passed into it.

  const alphabets = Array.of(a, b, c, d, e, f);
  console.log(alphabets); 
  // output: [a, b, c, d, e, f]

15. Array.sort()

This method is used to sort any array’s items either in ascending or descending order.

  const numbers = [1, 2, 3, 4, 5, 6];
  const alphabets = ['d', 'a', 'c', 't', 'z'];

  //sort in descending order
  descOrder = numbers.sort((a, b) => a > b ? -1 : 1);
  console.log(descOrder); 
  //output: [6, 5, 4, 3, 2, 1]

  //sort in ascending order
  ascOrder = alphabets.sort((a, b) => a > b ? 1 : -1);
  console.log(ascOrder); 
  //output: ['a', 'c', 'd', 't', 'z']

Let's connect!

Twitter

Github