Why lodash

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. Alternatively, there is a Babel plugin that can do this for you.

There is also a webpack plugin that will further optimize things. 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. I found that helper tools like lodash, underscore, etc. While that may not always be possible, I find that not using lodash often results in better code.

But if you use it, be sure to use it whenever it makes sense. I've found the opposite. Folks write custom implementations of deep merge, intersection, is plain object, etc. These helpers then end up being used all over the place, which makes it very hard to fix any issues. For sure use native JS built-ins over Lodash, but if you're considering writing your own version of one of the more complex Lodash helpers, at least go read their source code first.

That's what I mean with unnecessary complexity. There are less problems that strictly require these functions than one would think. Also, things like deep cloning also have issues in lodash and other tools, see github.

So using these tools is not a silver bullet. As I said, if you use them, make it count, but try to solve the underlying issue before you grab these tools.

I dislike lodash, ramda etc. Reading code that suddenly uses utility functions makes it much slower to understand the code as you need to look up what those functions actually do.

Some of the tools are driven by simplicity, some driven by configurability, and others by extensibility. At the time lodash was created, ES6 was just a glimmer in the eye of web developers, an idea and a desire for most front end developers.

In the world of Bootstrap, jQuery, underscore, prototype and a huge number of other tools, lodash provided a consistent and clear interface. Classes, functional programming, and all the goodness and richness that we take for granted was years away. 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.

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. Bursts of code to power through your day.

Web Development articles, tutorials, and news. Sign in. Vladislav Stepanov Follow. Speed The first and most important thing is speed. Software Engineer. Love JS. If you're not using any libraries or frameworks such as React, Vue, Angular or Node, the best way to install Lodash into your project is to include the following script in your root HTML file:. If you want to use Lodash in libraries and frameworks such as React, Vue, Angular or Node, the first thing you need to do install Lodash via npm or yarn into your project by running the following command:.

You can have access to Lodash inside your React or Vue component by importing it directly from the Lodash library like so:. Lodash's official documentation suggests that we import Lodash in Node using the classic require syntax, so let's do it their way:.

You might want to try importing Lodash using the import statement and let me know in the comments how it goes, good luck! Alright, we've now installed Lodash into our project, what's next?

Mentioned below are few real world scenarios that I faced myself and how Lodash helped me in each one of them. Let's tackle them one by one. Let's say we have an object obj that we receive from an API endpoint or anywhere else and we would like to see if it is empty or not.

This gets even harder with Vanilla Javascript , we might have to write code that looks something like this:. It returns true if obj is empty and false if it is not an empty object or an array. How cool is that?

The next case is where pretty much every developer must've stumbled upon at least once, which is:. Let's say we have a book object which is received from an API endpoint like so:. A situation might arise where we'd like to see if this book object has desc key in it or not. If it does have a desc key only then we show the description of the book inside our view. Here is how we do it using Lodash. It returns true if book object has desc key in it, else it returns false.

Now, we'd like to get first book from this booksArray which has more than pages book Second.