Let's talk about Lodash

Laurie - Jun 4 '21 - - Dev Community

If you were a JavaScript developer during a certain era, you're likely familiar with the library Lodash. It's a utility library full of functions that make it easier to manipulate arrays, objects and strings. Lodash included so many critical functions that, for a long time, it was one of the first things developers would download when setting up a new project. However, times have changed.

So let's talk about how we might think about Lodash in the context of today.

ECMAScript

For a primer on ECMAScript and TC39 I recommend reading my post on the ECMAScript Ecosystem. With that out of the way, let's talk about new features to the language.

Arrays

One of the things Lodash is known for are wonderful functions for handling arrays. For example, flattening them.

const arr = [1, [2, [3, 4]]]
_.flatten.(arr) // [1,2,[3,4]]
Enter fullscreen mode Exit fullscreen mode

We don't need to use Lodash for this anymore! Array.prototype.flat is a thing.

const arr = [1, [2, [3, 4]]]
arr.flat() // [1,2,[3,4]]
Enter fullscreen mode Exit fullscreen mode

In fact, the flat function handles all three of the Lodash flatten methods.

const arr = [1, [2, [3, 4]]]

_.flatten.(arr) // [1,2,[3,4]]
arr.flat() // [1,2,[3,4]]

_.flattenDeep.(arr) // [1,2,3,4]
arr.flat(Infinity) // [1,2,3,4]

_.flattenDepth.(arr, 2) // [1,2,3,4]
arr.flat(2) // [1,2,3,4]
Enter fullscreen mode Exit fullscreen mode

Objects

Another popular method that people reach for is Lodash's get. This one found a JS substitute a bit more recently.

const obj = { a: 1, b: { c: 3, d: 4 } }

_.get(obj, 'a.b.c') // 3
Enter fullscreen mode Exit fullscreen mode

This method helps you dive deep into objects and not worry about whether or not the values exist. As an alternative, we now have optional chaining.

const obj = { a: 1, b: { c: 3, d: 4 } }

obj.a?.b?.c // 3
Enter fullscreen mode Exit fullscreen mode

As it turns out, get takes a third parameter, a default value. To match this functionality we have nullish coalescing.

const obj = { a: 1, b: { c: 3, d: 4 } }

_.get(obj, 'a.b.e', 'default') // default

obj.a?.b?.e ?? 'default' // default
Enter fullscreen mode Exit fullscreen mode

Goodbye Lodash?

You may think that these examples mean Lodash is no more! Well, not so fast.

While ECMAScript has added a number of new features in the past few years, there are still parts of Lodash that don't have native replacements.

Some are under discussion, like the pipeline operator, which has some similarities to Lodash's chain method.

Others are still just a twinkle in JavaScript's eye. groupby and deepmerge are commonly referenced in the category of things people would like native implementations of.

So why does it matter?

You might wonder why this matters. If some things have native alternatives and others don't, why not use Lodash for everything and make your life easier?

Well, Lodash isn't exactly small. Installing it as a dependency in your project doesn't matter so much, but loading it up for every page isn't ideal. So you want to consider a couple things.

  1. If you don't have to use a Lodash dependency and can use a native solution, do so.
  2. If you've determined you need a Lodash method, don't import the entire library.

Instead of doing this:

import _ from 'lodash'
Enter fullscreen mode Exit fullscreen mode

Do something like this:

import map from 'lodash/map'
Enter fullscreen mode Exit fullscreen mode

Alternatively, there is a Babel plugin that can do this for you. There is also a webpack plugin that will further optimize things.

And that's it

Now go forth with your newfound Lodash knowledge! Make intentional choices about what needs a third-party dependency. And be sure to check out the do you need Lodash project.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .