Lodash: Refactoring Simple For Loops

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 9 years ago
Updated 5 years ago

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.

[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.

Gregory Pierce
Gregory Pierce
~ 9 years ago

Appreciate the demo, but it would have been far more useful if you would have taken it beyond the extremely simple single property case.

Ideally you wouldn't look for the "first" Susan or the "last" Susan because that breaks depending on how your data is structured. You really should be looking at how do I find the "Susan with age 10". Same with sorting and any other sort of thing. Very rarely will you have simple requirements to just sort on a single property :)