8 Must Know JavaScript Array Methods
Being a JavaScript developer is not easy. There are a ton of things in JavaScript already and updates keep on coming on a regular basis. Each update brings some new methods or syntax which is aimed for making development in JavaScript easy and more developer friendly. So in this article, I will tell you about the 8 most useful JavaScript array methods that you must know and which will reduce your development effort exponentially. Before beginning, I would recommend you to have some knowledge about callback functions. But if you don’t have, don’t worry. I got you covered. You can first go through JavaScript callbacks here. Let’s begin!!
1. Filter
This method is used to apply filters to the array. It takes a callback function as a parameter and runs that function for each element of the array. It then returns true or false for each element in the array and returns a new array with the all elements that satisfy the filter passed in the callback function.
2. Map
This method allows you to take an array and convert it into a new array so that all the items in the new array look slightly different. It takes a callback as a parameter and iterates over each element to get what is desired. It is super convenient when you have an array of objects and you want keys or values in separate arrays.
3. Find
This method is used to find a single object / element in an array. It takes a callback function as a parameter which has a condition and checks for that condition on each element of the array. It returns the first occurrence of the element satisfying the condition.
4. ForEach
This method is different from the above methods as it does not return an array. This method is just like the for loop in C / C++. It is used to simply iterate each element of the array, thus allowing you to perform various operations on each element. Also you can have a second parameter in the callback function (in all other methods too) named as ‘index’ (or whatever you want) and it will represent the index of the corresponding element.
5. Some
This method is a bit different from other methods so far. Rather than returning a new array, this method returns either ‘true’ or ‘false’. Like all other methods, it takes a callback function as a parameter, which includes a condition or a check. If any element passes that condition, then it returns true else it returns false.
6. Every
This method is very similar to the above mentioned ‘some’ method. The only difference is that it returns true only if each element passes the condition in the callback function and if even a single element does not pass the condition, it returns false.
7. Reduce
This method is a bit different from all the above methods and is a bit complex too. It performs some operations on each element of the array and returns the combination of these operations. This method takes 2 parameters. First parameter is the callback function which again has 2 parameters. First parameter is the result of the last iteration and the second parameter is the array element. Now the first parameter needs to be initialized before the first iteration else it will give an error. For that, the reduce method has a 2nd parameter which is the starting point of the first parameter of callback function.
In the above example, the reduce method takes 2 parameters, a callback function and ‘0’ which is the starting point. The callback function also has 2 parameters, first being ‘currentTotal’ and the second ‘item’. The output of the method goes like this.
1st iteration => currentTotal = 100 + 0 (here comes the use of second parameter of the method which in this case is 0),
2nd iteration => currentTotal = 200 + 100 (currentTotal is carried in next iterations),
3rd iteration => currentTotal = 10 + 300,
4th iteration => currentTotal = 5 + 310,
5th iteration => currentTotal = 500 + 315.
6th iteration => currentTotal = 1000 + 815,
7th iteration => currentTotal = 25 + 1815
Hence the output is the final currentTotal which is 1840.
This method is extremely useful when you need to perform some kind of operation cumulatively to all the elements in the array.
8. Includes
This is a very simple method. As the name suggests it returns whether the array includes a specific element or not. Thus it has a single parameter which is the element that you want to check, if it’s present in the array or not and returns either true or false based on that.
One great thing about all these array methods is that these don’t change the original array method. So you can use them without having to worry about your original array getting manipulated.
Final Words
So this is the end of the article. Hope I was able to fulfill your purpose of coming here and you are not thinking that it was a waste of your time. This article was to give you an overview of how you can manage your arrays well. With minimal lines of code and proper convention, you can do wonders with your arrays. But the true usefulness of my article will come only if you start using these from now on in your code. See you next time!
