_.omitBy and its sibling
_.pickBy are popular utilities which apply filter-like functionality to objects. Both of them accept a function to determine if a given entry in the object should be included in the output object. This lesson will demonstrate an approach to build both of these utilities from a single function using the combo of
Object.entries converts an object into an array of key, value pairs. We couple that with the native Array filter method, to create a generate
filter() method that works on objects. Once we've filtered our object we use
Object.fromEntries to convert the array back into an object. This works great for both
Object.fromEntries is part of the ES2019 spec and may need a polyfill to work depending on your environment.
Lecturer: [0:00] In a file called filter.js, create a function called filter that takes two arguments, object and a function. I'll abbreviate as fn. Inside of that function type, const entries = Object.entries(obj). Go ahead and return those entries.
[0:17] I also want to start logging the output of the function to demonstrate how it works. To do that, I'm going to bring in a sample object here, which contains a couple letters from the alphabet.
[0:25] Let's run that now. You can see here what is logged is an array of arrays. Each key and value pair from our object has a corresponding key and value pair array inside of the entries array. Object.entries() converts an object into an array of tuples, these short arrays that contain just a key and a value.
[0:46] Let's bring fromEntries() into the mix by wrapping our return of entries in Object.fromEntries(). When we run that, you'll see we have our original object back again. Entries will convert an object into an array. FromEntries will convert an array in this particular format back into an object.
[1:06] This becomes very powerful when you combine that with the built-in array functions, such as filter. Let's pass in our function here to filter on the entries object. Now we can use that to create additional functions, such as omitBy and pickBy. We'll comment out our existing log for now.
[1:21] Below that, type function omitBy. Pass in the same arguments as above, obj and function. Inside of that, return filter obj. We use arrow function syntax here. We'll call our parameter entry. We will pass that value to our function like this. Entry one and entry zero. The omitBy function takes the value first and then the key.
[1:48] The last thing we need to do is put a not in front of our function. We're omitting these things. Anything that matches here will be excluded from the output object. Let's log that out and see how it works. Console.log omitBy. We'll use the same obj as above. For our function, we'll use an arrow function which takes a value. We will simply say value greater than two.
[2:18] Let's run this. You see that any of our entries in the object that has a value greater than two are excluded from the output. Now I'm going to write this in a slightly more concise syntax. There are a couple of tricks we can use to do that. First, we're going to start by using arrow syntax on the function itself. Type, const omitBy = (obj, fn), then we'll return the results of filter(obj).
[2:49] Instead of having entry as the parameter, we're going to use destructuring syntax, and we'll split this up into [key, val] . This is our second arrow function, which is going to call, ! Fn(val, key).
[3:02] We're taking in these two parameters. We're actually flipping them when we pass them into our function and that's omitBy again. Let's comment out the version from before, we see that it still works the same way.
[3:12] From this, I'm going to copy and paste it and we're going to create pickBy. PickBy is the exact same thing except for excluding anything that matches. We're just going to include anything that matches.
[3:23] Let's run pickBy here, with the same value greater than two parameter. You see our first result showed anything with a value of two or less. The second one kept any entries that were greater than two.