7 little-known but powerful array methods in JavaScript

Tari Ibaba
Last updated on October 23, 2023
7 little-known but powerful array methods in JavaScript

There's more to arrays than map() filter() find() and push().

JavaScript has over 30 array methods, and a good number of them are rarely used by many JavaScript developers despite being very powerful and capable of solving real-world problems.

Let's discover exactly 7 of these lesser-known methods and understand how they work in practice.

11 Amazing New Features in ES13

11 Amazing New Features in ES13
Get up to speed with all the latest features added in ECMAScript 13 to modernize your JavaScript with shorter and more expressive code.

1. Array copyWithin() method

The copyWithin() method copies a part of an array to another position in the same array and returns it, without increasing its length.

For example:

const array = [1, 2, 3, 4, 5];

const result = array.copyWithin(3, 1, 3);

console.log(result); // [1, 2, 3, 2, 3]

You might find the result here confusing if you're not familiar with this method. To understand how copyWithin() works let's take a look at its parameters:

  1. target: is the position in the array to copy the specified part to.
  2. start: is the start index of the part that will be copied.
  3. end: is the end index of the part that will be copied.

So by passing 3, 1, and 3 respectively, we are telling copyWithin() to take the array elements between index 1 and 3 exclusive, and copy them to another part of the array, starting at index 3. This means copyWithin() starts copying the elements 1 and 2 at the place where the element 4 is, replacing 4 and 5.

Let's see another example:

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// "end" not specified so last array index used
const result = array.copyWithin(0, 5);

// [6, 7, 8, 9, 10, 6, 7, 8, 9, 10]
console.log(result);

Here we are telling copyWithin() to start copying the numbers 6, 7, 8, 9, and 10 to the place where 1 is, replacing any successive elements until 10 (the last element) has been copied.

As stated earlier, copyWithin() will not increase the length of the array, but will stop the copying if it reaches the end of the array.

const array = [1, 2, 3, 4, 5];

// Copy numbers 2, 3, 4, and 5
const result = array.copyWithin(3, 1, 6);

console.log(result); // [1, 2, 3, 2, 3]

2. Array at() method

This method is one of the new ES13 JavaScript features, it provides a cleaner way to access an element from the end of an array.

Instead of writing code like this:

const arr = ['a', 'b', 'c', 'd'];

// 1st element from the end
console.log(arr[arr.length - 1]); // d

// 2nd element from the end
console.log(arr[arr.length - 2]); // c

With at(), we can do this more concisely and expressively, like this:

const arr = ['a', 'b', 'c', 'd'];

// 1st element from the end
console.log(arr.at(-1)); // d

// 2nd element from the end
console.log(arr.at(-2)); // c

We simply pass a negative value of -N to access the Nth element from the end of the array.

3. Array reduceRight() method

The reduceRight() method works similarly to the more popular reduce() method, with the difference being that the callback function is applied on each array value from right to left instead of left to right.

const letters = ['b', 'e', 'a', 'u', 't', 'y'];

const word = letters.reduce((word, letter) => word + letter, '');

console.log(word); // beauty


const wordReversed = letters.reduceRight((word, letter) => word + letter, '');

console.log(wordReversed); // ytuaeb

reduceRight() repeatedly executes the passed callback function for each element of the array from right to left. The callback we passed here simply concatenates the current element and the accumulator string, eventually resulting in the reversed word.

reduceRight() can help when you want a list to be expressed from left to right, but evaluated from right to left. Here's an example of this:

const thresholds = [
  { color: 'blue', threshold: 0.7 },
  { color: 'orange', threshold: 0.5 },
  { color: 'red', threshold: 0.2 },
];

const value = 0.9;

const threshold = thresholds.reduceRight((color, threshold) =>
  threshold.threshold > value ? threshold.color : color
);

console.log(threshold.color); // red

4. Array findLast() method

Another new addition to JavaScript in ES13 is the findLast() method, used to search for an item in an array, starting from the last element.

