10 JavaScript Array Methods To Boost Your Code Performanc
With lots of instance methods, the Array API is one of the biggest in JavaScript. At first, it can be overwhelming. It is important to invest some time in getting familiar with it. Methods like map() and forEach() are widely abused. Instead, by using the right interface you can make your code faster, more efficient, and more readable.
There is something to consider when using array methods: some are immutable and some are mutable. Being aware of what type of method you are using is crucial. Misuse can lead to nasty bugs.
In this article, we will be looking at the ten more useful instance methods of the JavaScript Array object and where they shine.
If you want to make a copy of an array by a start and end index, you might want to use slice(). This method is a pure function so it won’t have any side effects, nor mutate the target array.
“The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.” — MDN
Both parameters are optional. If invoked without any params, it will just copy the whole object. If you call it with just one positive argument, it will give you an array of length=1. You can use a negative offset to get the last elements of the array.
This method is helpful when you need to build subsets on an array and don’t want your target array mutated.
This method is similar to the previous one but with one big difference: It will mutate your target array. It is useful when you are dealing with a big array and you need to be partially consuming subsets of it.
“The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.”— MDN
Let’s execute the previous example but using the splice()method:
screenshot by the author of a method splice execution with different parameters
We can observe how the target array was mutated and how it’s blank after the two executions of the splice()method.
The includes() method is a tool to check whether a certain element is present in the array. It returns true or false.
It doesn’t accept any equality function, so it will match if the object/primitive is contained in the object. For performance tuning, you can pass the starting index as the second parameter. That index can be negative or positive. If negative, it will check the last x numbers.
Once an item is found it will stop iterating through the remaining items, resulting in a better performance than looping through the whole array.
The some() method is similar to the includes() one. It doesn’t mutate the array either. The difference is that some() provides an equality callback and includes() relies on matching primitives/objects. Another difference is that it doesn’t let you customize the starting index.
Let’s look at the syntax:
arr.some(callback(element[, index[, array]])[, thisArg])
Let’s say we have an array, and we want to check if any of the items is greater than 10. We can’t use the includes() method for that scenario. Let’s see how intuitive is to do that with the some() method.
origamiaround
germansingergirl
janainaart
kaledo-art
romaincrisis