Useful Not As Well Known JavaScript Array Methods

Intro

Arrays in JavaScript have many useful methods, with a handful of them taking all the glory. However, if you look further, you will find that there are even more methods available that might better suit your use case.

We all know the usual suspects:

• forEach
• map
• reduce
• filter
• indexOf

Today, let's cover some of the other methods provide by the Array prototype.

Array.every

This method tests whether all elements in an array pass a specific test case that is implemented with a callback function.

const arr = ['rice', 'beans', 'chocolate', 'mint']
const answer = arr.every(item => item.length < 6)
// false

Array.find

This method returns the first element in an array that passes a specific test case implemented with a callback function. If no elements are found, undefined is returned.

const arr = ['rice', 'beans', 'chocolate', 'mint']
const greaterThanSix = arr.find(item => item.length > 6)
// 'chocolate'

Array.findIndex

This method returns the index of the first element in an array that passes a specific test case implemented with a callback function.

const arr = ['rice', 'beans', 'chocolate', 'mint']
const equalToFour = arr.findIndex(item => item.length === 4)
// 0

Array.flat

This one is pretty cool, and will recursively flatten any subarrays within an array. It creates a new array.

const letters = ['a', 'b', 'c', ['d', 'e', 'f'], 'g', ['h', 'i']]
const flattened = letters.flat()
// ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']

Array.some

This method tests whether atleast one of the elements in the array passes a specific test case implemented with a callback function. If there is a match it returns true, otherwise it returns false.

const nums = [1, 2, 3, 4, 5, 6]
const answer = nums.some(num => num * 3 === 9)
// true

Experimental

I've also included two experimental methods that I think are pretty cool.

Array.at

This method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.

const arr = ['rice', 'beans', 'chocolate', 'mint']

const last = arr.at(-1)
// mint
const secondToLast = arr.at(-2)
// 'chocolate'

For those of you used to doing the following, you know why this is useful.

const arr = ['rice', 'beans', 'chocolate', 'mint']
const last = arr[arr.length - 1]

Array.groupBy

This one is pretty awesome, and can easily group an array of objects by a given property. Let's take this array of objects for example:

const inventory = [
  { name: 'asparagus', type: 'vegetables', quantity: 5 },
  { name: 'bananas',  type: 'fruit', quantity: 0 },
  { name: 'goat', type: 'meat', quantity: 23 },
  { name: 'cherries', type: 'fruit', quantity: 5 },
  { name: 'fish', type: 'meat', quantity: 22 }
]

By using the Array.group method, you could achieve the following result.

{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}

All that's required is that you call the method like this:

const grouped = inventory.groupBy((obj) => obj.type)

And that's it! grouped will look exactly like the object in the previous code block.

Summary

I hope that this short article has helped open your eyes to some of the other useful methods provided by the Array prototype. As always, if you have any problems understanding any of this, feel free to shoot me a message, and I'll make sure it's crystal clear.