Mapped Array Union

JavaScriptJavaScriptBeginner
Practice Now

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

Introduction

In this lab, we will explore JavaScript programming concepts through hands-on exercises. The lab is designed to help participants build a solid understanding of core JavaScript concepts such as functions, arrays, objects, and loops. Through a series of challenges and projects, participants will have the opportunity to apply what they learn and build their confidence as JavaScript developers.


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/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("`Destructuring Assignment`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28488{{"`Mapped Array Union`"}} javascript/data_types -.-> lab-28488{{"`Mapped Array Union`"}} javascript/arith_ops -.-> lab-28488{{"`Mapped Array Union`"}} javascript/comp_ops -.-> lab-28488{{"`Mapped Array Union`"}} javascript/higher_funcs -.-> lab-28488{{"`Mapped Array Union`"}} javascript/destr_assign -.-> lab-28488{{"`Mapped Array Union`"}} javascript/spread_rest -.-> lab-28488{{"`Mapped Array Union`"}} end

Function to Combine Arrays with a Provided Mapping Function

To begin coding, open the Terminal/SSH and type node.

This function returns an array of elements that exist in either of the two input arrays, after applying the provided mapping function to each element in both arrays.

Here are the steps to achieve this:

  1. Create a new Set by applying the mapping function to all values in the first input array a.
  2. Create another Set consisting of all the elements in b that do not match any values in the previously created Set when the mapping function is applied.
  3. Combine the two sets and convert them to an array.
  4. Return the resulting array.

Here is the code for the unionBy function:

const unionBy = (a, b, fn) => {
  const setA = new Set(a.map(fn));
  return Array.from(new Set([...a, ...b.filter((x) => !setA.has(fn(x)))]));
};

Here are some examples of how to use the unionBy function:

unionBy([2.1], [1.2, 2.3], Math.floor); // Output: [2.1, 1.2]
unionBy([{ id: 1 }, { id: 2 }], [{ id: 2 }, { id: 3 }], (x) => x.id);
// Output: [{ id: 1 }, { id: 2 }, { id: 3 }]

Summary

Congratulations! You have completed the Mapped Array Union lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like