This lesson shows how to refactor your old loops into using a simpler and more powerful lodash-style. We will start by looking at how many people traditionally write JavaScript `for` loops and then talk about the alternate style and benefits that Lodash offers.

https://app.egghead.io/api/v1/lessons/javascript-lodash-refactoring-simple-for-loops/subtitles

Lodash: Refactoring Simple For Loops

[00:00] At some point in your career, whether it was yesterday or 10 years ago, you've written a loop like this. A lot of tools provide templates for this, where it's just setting i to zero and then incrementing i until it gets to the length of people and then looking up the person based on that index.

[00:19] When you're using a loop like this, if you want to find someone from the people named Susan, you'd probably say, "Susan," and then you'd check if person.name is Susan. Then go ahead and assign Susan to that person, and then we'll log this out to see if we got the right Susan.

[00:43] We'll go ahead and run this. You'll see that we did get a Susan. It's just that I actually wanted the Susan that's age 10, not the one that's age 20. That means that you'd probably go ahead and add a break here, rerun this. Now we got the age 10 Susan.

[01:02] This for loop is going to be way easier in lodash if you just say, "_.find." Then we'll loop through the people, pass in a function, which takes a person. Then we can do the similar syntax of returning a truthy statement, so person.name is Susan. Since this is going to output my Susan, I'll say "susan2," log out susan2.

[01:36] Go ahead and run this. You can see we get that same Susan this time around. If instead in lodash, we wanted the last Susan rather than the first one, we would say, "findLast," and run it again. You can see we got the age 20 Susan, but I'm just going to go ahead and revert this.

[01:53] This approach actually lets you write some sort of complex comparison logic. Whatever returns true here is going to give you that Susan. If all you're doing is a simple comparison like name is Susan, we can delete that entire function.

[02:10] It'll use something called the _.where, which is a tool. We can just basically give it an object and say, "name is Susan." Then it's just going to do a comparison looking for anybody with a name of Susan here. If I hit refresh, you can see that we now get the proper Susan. Obviously, this is a lot less code than this one.

[02:39] Similarly, if we wanted to find all of the Susans...We wanted to make a list of Susans. This is going to be an array. Instead of just assigning Susan to that person, we would actually add Susan or push Susan into the array here. We'll go ahead and push the person into the Susans array. When we refresh, you can see that we get all of the Susans out of this very common scenario.

[03:10] If you want to do this in lodash, it's actually just as simple as changing this from find to filter. Now filter returns an array of everything that matches this. I'll go ahead and refresh. You can see we get that exact same result.

[03:29] Basically, if you only wanted to loop through and find one of them, you could just use find or findLast. If you just wanted to find all of them, just use filter. That'll filter through based on this matching logic and give you all of them.

Lodash: Refactoring Simple For Loops

Share this video with your friends