Why You shouldn’t use lodash anymore and use pure JavaScript instead

So why shouldn’t you use lodash? Here are two main issues.

Speed

The first and most important thing is speed. Because performance really matters for a good user experience, and lodash is an outsider here.

We’ll look at two scenarios using features such as find and reduce. And compare them with JavaScript analogues. To calculate the time difference, we will use the built-in Date constructor. (All calculations were done on MacBook Pro in the latest Chrome browser, and on weaker devices with older browsers, the results can be much worse)

Find

Iterates over elements of “collection”, returning the first element “predicate” returns truthy for.

This is a pretty powerful feature, but in many cases can be easily replaced by a native find method (in case the “collection” is not an array You can call find as an Array.prototype.find.apply(…)).

Find has many dependencies that really affect performance, below you can see the code even though it is not full, it already exceeds 100 lines of code…

And here is comparison between both, example was taken from the lodash repository.

And this is the result we get.

140ms versus 0ms is a huge difference and it is only for three elements!

Reduce

Reduces “collection” to a value which is the accumulated result of running each element in “collection” thru “iteratee”, where each successive invocation is supplied the return value of the previous. If “accumulator” is not given, the first element of “collection” is used as the initial value.

Almost the same as JS reduce (and again in case “collection” is not an array You can call reduce as an Array.prototype.reduce.apply(…)).

The example is quite simple, all we want is just to sum up all the numbers.

And yet such a small task takes too long for lodash.

Composition

Second, the composition. When we talk about JavaScript, the best way to write well — structured and clean code is to use dot notation, so we can chain as many functions as we want and still write clear code.

But in the case of lodash, we can’t chain functions, and instead we can only wrap them up. It’s okay when we only have one or two functions, but what if we want to link three, four or even more functions, and that’s where things start to go really bad.

For this example, we will use three functions: filter, map, and reduce. Sample data for this:

const users = [
  { 'user': 'barney', 'active': true, 'age': 27 },
  { 'user': 'fred',   'active': false, 'age': 32 },
  { 'user': 'greg',   'active': false, 'age': 42 },
  { 'user': 'max',   'active': false, 'age': 2 },
  { 'user': 'ellin',   'active': false, 'age': 102 }
];

Here’s how it will look in the lodash.

Look at this code, it is very difficult to say which function will be executed first, second and so on, also the data is hidden in group of braces. Can you tell at first glance what data we calculating?

And here’s pure JavaScript.

Now the order of operations and data are obvious. And the code itself is much more readable.

Weight

In fact, we can add a third point — weight. This is not a lot of only 24 kB for the reduced version. But, as we all know, the more dependencies we have on the page, the slower it will load. And even such a lightweight library can affect the speed of page loading, especially when it comes to mobile use with limited traffic or just a slow connection.

Conclusion

This article applies not only to lodash, but also to other libraries with similar functionality. JavaScript itself has many great built-in methods and functions that can easily replace all the functionality of these libraries.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.