My favorite Lodash Functions

โ€ข ๐Ÿ“š 3 min read โ€ข Tweet this post
Blue Lego
Photo By Iker Urteaga

Introduction

Lodash is a fantastic library of JavaScript utilities that can really enhance your productivity and confidence as a developer. But with things being added to JavaScript every year, is Lodash still relevant?

Sometimes itโ€™s easy to question the relevancy of Lodash with things like:

Heck, thereโ€™s even a proposal for a JavaScript standard library that basically aims to deprecate lodash!

Lodash is still very helpful in everyday use. Iโ€™ve used these lodash utilities throughout my career and will probably continue to use them until TC39 adds their functionality to ECMAScript.

Section titled Debounce%20%u26F9%uD83C%uDFFB%u200D%u2642%uFE0F

Debounce โ›น๐Ÿปโ€โ™‚๏ธ

_.debounce

Groups some number of repeated actions that occur during a time frame.

This is really nice for creating a search-as-you-type input that makes an api call to display the results.

_.throttle

Similar to _.debounce, but instead of grouping repeated actions, it ensures that an action is only called once within a certain time frame. This is nice for performance reasons where we can get away with a delay to improve UX.

David Corbacho wrote a great article about the details of both _.debounce and _.throttle. Iโ€™d recommend giving it a read.

_.range

Creates an array of consecutive integers, of a given length.

Almost every other language Iโ€™ve used has native ranges built in, and I miss them in JavaScript! This is a nice helper to create ranges that I use a TON.

_.memoize

Memoization is a caching technique used for performance.

The basic idea is that given the same input over and over, a memoized function will calculate the return value the first time, cache it, and return that same value instead of actually running the function each time.

Iโ€™ve used this when creating a search index for fast frontend searching with something like fuse.js. With _.memoize, the search index is only calculated once for the set of items.

You can implement your own memoization helper in vanilla JS, but there are some tricky edge cases lined out in this article, and lodash already has a battle tested one for us.

_.shuffle

Really pretty simple. Takes an array, and returns a new array, shuffled! Iโ€™ve found this useful when I want a โ€œrandomโ€ list of items.

_.isEqual

This is very nice to see if two objects have the same values. It deeply checks each object to determine if they have the same values.

Iโ€™ve used this the most to check if an array of items has changed when saving forms.

_.pick

Pick only a subset of keys from an object. This is really handy when ensuring that only certain values are on an object before sending through an operation.

Iโ€™ve used this mostly as a safety layer before making api requests to make sure that things arenโ€™t accidentally getting sent that shouldnโ€™t.

_.repeat

Repeat a string n times.

This is nice when you need a dynamic length string of special characters.

Iโ€™ve used this when building a CLI with node and I wanted a box of * around a word.

_.truncate

Truncate a string when it is longer than a certain number of characters.

Iโ€™ve used this most when I want uniform items in a list, and have a description of some kind for each item. Iโ€™ll truncate the description so that it only ever wraps 2 lines at most

_.capitalize

Capitalize a word for readability. This is really nice because it includes a ton of edge cases for text formatting.


One honorable mention utility is _.get. Iโ€™ve used _.get() more that any of the utilites above, but recently Create React App v3 includes support for Optional Chaining, so I donโ€™t use it anymore. ๐Ÿคท๐Ÿปโ€โ™‚๏ธ

And thatโ€™s it! Let me know if I missed a one that you find useful on Twitter.

javascript