w3resource

JavaScript: Create an array of elements, ungrouping the elements in an array produced by zip and applying the provided function

JavaScript fundamental (ES6 Syntax): Exercise-106 with Solution

Write a JavaScript program to create an array of elements, ungrouping the elements in an array produced by zip and applying the provided function.

  • Use Math.max(), Function.prototype.apply() to get the longest subarray in the array, Array.prototype.map() to make each element an array.
  • Use Array.prototype.reduce() and Array.prototype.forEach() to map grouped values to individual arrays.
  • Use Array.prototype.map() and the spread operator (...) to apply fn to each individual group of elements.

Sample Solution:

JavaScript Code:

//#Source https://bit.ly/2neWfJ2

// Define a function 'unzipWith' to unzip an array of arrays and apply a function to each corresponding element.
const unzipWith = (arr, fn) =>
  // Reduce the input array 'arr' to unzip the arrays and apply the function 'fn'.
  arr.reduce(
    // For each value in the array 'arr', update the accumulator 'acc'.
    (acc, val) => (
      // For each value 'v' in 'val', push it to the corresponding array in 'acc'.
      val.forEach((v, i) => acc[i].push(v)),
      // Return the updated accumulator.
      acc
    ),
    // Initialize the accumulator as an array of arrays with lengths equal to the maximum length of the input arrays.
    Array.from({
      length: Math.max(...arr.map(x => x.length))
    }).map(x => [])
  )
  // Map over each array in the unzipped arrays and apply the function 'fn' to their elements.
  .map(val => fn(...val));

// Test the 'unzipWith' function with an example.
console.log(unzipWith([[1, 10, 100], [2, 20, 200]], (...args) => args.reduce((acc, v) => acc + v, 0))); // Output: [3, 30, 300]

Output:

[3,30,300]

Visual Presentation:

JavaScript Fundamental: Return true if the given value is a number, false otherwise.

Flowchart:

flowchart: Create an array of elements, ungrouping the elements in an array produced by zip and applying the provided function

Live Demo:

See the Pen javascript-basic-exercise-106-1 by w3resource (@w3resource) on CodePen.


Improve this sample solution and post your code through Disqus

Previous: Write a JavaScript program that return true if the given value is a number, false otherwise.
Next: Write a JavaScript program to get all unique values (form the right side of the array) of an array, based on a provided comparator function.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://w3resource.com/javascript-exercises/fundamental/javascript-fundamental-exercise-106.php