Ungroup Array Elements Based on Function

JavaScriptJavaScriptBeginner
Practice Now

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will explore how to ungroup array elements based on a provided function. We will use the unzipWith() function, which takes an array produced by the zip() function and applies the provided function to ungroup the elements. By the end of this lab, you will have a better understanding of how to manipulate arrays and perform custom operations on their elements.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28680{{"`Ungroup Array Elements Based on Function`"}} javascript/data_types -.-> lab-28680{{"`Ungroup Array Elements Based on Function`"}} javascript/arith_ops -.-> lab-28680{{"`Ungroup Array Elements Based on Function`"}} javascript/comp_ops -.-> lab-28680{{"`Ungroup Array Elements Based on Function`"}} javascript/array_methods -.-> lab-28680{{"`Ungroup Array Elements Based on Function`"}} javascript/higher_funcs -.-> lab-28680{{"`Ungroup Array Elements Based on Function`"}} javascript/spread_rest -.-> lab-28680{{"`Ungroup Array Elements Based on Function`"}} end

How to Ungroup Array Elements Based on a Function

If you need to ungroup elements in an array produced by zip and apply a function, you can use unzipWith. Here's how you can implement it:

  1. Use Math.max() and the spread operator (...) to get the longest subarray in the array and Array.prototype.map() to make each element an array.
  2. Use Array.prototype.reduce() and Array.prototype.forEach() to map grouped values to individual arrays.
  3. Use Array.prototype.map() and the spread operator (...) to apply fn to each individual group of elements.
const unzipWith = (arr, fn) =>
  arr
    .reduce(
      (acc, val) => (val.forEach((v, i) => acc[i].push(v)), acc),
      Array.from({
        length: Math.max(...arr.map((x) => x.length))
      }).map((x) => [])
    )
    .map((val) => fn(...val));

To use unzipWith, open the Terminal/SSH and type node. Then, you can run the following example:

unzipWith(
  [
    [1, 10, 100],
    [2, 20, 200]
  ],
  (...args) => args.reduce((acc, v) => acc + v, 0)
);
// [3, 30, 300]

This will create an array of elements by ungrouping the elements in the input array produced by zip and applying the provided function.

Summary

Congratulations! You have completed the Ungroup Array Elements Based on Function lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like