Filter Non-Unique Array Values Based on Function

JavaScriptJavaScriptBeginner
Practice Now

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

Introduction

In this lab, we will explore a JavaScript function that filters non-unique array values based on a provided comparator function. By using Array.prototype.filter() and Array.prototype.every(), we will create a new array that contains only the unique values based on the comparator function. This lab aims to improve your understanding of JavaScript array methods and how to use them to manipulate data.


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/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") subgraph Lab Skills javascript/variables -.-> lab-28332{{"`Filter Non-Unique Array Values Based on Function`"}} javascript/data_types -.-> lab-28332{{"`Filter Non-Unique Array Values Based on Function`"}} javascript/arith_ops -.-> lab-28332{{"`Filter Non-Unique Array Values Based on Function`"}} javascript/comp_ops -.-> lab-28332{{"`Filter Non-Unique Array Values Based on Function`"}} javascript/obj_manip -.-> lab-28332{{"`Filter Non-Unique Array Values Based on Function`"}} javascript/higher_funcs -.-> lab-28332{{"`Filter Non-Unique Array Values Based on Function`"}} end

Filtering Non-Unique Array Values with a Function

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

This code filters out non-unique values from an array, based on a provided comparator function. Here are the steps to achieve this:

  1. Use Array.prototype.filter() and Array.prototype.every() to create a new array with only the unique values based on the comparator function fn.
  2. The comparator function takes four arguments: the values of the two elements being compared and their indexes.
  3. The function filterNonUniqueBy implements the above steps and returns the unique values array.
const filterNonUniqueBy = (arr, fn) =>
  arr.filter((v, i) => arr.every((x, j) => (i === j) === fn(v, x, i, j)));

Here is an example of how to use this function:

filterNonUniqueBy(
  [
    { id: 0, value: "a" },
    { id: 1, value: "b" },
    { id: 2, value: "c" },
    { id: 1, value: "d" },
    { id: 0, value: "e" }
  ],
  (a, b) => a.id === b.id
); // [ { id: 2, value: 'c' } ]

This code is concise, clear and coherent and should work as expected.

Summary

Congratulations! You have completed the Filter Non-Unique Array Values Based on Function lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like