DEV Community

loading...

Lodash in 2021: Necessary or Obsolete?

Nico Zerpa (he/him)
Your JavaScript friend! I've been working for over a decade in JS, and I want to help you level up your skills
Originally published at nicozerpa.com ・2 min read

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

Discussion (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...