Search code examples
javascriptarraysmap-function

Can someone please breakdown this function step by step and explain me what it is doing?


adjacentElementsProduct is a function that takes an array as an input and we need to find and return the adjacent elements whose product is greater among all the adjacent elements.

function adjacentElementsProduct(arr) {
  return Math.max(...arr.slice(1).map((x, i) => [x * arr[i]]))
}


Solution

  • The function executes as follows -

    Explanation -

    • It creates a copy of original array firstly using slice(1) (read about slice()), which basically can be understood as the function creating a new array from the original one with the first element removed.

    • Then, the function maps over the newly created array. Here, the map is taking two parameters in the callback function which are

      1. x - The Value of the element and
      2. i - The Index of the element.
    • IMPORTANT STUFF HAPPENS HERE: Note that here, the map is returning an array with elements being the product of x (which is the current element under iteration of our newly created array) and arr[i] (which is the element at index i in our original array).

      So, essentially we are multiplying adjacent elements in each loop inside map(), since we have removed the first element while creating our copy array.

    • Now, this map(), as we know will return an array of elements which are nothing but the multiplications of x and arr[i] for each element x of newly created array. As already stated, its just the array of multiplication of all the adjacent elements. This array is spread into separate parameters using the spread operator syntax (...) and then passed to Math.max() which will return the maximum of all elements in the adjacent multiplication result array.


    Demonstration -

    Eg. Suppose our original array is -

    [3,4,8,2,1]
    
    1. Now, the first thing that will happen is a new copy of array will be created with the first element removed. So, newArr = [4,8,2,1]

    2. Nextly, we are mapping over this array. map() callback is used with two parameters, first one being value and second one being the index currently it is on. So, we are just mapping throughout our newArr and then returning the product of x and arr[i]. So, it happens as -

      • x = 4 and i = 0 - Here, we will return x*arr[i] = 4*arr[0] = 4*3 = 12.

      • x = 8 and i = 1 - We again return x*arr[i] = 8*4 = 32.

      • x = 2 and i = 2 - We again return x*arr[i] = 2*8 = 16.

      • x = 1 and i = 3 - We again return x*arr[i] = 1*2 = 2.

    3. Do note that what the function did above is nothing but just calculated the products of all adjacent element in the original array.

    4. Now, map() returns an array of all these values that we have calculated. The array is - [12,32,16,2]. This array is split into discrete parameters and passed to Math.max() function which will just return the max of all these.

    5. We get our answer as Math.max(...[12,32,16,2]) = Math.max(12,32,16,2) = 32


    const myArr = [3,4,8,2,1];
    
    function adjacentElementsProduct(arr) {
      return Math.max(...arr.slice(1).map((x, i) => [x * arr[i]]))
      // 1. Creates new array - [4,8,2,1] using arr.slice(1)
      // 2. uses map over array to iterate over all elements of newly created array
      // 3. map returns an array which is array containing product of adjacent element of original array
      // 4. The array will be expanded into arguments using spread operator
      // 5. Math.max will return the maximum of all these arguments (which are just the multiplication of all adjacent elements of our original array)
    }
    
    console.log(adjacentElementsProduct(myArr))


    Hope this clears the things.