10 Useful JavaScript Array Methods

ECMAScript 5 includes many utilitarian methods for working with arrays to JavaScript:

10 Useful JavaScript Array Methods

ECMAScript 5 includes many utilitarian methods for working with arrays to JavaScript:

  • Array.isArray()
  • Array.prototype.every()
  • Array.prototype.filter()
  • Array.prototype.forEach()
  • Array.prototype.indexOf()
  • Array.prototype.lastIndexOf()
  • Array.prototype.map()
  • Array.prototype.reduce()
  • Array.prototype.some()

The next standards added find, findIndex, flat, flatMap, fill, etc. But it still seems to me that this is not enough. In this article, I discuss what methods I am missing when working with arrays.


1. The first and last Getters

One of the most common use cases is to get the first and last value of an array.

Array.prototype.first is a getter that returns the first element of an array. If the array is empty, then the getter will return undefined.

The code is no better. You can comfortably code without the first getter. But to get the last element of the array, we definitely need to know its length. The last getter will free us from this dependency.

Array.prototype.last is a getter that returns the last element of the array. If the array is empty, then the getter will return undefined.

There is an example of using last and first together with destructuring


2. Array.prototype.clear()

There are many ways to clear an array in JavaScript. By the link below, you can read about 4 of them with explanations about performance.

How do I empty an array in JavaScript?
Ways to clear an existing array A: Method 1 (this was my original answer to the question) This code will set the…

For example:

The code looks unreadable. It’s not even clear what the developer wants to achieve.

I present to your attention Array.prototype.clear — a method that clears an array.

The code is clean, short, and readable.


3. Array.prototype.get(index)

I don't like the way to get an element from an array by index. I want to use the get method for this. I have no particular reason why the get method is better than the classic square brackets, but I like it better.

Array.prototype.get is a method that returns an array item by index.


4. Array.prototype.insert(index, …elements)

There are three methods to insert an element into an array:

1. push to insert at the end of the array,

2. unshift to insert at the beginning

3. splice to insert elements from a specific position.

Everything is clear with push and unshift. But with splice everything is a little more interesting. This method can both remove elements and insert them. I would apply a different method for each operation. And the first one is to insert.

Array.prototype.insert is a method that can insert elements into an array starting from the specified index.


5. Array.prototype.delete(item)

To remove an item from an array, we first need to get its index and then delete it.

Array.prototype.delete is a method that can delete items without an index


6. Array.prototype.deleteAt(index)

Array.prototype.deleteAt is a method that deletes an array item by its index.


7. Array.prototype.deleteWhere((item, index) ⇒ boolean)

Array.prototype.deleteWhere is a method that removes all array elements that pass the test implemented by the provided function. The function will be called for each of the elements. If the function returns true, then the element will be removed.

deleteWhere works like thefilter method, but with one important difference: deleteWhere mutates the original array.


8. Array.prototype.findLast((item, index) ⇒ boolean)

Array.prototype.findLast is a method that returns the last element of the array that passes the condition.


9. Array.prototype.findLastIndex((item, index) ⇒ boolean)

Array.prototype.findLastIndex is a method that returns the last index of an element that passes the condition.


10. Array.prototype.shuffle()

Array.prototype.shuffle is a method that shuffles an array in place and returns it.

Conclusion

I have listed my top methods, the lack of which I feel most often. Perhaps some of them will appear in the next versions of the ECMAScript standard. What methods for working with collections in JavaScript are you missing?

Read more