Here are the most used array methods in JavaScript and I have curated in such a way that the official documentation of JavaScript is explained easily. Ok, grab a coffee and let’s dive into the concepts.
1. Map()
Executes the provided function for every element in the array.
Parameters Passed: A callback function that has three in-built parameters passed.
- Current Value — The current value passed into the function from the array.
- Index — Index value of the current element on the array.
- Array — The iterated array itself can be passed as a parameter.
Return Value: A new array is returned with the results from the callback function.
Here I have declared an array called (myArr) and I have used map() method. See how the callback function executes for each element in the array and returns the element by multiplying by 2.Now a new array is formed called (newArr) without mutating the original array (myArr).
2. Filter()
Same as the map() method executes the callback function for each element in the array, but the returned array only contains the true element that is specified as a condition, so the element that satisfies the conditions are returned.
Parameters Passed: A callback function that has three in-built parameters passed.
- Current Value — The current value passed into the function from the array.
- Index — Index value of the current element on the array.
- Array — The iterated array itself can be passed as a parameter.
Returned Value: Only the elements that satisfy the condition are returned.
Here I have declared an array called (myArr) and I have used filter() method. See how the callback function executes for each element in the array and returns the element that satisfies the condition(true only). Now a new array is formed called (newArr) without mutating the original array (myArr) and see the (newArr) only contains elements that are greater than equal to two.
3. Reduce()
Reduce() method is used to reduce the array to a single value. For example: Suppose in an array you have [1,2,3…..100] and you want to know the sum of all elements in an array, simply use reduce() method to find the value.
Parameters Passed: A callback function that takes four parameters.
- Accumulator — It holds the return value from each iteration in the array, By default, if no initial value is set it takes the values of the first element in the iteration or its initial value can be set.
- Current Value — The current value passed into the function from the array.
- Index — Index value of the current element on the array.
- Array — The iterated array itself can be passed as a parameter.
Returned Value: A single value (i.e reduced from the array).
Here you can see I have an Array called (myArr) and a reduce() method is applied to that myArr.I have set the accumulator to an initial value zero( see after enclosing curly brackets ). So each time the accumulator and element get added up it returns the value to the accumulator and at last iteration, the last value is returned to (result) variable.
4. Some()
Some() method is used to check if at least one element in the array satisfies whatever condition is set in the function and stops at that element that passed the condition and does not iterate over elements.
Parameters Passed: A callback function that has three in-built parameters passed.
- Current Value — The current value passed into the function from the array.
- Index — Index value of the current element on the array.
- Array — The iterated array itself can be passed as a parameter.
Returned Value: Returns boolean value based on the condition satisfied, true or false.
Here I have an array called (myArr) and used some() method, the condition is given that element should be greater than 1 and since we have elements greater than 1 from 2….10 in the array see the iteration stops at 2 itself since 2 satisfied that it is greater than 1 and return the true value to (resultOne) variable.
5. Every()
Every() method is the same as some() method except the condition should be satisfied for all elements in the array. It also returns a boolean value either true or false.
Parameters Passed: A callback function that has three in-built parameters passed.
- Current Value — The current value passed into the function from the array.
- Index — Index value of the current element on the array.
- Array — The iterated array itself can be passed as a parameter.
Returned Value: Returns boolean value based on the condition satisfied, true or false.
Here I have an array called (myArr) and used every() method, the condition is given that element should be greater than 0 and since we have elements greater than 0 from 1….10 in the array see the iteration runs for all elements in the array and return the true value to (resultOne) variable.
6. Find()
It is used to find the value of the element that satisfies the condition provided in the function. It returns the first occurrence of the element in the array.
Parameters Passed: A callback function that has three in-built parameters passed.
- Current Value — The current value passed into the function from the array.
- Index — Index value of the current element on the array.
- Array — The iterated array itself can be passed as a parameter.
Returned Value: Returns the first occurrence of the element in the array that satisfies the condition.
Here I have an array called (myArr) and used find() method, the condition is given that element should be greater than 1 and since we have elements greater than 1 from 2….4 in the array see the iteration stops at 2 since the condition is satisfied even though there are other elements that satisfy the same condition since 2 was the first element to satisfy the condition and only first occurrence element is returned and returns that element to (resultOne) variable.
Note: Same as some() method here also the iteration stops when the first occurrence of an element is found and doesn’t run for other elements in the array.
7. Includes()
Checks whether the given value is found within the array, If found it returns a boolean value.
Parameters Passed:
- Value — Value to be searched in the array.
- fromIndex — From which index position in the array it should start searching. By default, the value is 0.
Returned value: A boolean value either true if the value is found in the array or false if the value is not found in the array.
Here I have declared an array called (myArr) and used includes() method. See in the function called resultOne, I am passing a value 3 and since 3 is in (myArr) it returns a true value. In the second function called resultTwo, I have passed 1 and also passed another value to specify in which index position the searching should take place. In my case, I have specified 2(index position) so searching starts from 3 since value 2 is not after 3 in (myArr) it returns false.
8. forEach()
Executes the provided function once for each element in the array.
Parameters Passed: A callback function that has three in-built parameters passed.
- Current Value — The current value passed into the function from the array.
- Index — Index value of the current element on the array.
- Array — The iterated array itself can be passed as a parameter.
Here I have declared an array called (myArr) and I have used forEach() method. See how the callback function executes for each element in the array and prints each element in the array. See when I print the result variable it shows undefined since forEach returns undefined.
Did you find this post useful? Have you learned the eight array methods explained above? Still, there are other array methods in JavaScript. Refer MDN.
Thanks for reading 🚀 .
👨💻 Twitter |⚓️ LinkedIn |🌐 Kishore.io
