DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Nico Zerpa (he/him)
Nico Zerpa (he/him)

Posted on • Originally published at nicozerpa.com

Lodash in 2021: Necessary or Obsolete?

If you have a couple of years as a developer, you've probably used either Lodash or Underscore.js. These are two libraries that provide a bunch of utilities to manipulate data, particularly array and objects.

However, JavaScript now has many of the utilities these libraries offer. And now, the question is, are Lodash and Underscore still necessary? Or Am I adding unnecessary bloat into my project?

What You Already Can Do Without Lodash

This is a partial list of Lodash tasks that can now be replaced with vanilla JavaScript. If you use Lodash just for these utilities, you can replace with Vanilla and remove the dependency.

Concatenate arrays, without mutating the original array:

let oneStooge = ["Moe"];
let twoStooges = ["Larry", "Curly"];

// Both create ["Moe", "Larry", "Curly"]
let threeStoogesLodash = _.concat(oneStooge, twoStooges);
let threeStoogesVanilla = [...oneStooge, ...twoStooges];
Enter fullscreen mode Exit fullscreen mode

Fill part of an array with a single value (mutates the array):

let someArray = [100, 99, 98, 97, 96, 95];
let someArrayCopy = [...someArray];
_.fill(someArray, 0, 2, 5); // [100, 99, 0, 0, 0, 95]
someArrayCopy.fill(0, 2, 5); // [100, 99, 0, 0, 0, 95]
Enter fullscreen mode Exit fullscreen mode

Flatten an array:

let sonicCharacters = [
    "Sonic",
    "Tails",
    "Knuckles",
    ["Amy Rose", "Shadow", "Dr. Eggman"]
];

// Both return:
// ["Sonic", "Tails", "Knuckles", "Amy Rose", "Shadow", "Dr. Eggman"]
let sonicCharactersFlatLodash = _.flatten(sonicCharacters);
let sonicCharactersFlatVanilla = sonicCharacters.flat();
Enter fullscreen mode Exit fullscreen mode

Create a duplicate-free version of the array:

let batmanLyrics = ["na", "na", "na", "na", "na", "Batman!"];

// Both return ["na", "Batman"]
let batmanLyricsUniqueLodash = _.uniq(batmanLyrics);
let batmanLyricsUniqueVanilla = [...new Set(batmanLyrics)];
Enter fullscreen mode Exit fullscreen mode

Return an array with elements filtered out:

let countries = [
    "United States", 
    "Belgium",
    "Japan",
    "China",
    "South Korea"
];

// Both return ["Japan", "China", "South Korea"]
let asianCountriesLodash = _.filter(
    countries,
    country => country != "United States" && country != "Belgium"
);
let asianCountriesVanilla = countries.filter(
    country => country != "United States" && country != "Belgium"
);
Enter fullscreen mode Exit fullscreen mode

Check if an array includes a certain value:

let frenchFlagColors = ["Blue", "White", "Red"];
// Both return false
let frenchFlagHasGreenLodash = _.include(frenchFlagColors, "Green");
let frenchFlagHasGreenVanilla = frenchFlagColors.include("Green");
Enter fullscreen mode Exit fullscreen mode

But Sometimes You Do Need Lodash

Not every Lodash utility is available in Vanilla JavaScript. You can't deep clone an object, for example. That's why these libraries are far from obsolete. But if you're loading the entire library just to use a couple of methods, that's not the best way to use the library.

You can import just the functions you need. For example:

// In ES6 module style:
import map from "lodash/map";
import cloneDeep from "lodash/cloneDeep";

// Or their CommonJS counterparts:
const map = require("lodash/map");
const cloneDeep = require("lodash/cloneDeep");
Enter fullscreen mode Exit fullscreen mode

In fact, Lodash has a NPM package for every utility. You can just install the functions you need, like this:

npm i lodash.clonedeep --save
Enter fullscreen mode Exit fullscreen mode

However, if you decide to install specific utilities from Lodash, you have to import them differently:

// In ES6 module style:
import cloneDeep from "lodash.clonedeep";

// Or their CommonJS counterpart:
const cloneDeep = require("lodash.clonedeep");
Enter fullscreen mode Exit fullscreen mode

Become a Better JavaScript Developer! My newsletter has easy, actionable steps to level up your JavaScript skills, right to your inbox. Click here to subscribe

Top comments (3)

Collapse
 
ianwijma profile image
Ian Wijma

JS has also a native concat method.

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = arr1.concat(arr2)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
devdufutur profile image
Rudy NappΓ©e

β™₯️ sortBy and groupBy but there are easy to implement without linking with lodash.

Collapse
 
lexlohr profile image
Alex Lohr

I still hope to get a slightly better native clone method into the standard some day: github.com/atk/object-clone-propos...

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.