Must use JavaScript Array Functions – Part 3
Last Updated :
20 Jun, 2023
Previous articles:
In this article, we are going to discuss the following JavaScript array functions
JavaScript Array.Prototype.reduce(): Array.prototype.reduce() function is used when the programmer needs to iterate over a JavaScript array and reduce it to a single value. A callback function is called for each value in the array from left to right. The value returned by the callback function is available to the next element as an argument to its callback function. In case the initialValue is not provided, reduce’s callback function is directly called on the 2nd element with the 1st element being passed as previousValue. In case the array is empty and the initial value is also not provided, a TypeError is thrown.
Syntax:
arr.reduce(callback[, initialValue])
Parameters:
- callback: callback function to be called for each element of the array arr
- previousValue: Value returned by previous function call or initial value.
- currentValue: Value of current array element being processed
- currentIndex: Index of the current array element being processed
- array: The original array on which reduce is being called.
- initialValue(optional): Initial value to be used as previousValue when the callback function is invoked for the first time.
Example 1: To find the sum of an array of integers.
JavaScript
function reduceFun1(previousValue, currentValue, index, array) {
return previousValue + currentValue;
}
let result = [1, 2, 3, 4, 5].reduce(reduceFun1);
console.log(result);
Output:
15
Example 2: Given an array of objects containing addresses of sales locations and find the total sales done in NY
JavaScript
let arr = [{ name: "customer 1", sales: 500, location: "NY" },
{ name: "customer 1", sales: 200, location: "NJ" },
{ name: "customer 1", sales: 700, location: "NY" },
{ name: "customer 1", sales: 200, location: "ORD" },
{ name: "customer 1", sales: 300, location: "NY" }];
function reduceFun2(previousValue, currentValue, index, array) {
if (currentValue.location === "NY") {
//console.log(previousValue.sales);
previousValue.sales = previousValue.sales +
Number(currentValue.sales);
}
return previousValue;
}
let totalSalesInNY = arr.reduce(reduceFun2);
console.log(totalSalesInNY.sales);
Output:
1500
In the above example, an initial value 0 is provided while calling the Array.reduce() on arr. In this case, it is necessary to provide an initial integer value. This is because, for each iteration of the callback function, the variable previousValue has to have an integer value and not the whole object. If we don’t pass the initialValue as 0, then for the first iteration, the previous value will become the whole object and will try to add an integer value to it, thereby giving junk output.
Array.prototype.concat(): Array.prototype.concat() is used to concatenate an array with another array/value. It does not change any existing array, instead, it returns a modified array. It accepts both new arrays and values as an argument which it concatenates with the array calling the function and returns the resultant array.
Syntax:
NewArray = Array1.concat(value1[, value2[, ...[, valueN]]])
Parameters:
- valueN: New array or value to be concatenated to Array1.
Below are some examples showing the use of Array.prototype.concat():
Example 1: In this example, we will concatenate two arrays.
JavaScript
let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
let arr3 = arr1.concat(arr2);
console.log(arr3);
Output:
[1, 2, 3, 4, 5, 6, 7, 8]
Example 2: In this example, we will concatenate three arrays.
JavaScript
let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6];
let arr3 = [7, 8];
let arr4 = arr1.concat(arr2, arr3);
console.log(arr4);
Output:
[1, 2, 3, 4, 5, 6, 7, 8]
Array.prototype.sort(): Array.prototype.sort() is used to sort an array. It accepts an optional argument compareFunction which defines the criteria to determine which element of the array is small and which is bigger. The compareFunction accepts 2 arguments i.e. the values being compared. If value1 is smaller then compare function should return a negative value. If value2 is smaller, compareFunction should return a positive value. In case of compare function is not provided, the default compareFunction converts the array elements into strings and then compares those strings in Unicode point order.
Syntax:
arr.sort([compareFunction])
Parameters: compareFunction (optional): Function to define the sort order.
Below are some examples showing the use of Array.prototype.sort():
Example 1: In this example, we will sort a simple integer array.
JavaScript
let arr = [3, 1, 5, 4, 2].sort();
console.log(arr);
Output:
[1, 2, 3, 4, 5]
Example 2: In this example, we will sort a simple string array.
JavaScript
let arr = ["Orange", "Apple", "Banana"].sort();
console.log(arr);
Output:
['Apple','Banana','Orange']
Array.prototype.reverse(): Array.prototype.reverse() is used to reverse a JavaScript array. The reverse () function modifies the calling array itself and returns a reference to the now reversed array.
Syntax:
array.reverse()
Parameters: Not Applicable
Below are some examples showing the use of Array.prototype.reverse():
Example 1: In this example, we will reverse an array with integer values using the Array.prototype.reverse() method.
JavaScript
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.reverse();
console.log(arr);
Output:
[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
Example 2: In this example, we will reverse an array with string values using the Array.prototype.reverse() method.
JavaScript
let arr = ['Javascript', 'HTML', 'CSS'];
arr.reverse();
console.log(arr);
Output:
['CSS', 'HTML', 'Javascript']
Similar Reads
Most useful JavaScript Array Functions â Part 1 In this article, we are going to discuss the following two JavaScript array functions. Both of these functions are widely used in industry and make the JavaScript code clean, modularized, and easy to understand. Array.prototype.every()Array.prototype.some()Array.prototype.every(): This function is u
6 min read
Most useful JavaScript Array Functions â Part 2 In Most useful JavaScript Array Functions â Part 1, we discussed two array functions namely Array.Prototype.Every() and Array.prototype.some(). It is important to note that both of these array functions accessed the array elements but did not modify/change the array itself. Today we are going to loo
7 min read
Array of functions in JavaScript Given an array containing functions and the task is to access its element in different ways using JavaScript. Approach: Declare an array of functions.The array of functions works with indexes like an array function. Example 1: In this example, the function call is initiated from the element of the a
2 min read
JavaScript Array find() function JavaScript arr.find() function is used to find the first element from the array that satisfies the condition implemented by a function. If more than one element satisfies the condition then the first element satisfying the condition is returned. Syntax: arr.find(function(element, index, array), this
3 min read
Map to Array in JavaScript In this article, we will convert a Map object to an Array in JavaScript. A Map is a collection of key-value pairs linked with each other. The following are the approaches to Map to Array conversion: Methods to convert Map to ArrayUsing Spread Operator (...) and Array map() MethodUsing Array.from() M
3 min read
JavaScript Array Iteration Methods JavaScript Array iteration methods perform some operation on each element of an array. Array iteration means accessing each element of an array. There are some examples of Array iteration methods are given below: Using Array forEach() MethodUsing Array some() MethodUsing Array map() MethodMethod 1:
3 min read
How to pass an array as a function parameter in JavaScript? Here are different ways to pass an array as a function paramter in JavaScript.1. Using apply() MethodThe apply() method invokes a function with a specified `this` value and an array of arguments. It takes two parameters: the first is the `this` context for the function, and the second is an array of
2 min read
JavaScript Array push() Method The push() method in JavaScript adds one or more elements to the end of an array and returns the new length of the array. It modifies the original array, increasing its length by the number of elements added.Syntaxarr.push(element0, element1, ⦠, elementN);ParametersThis method contains as many numb
3 min read
Types of Arrays in JavaScript A JavaScript array is a collection of multiple values at different memory blocks but with the same name. The values stored in an array can be accessed by specifying the indexes inside the square brackets starting from 0 and going to the array length - 1([0]...[n-1]). A JavaScript array can be classi
3 min read
JavaScript Array findIndex() Function JavaScript arr.findIndex() function is used to find the index of the first element that satisfies the condition checked by the argument function from the given array. Suppose you want to find the index of the first element of the array that is even. Syntax: array.findIndex(function(element, index, a
3 min read