Must use JavaScript Array Functions – Part 3

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 2^nd element with the 1^st 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:

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:

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']

Article Tags :

JavaScript

Web Technologies

javaScript

javascript-array

Web technologies