Skip to content
Related Articles
Open in App
Not now

Related Articles

Must use JavaScript Array Functions – Part 3

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 19 Dec, 2022
Improve Article
Save Article

Previous articles: 

In this article, we are going to discuss the following JavaScript array functions

  1. prototype.reduce()
  2. prototype.concat()
  3. prototype.sort()
  4. prototype.reverse()

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




<script>
    function reduceFun1(previousValue, currentValue, index, array){
    return previousValue + currentValue;
    }
    var result = [1,2,3,4,5].reduce(reduceFun1);
          
    console.log(result);
</script>


Output:

15

Example 2: Given an array of objects containing addresses of sales locations and find the total sales done in NY

Javascript




<script>
    var 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;
        }
      
    var totalSalesInNY = arr.reduce(reduceFun2);
      
    console.log(totalSalesInNY.sales);
</script>


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




<script>
    var arr1 = [1,2,3,4];
    var arr2 = [5,6,7,8];
    var arr3 = arr1.concat(arr2);
    console.log(arr3);
</script>


Output:

[1, 2, 3, 4, 5, 6, 7, 8]

Example 2: In this example, we will concatenate three arrays.

Javascript




<script>
    var arr1 = [1,2,3,4];
    var arr2 = [5,6];
    var arr3 = [7,8];
    var arr4 = arr1.concat(arr2,arr3);
    console.log(arr4);
</script>


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




<script>
    var arr = [3, 1, 5, 4, 2].sort();
    console.log(arr);
</script>


Output:

[1, 2, 3, 4, 5]

Example 2: In this example, we will sort a simple string array. 

Javascript




<script>
    var arr = ["Orange", "Apple", "Banana"].sort();
    console.log(arr);
</script>


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




<script>
    var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.reverse();
    console.log(arr);
</script>


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




<script>
    var arr = ['Javascript','HTML','CSS'];
    arr.reverse();
    console.log(arr);
</script>


Output:

['CSS', 'HTML', 'Javascript']

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!