We can use it in cases where we know that finding from the last element might achieve better performance than using the find() method.

For example, here we're trying to get the item in the array with the value property equal to 'y'. With find():

const letters = [
  { value: 'v' },
  { value: 'w' },
  { value: 'x' },
  { value: 'y' },
  { value: 'z' },
];

const found = letters.find((item) => item.value === 'y');

console.log(found); // { value: 'y' }

This works, but as the target object is closer to the tail of the array, we might be able to make this program run faster if we use the findLast() method to search the array from the end instead:

const letters = [
  { value: 'v' },
  { value: 'w' },
  { value: 'x' },
  { value: 'y' },
  { value: 'z' },
];

const found = letters.findLast((item) => item.value === 'y');

console.log(found); // { value: 'y' }

Another use case for findLast() is when we have to specifically search the array from the end to get the correct element.

For example, if we want to find the last even number in a list of numbers, find() would produce a totally wrong result:

const nums = [7, 14, 3, 8, 10, 9];

// gives 14, instead of 10
const lastEven = nums.find((value) => value % 2 === 0);

console.log(lastEven); // 14

But findLast() will start the search from the end and give us the correct item:

const nums = [7, 14, 3, 8, 10, 9];

const lastEven = nums.findLast((num) => num % 2 === 0);

console.log(lastEven); // 10

5. Array findLastIndex() method

findLastIndex() works like findLast(), but it returns the index of the found element, rather than the element itself.

In the following example, we use findLastIndex() to find the index of the last car object in the array with the color red and remove it.

const carQueue = [
  { color: 'yellow' },
  { color: 'red' },
  { color: 'green' },
  { color: 'red' },
  { color: 'blue' },
];

const lastRedIndex = carQueue.findLastIndex((car) => car.color === 'red');

// Remove car object with splice()
carQueue.splice(lastRedIndex, 1);

/**
[
  { color: 'yellow' },
  { color: 'red' },
  { color: 'green' },
  { color: 'blue' }
]
 */
console.log(carQueue);

6. Array lastIndexOf() method

The lastIndexOf() method returns the last index where a particular element can be found in an array.

const colors = ['a', 'e', 'a', 'f', 'a', 'b'];

const index = colors.lastIndexOf('a');

console.log(index); // 4

We can pass a second argument to lastIndexOf() to specify an index in the array where it should stop searching for the string after that index:

const colors = ['a', 'e', 'a', 'f', 'a', 'b'];

// Get last index of 'a' before index 3
const index1 = colors.lastIndexOf('a', 3);

console.log(index1); // 2

const index2 = colors.lastIndexOf('a', 0);

console.log(index2); // 0

const index3 = colors.lastIndexOf('f', 2);

console.log(index3); // -1

7. Array flatMap() method

The flatMap() method transforms an array using a given callback function and then flattens the transformed result by one level:

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

const withDoubles = arr.flatMap((num) => [num, num * 2]);


console.log(withDoubles); // [1, 2, 2, 4, 3, 6, 4, 8]

Calling flatMap() on the array does the same thing as calling map() followed by a flat() of depth 1, but it`s a bit more efficient than calling these two methods separately.

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

// flat() uses a depth of 1 by default
const withDoubles = arr.map((num) => [num, num * 2]).flat();

console.log(withDoubles); // [1, 2, 2, 4, 3, 6, 4, 8]

Final thoughts

Beyond the familiar, JavaScript's array methods, like copyWithin, at, reduceRight, and others, showcase the language's extensive functionality. Though lesser-known, their potential to solve unique challenges amplifies our coding efficacy. Keep exploring, the right array method could transform your code soon.

Every Crazy Thing JavaScript Does

Every Crazy Thing JavaScript Does
Avoid painful bugs and save valuable time with Every Crazy Thing JavaScript Does, a captivating guide to the subtle caveats and lesser-known parts of JavaScript.

See also