This content originally appeared on DEV Community and was authored by Laurie
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]]
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]]
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]
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
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
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
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.
- If you don't have to use a Lodash dependency and can use a native solution, do so.
- If you've determined you need a Lodash method, don't import the entire library.
Instead of doing this:
import _ from 'lodash'
Do something like this:
import map from 'lodash/map'
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.
This content originally appeared on DEV Community and was authored by Laurie
Laurie | Sciencx (2021-06-04T18:03:21+00:00) Let’s talk about Lodash. Retrieved from https://www.scien.cx/2021/06/04/lets-talk-about-lodash/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.