Sometimes, using native methods is better than requiring lodash or underscore because those libraries can lead to performance loss or take up more space than needed
The performance using native methods result in an overall ~50% gain which includes the following methods: Array.concat
, Array.fill
, Array.filter
, Array.map
, (Array|String).indexOf
, Object.find
, ...
The graph below shows the mean of the benchmarks for a variety of Lodash methods, this shows that Lodash methods take on average 146.23% more time to complete the same tasks as V8 methods.
const _ = require('lodash');
const __ = require('underscore');
const Suite = require('benchmark').Suite;
const opts = require('./utils'); //cf. https://github.com/Berkmann18/NativeVsUtils/blob/master/utils.js
const concatSuite = new Suite('concat', opts);
const array = [0, 1, 2];
concatSuite.add('lodash', () => _.concat(array, 3, 4, 5))
.add('underscore', () => __.concat(array, 3, 4, 5))
.add('native', () => array.concat(3, 4, 5))
.run({ 'async': true });
Which returns this:
You can find a bigger list of benchmarks here or alternatively run this which would show the same but with colours.
From the repo on this matter which focuses on Lodash and Underscore.
Lodash and Underscore are great modern JavaScript utility libraries, and they are widely used by Front-end developers. However, when you are targeting modern browsers, you may find out that there are many methods which are already supported natively thanks to ECMAScript5 [ES5] and ECMAScript2015 [ES6]. If you want your project to require fewer dependencies, and you know your target browser clearly, then you may not need Lodash/Underscore.
There's an ESLint plugin which detects where you're using libraries but don't need to by warning you with suggestions (cf. example below).
The way you set it up is by adding the eslint-plugin-you-dont-need-lodash-underscore
plugin to your ESLint configuration file:
{
"extends": [
"plugin:you-dont-need-lodash-underscore/compatible"
]
}
Consider the file below:
const _ = require('lodash');
// ESLint will flag the line above with a suggestion
console.log(_.map([0, 1, 2, 4, 8, 16], x => `d${x}`));
Here's what ESLint would output when using the YDNLU plugin.
Of course, the example above doesn't seem realistic considering what actual codebases would have but you get the idea.