Pull Values From Array Based on Function

JavaScriptJavaScriptBeginner
Practice Now

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

Introduction

In this lab, we will be exploring the pullBy() function in JavaScript. This function allows us to filter out specific values from an array based on a given iterator function. By the end of this lab, you will understand how to use pullBy() to manipulate arrays and effectively filter out unwanted values.


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/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") 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-28562{{"`Pull Values From Array Based on Function`"}} javascript/data_types -.-> lab-28562{{"`Pull Values From Array Based on Function`"}} javascript/arith_ops -.-> lab-28562{{"`Pull Values From Array Based on Function`"}} javascript/comp_ops -.-> lab-28562{{"`Pull Values From Array Based on Function`"}} javascript/array_methods -.-> lab-28562{{"`Pull Values From Array Based on Function`"}} javascript/obj_manip -.-> lab-28562{{"`Pull Values From Array Based on Function`"}} javascript/higher_funcs -.-> lab-28562{{"`Pull Values From Array Based on Function`"}} javascript/destr_assign -.-> lab-28562{{"`Pull Values From Array Based on Function`"}} javascript/spread_rest -.-> lab-28562{{"`Pull Values From Array Based on Function`"}} end

How to Pull Values from an Array based on a Given Function

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

The function pullBy mutates the original array by filtering out the specified values based on a given iterator function. Here's how it works:

  1. Check if the last argument provided is a function.
  2. Use Array.prototype.map() to apply the iterator function fn to all array elements.
  3. Use Array.prototype.filter() and Array.prototype.includes() to pull out the values that are not needed.
  4. Set Array.prototype.length to reset the passed-in array's length to 0.
  5. Use Array.prototype.push() to re-populate it with only the pulled values.

Here's the code:

const pullBy = (arr, ...args) => {
  const length = args.length;
  let fn = length > 1 ? args[length - 1] : undefined;
  fn = typeof fn == "function" ? (args.pop(), fn) : undefined;
  let argState = (Array.isArray(args[0]) ? args[0] : args).map((val) =>
    fn(val)
  );
  let pulled = arr.filter((v, i) => !argState.includes(fn(v)));
  arr.length = 0;
  pulled.forEach((v) => arr.push(v));
};

And here's an example of how to use it:

var myArray = [{ x: 1 }, { x: 2 }, { x: 3 }, { x: 1 }];
pullBy(myArray, [{ x: 1 }, { x: 3 }], (o) => o.x); // myArray = [{ x: 2 }]

Note that in this example, we're pulling out all elements with an x property of 1 or 3. The resulting myArray will only contain the element with an x property of 2.

Summary

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

Other JavaScript Tutorials you may like