Mapped Array Intersection

JavaScriptJavaScriptBeginner
Practice Now

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

Introduction

In this lab, we will explore the concept of array intersection in JavaScript. Specifically, we will be implementing a function that returns the common elements between two arrays, after applying a provided function to each element of both arrays. This lab will help you understand how to use higher-order functions in JavaScript to manipulate arrays and solve common programming problems.


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/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28485{{"Mapped Array Intersection"}} javascript/data_types -.-> lab-28485{{"Mapped Array Intersection"}} javascript/arith_ops -.-> lab-28485{{"Mapped Array Intersection"}} javascript/comp_ops -.-> lab-28485{{"Mapped Array Intersection"}} javascript/higher_funcs -.-> lab-28485{{"Mapped Array Intersection"}} javascript/spread_rest -.-> lab-28485{{"Mapped Array Intersection"}} end

Instructions for Finding Mapped Array Intersection

To find common elements in two arrays after applying a function to each element of both arrays, follow these steps:

  1. Open Terminal/SSH and type node.
  2. Use the code provided below:
const intersectionBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return [...new Set(a)].filter((x) => s.has(fn(x)));
};
  1. In the code, replace a and b with your arrays and fn with the function you want to apply to each element.
  2. Run the code to get the resulting array with common elements.

Example:

intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [2.1]
intersectionBy(
  [{ title: "Apple" }, { title: "Orange" }],
  [{ title: "Orange" }, { title: "Melon" }],
  (x) => x.title
); // [{ title: 'Orange' }]

In the first example, the function Math.floor is applied to the arrays [2.1, 1.2] and [2.3, 3.4], returning the common element [2.1].
In the second example, the function x => x.title is applied to the arrays [{ title: 'Apple' }, { title: 'Orange' }] and [{ title: 'Orange' }, { title: 'Melon' }], returning the common element [{ title: 'Orange' }].

Summary

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