Lodash is a very popular JavaScript library and I have come across it in almost every project I have, but was it justified? is it that good? let's find out in this article.
What is Lodash?
It’s a modern JavaScript utility library delivering modularity, performance & extras.
This is what you will see when you open the official Lodash documentation.
I think many of you have already either heard or worked with it, so let's get straight to the point.
Note in this article I am using:
- Lodash - v4.17.21
- Node - v16.13.2
I created a test data array of 100 objects. If I paste this array here, it will take up half a page, so I will hide all elements in the array, but be aware that I am using 100 elements in my tests. By the way, you can find all test data on my GitHub by following this link.
Test 1: I want to simulate how a filter method works in JavaScript and Lodash.
Lodash filter performance test
import lodash from 'lodash';
const data = [...]; // 100 objects
console.time('lodash-filter');
lodash.filter(data, ({ isMarried }) => isMarried);
console.timeEnd('lodash-filter');
Lodash filter operation execution time: 0.146ms
[Running] node "/personal/lodash_vs_js/lodash-filter.js"
lodash-filter: 0.146ms
[Done] exited with code=0 in 0.091 seconds
JavaScript native filter method performance test
const data = [...]; // 100 objects
console.time('js-filter');
data.filter(({ isMarried }) => isMarried);
console.timeEnd('js-filter');
JavaScript filter operation execution time: 0.098ms
[Running] node "/personal/lodash_vs_js/js-filter.js"
js-filter: 0.098ms
[Done] exited with code=0 in 0.059 seconds
So as you can see javaScript native filter method is almost on 50% faster than Lodash filter method.
Test 2: In this test, I want to compare the performance of the map method in JavaScript and Lodash.
Lodash map method performance test
import lodash from 'lodash';
const data = [...]; // 100 objects
console.time('lodash-map');
lodash.map(data, (item) => {
if (item.isMarried) {
item.isHappy = true;
}
return item;
});
console.timeEnd('lodash-map');
Lodash map operation execution time: 0.269ms
[Running] node "/personal/lodash_vs_js/lodash-map.js"
lodash-map: 0.269ms
[Done] exited with code=0 in 0.09 seconds
JavaScript native map method performance test
const data = [...]; // 100 objects
console.time('js-map');
data.map((item) => {
if (item.isMarried) {
item.isHappy = true;
}
return item;
});
console.timeEnd('js-map');
JavaScript map operation execution time: 0.105ms
[Running] node "/personal/lodash_vs_js/js-map.js"
js-map: 0.105ms
[Done] exited with code=0 in 0.058 seconds
So in the second test JavaScript native map is more than on 100% faster than Lodash map method.
Test 3: In this test, I want to compare the performance of a flat method in JavaScript and
Lodash.
Lodash flatten method performance test
import lodash from 'lodash';
const nonFlattnedArray = [...]; // 30 elements
console.time('lodash-flat');
lodash.flatten(nonFlattnedArray);
console.timeEnd('lodash-flat');
Lodash flatten operation execution time: 0.153ms
[Running] node "/personal/lodash_vs_js/lodash-flat.js"
lodash-flat: 0.153ms
[Done] exited with code=0 in 0.09 seconds
JavaScript native flat method performance test
const nonFlattnedArray = [...]; // 30 elements
console.time('js-flat');
nonFlattnedArray.flat();
console.timeEnd('js-flat');
JavaScript flat operation execution time: 0.088ms
[Running] node "/personal/lodash_vs_js/js-flat.js"
js-flat: 0.088ms
[Done] exited with code=0 in 0.058 seconds
So in the third test, the native JavaScript flat method is almost 90% faster than Lodash flatten method.
Test 4: In this test, I want to compare the performance of the sort method in JavaScript and Lodash.
Lodash sort method performance test
import lodash from 'lodash';
const randomArray = [...]; // 100 elements
console.time('lodash-sort');
lodash.sortBy(randomArray);
console.timeEnd('lodash-sort');
Lodash sort operation execution time: 0.905ms
[Running] node "/personal/lodash_vs_js/lodash-sort.js"
lodash-sort: 0.905ms
[Done] exited with code=0 in 0.092 seconds
JavaScript native sort method performance test
const randomArray = [...]; // 100 elements
console.time('js-sort');
randomArray.sort();
console.timeEnd('js-sort');
JavaScript sort operation execution time: 0.118ms
[Running] node "/personal/lodash_vs_js/js-sort.js"
js-sort: 0.118ms
[Done] exited with code=0 in 0.059 seconds
So in the fourth test, the native JavaScript sort method is almost 700% faster than Lodash's sort method.
Test 5: In this test, I want to compare the performance of the find method in JavaScript and Lodash.
Lodash find method performance test
import lodash from 'lodash';
const data = [...]; // 100 elements
console.time('lodash-find');
lodash.find(data, ({ name }) => name === 'Camryn');
console.timeEnd('lodash-find');
Lodash find operation execution time: 0.294ms
[Running] node "/personal/lodash_vs_js/lodash-find.js"
lodash-find: 0.294ms
[Done] exited with code=0 in 0.091 seconds
JavaScript native find method performance test
const data = [...]; // 100 elements
console.time('js-find');
data.find(({name}) => name === 'Camryn');
console.timeEnd('js-find');
JavaScript find operation execution time: 0.133ms
[Running] node "/personal/lodash_vs_js/js-find.js"
js-find: 0.133ms
[Done] exited with code=0 in 0.059 seconds
So in the fifth test, the native JavaScript find method is almost 200% faster than Lodash find method.
Test 6: In this test, I want to compare the performance of the forEach method in JavaScript and Lodash.
Lodash forEach method performance test
import lodash from 'lodash';
const data = [...]; // 100 elements
console.time('lodash-forEach');
lodash.forEach(data, (item) => {
item.checked = true;
});
console.timeEnd('lodash-forEach');
Lodash forEach operation execution time: 0.148ms
[Running] node "/personal/lodash_vs_js/lodash-forEach.js"
lodash-forEach: 0.148ms
[Done] exited with code=0 in 0.091 seconds
JavaScript native forEach method performance test
const data = [...]; // 100 elements
console.time('js-forEach');
data.forEach((item) => {
item.checked = true;
});
console.timeEnd('js-forEach');
JavaScript forEach operation execution time: 0.099ms
[Running] node "/personal/lodash_vs_js/js-forEach.js"
js-forEach: 0.099ms
[Done] exited with code=0 in 0.059 seconds
So, in the sixth test, native JavaScript forEach is almost 50% faster than Lodash's forEach method.
Conclusion: Lodash is a very powerful tool in the hands of a developer, but you have to be very careful with it and use it wisely. I'm sure there are certain cases where we need Lodash, but in general we should avoid using third party libraries prefering native methods if posible. You can find all examples on my GitHub
P.S I really like Lodash, the purpose of this article is for developers to use it for its intended purpose