Build lodash.merge from Scratch

Build lodash.debounce from Scratch

Extending debounce with a maxWait Option

Build lodash.get from Scratch

Replace lodash.get with Optional Chaining Syntax

Build lodash.throttle from Scratch

Build lodash.pick from Scratch

Build lodash.omit from Scratch with forEach and for...in

Build lodash.omitBy and lodash.pickBy with Object.fromEntries

Recreating Popular JavaScript Utility Methods from Lodash

`_.pick` and its sibling `_.omit` are popular utilities which apply filter-like functionality to objects. This lesson will demonstrate two different techniques for building the functionality found in [_.pick](https://lodash.com/docs/4.17.15#pick).

1. Using `for...of` to loop through the `keys` array
2. Using `for..in` to loop through the target object

This lesson will also cover how to emulate `_.pick`'s support for either an array or multiple arguments for the picked keys using [Rest params](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) and [Array.prototype.flat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat).


Jamund Ferguson: [0:00] In a file called pick.js, type function pick pass in two arguments obj and the second one is called keys. Inside of that function create a result object and return it, const result equals empty object, return result.

[0:15] Now, in between those two lines type for (let key of keys) result [key] = obj[key] . Instead of a for of loop, you could have also used keys.foreach here.

[0:28] To demonstrate that the pick function works, we have an object here with the first few letters of the alphabet called obj. Type console.log(pick(obj)), and then, pass in the array, and let's just keep it b, a, d.

[0:42] If we run that program, you can see that it returns an object with the b, a, and d values. That's a super simple way to write pick. Let's do it another way.

[0:53] I'm going to comment this out and again, type function pick(obj, keys). Let's create our result object and return it. This time instead of looping through our list of keys, we're going to loop through the entire object and check individually if we should include that key in the result.

[1:13] For this one, you can type for (let key in obj). Notice that we're using a for in loop now instead of a for of loop because we're dealing with an object instead of an array. For this, we'll say if (keys.includes(key)) {result [key] = obj[key] ;} and return the result. Log it out the same way as we did before. It looks like it works correctly.

[1:38] When would you use this instead of the initial one? Usually, your object might have many different keys. The keys array might be a smaller list. In general, looping over the shorter list is better though. In most instances, the difference is pretty inconsequential.

[1:54] There's one other thing I want to demonstrate here. That is the ability which the Lodash pick version has of accepting the list of keys, either as an array or as individual items in the list. If we pass this in right now, it is going to get confused and only filter out the first one that you pass in. We can actually handle this property. Let's do it.

[2:15] Go ahead and change the second parameter from keys to a rest parameter. Type "...keys." That's going to give us the ability to basically put any additional arguments that come after the first one into an array called keys. That works pretty well, except if we have a single argument which is an array.

[2:32] Let me log it out right now just to show you what it looks like. Right now I have an array and inside of that array is the array that I passed in. If we type keys = keys.flat(), this will flatten our array. You can see our result is correct. Whether we pass in an array or pass in individual arguments, it's all processed and handled correctly.

Course

Recreating Popular JavaScript Utility Methods from Lodash

Build lodash.pick from Scratch

Share this video with your friends