Let's talk about Lodash
Tags: javascript, webdev, productivity, performance
Published: 2021-06-04 18:03:21

---
title: Let's talk about Lodash
published: true
description: Lodash is an incredible library of utilities that you may not always need.
tags: javascript, webdev, productivity, performance
cover_image: https://laurieontech.com/static/ce2043da38b20ee98a370c3b77f19e81/44720/_.webp
canonical_url: https://laurieontech.com/posts/lodash/
---

If you were a JavaScript developer during a certain era, you're likely familiar with the library [Lodash](https://lodash.com/). 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](https://dev.to/laurieontech/the-ecmascript-ecosystem-2e13). 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.

```javascript
const arr = [1, [2, [3, 4]]]
_.flatten.(arr) // [1,2,[3,4]]
```

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

```javascript
const arr = [1, [2, [3, 4]]]
arr.flat() // [1,2,[3,4]]
```

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

```javascript
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]
```

### Objects

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

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

_.get(obj, 'a.b.c') // 3
```

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](https://dev.to/laurieontech/optional-chaining-has-arrived-111l).

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

obj.a?.b?.c // 3
```

As it turns out, `get` takes a third parameter, a default value. To match this functionality we have [nullish coalescing](https://dev.to/laurieontech/nullish-coalescing-let-falsy-fool-you-no-more-41c0).

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

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

obj.a?.b?.e ?? 'default' // default
```

## 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](https://github.com/tc39/proposal-pipeline-operator), which has some similarities to Lodash's [chain method](https://lodash.com/docs/4.17.15#chain).

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:

```javascript
import _ from 'lodash'
```

Do something like this:

```javascript
import map from 'lodash/map'
```

Alternatively, there is a [Babel plugin](https://github.com/lodash/babel-plugin-lodash) that can do this for you. There is also a [webpack plugin](https://www.npmjs.com/package/lodash-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](https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore) project.