You Don't Need Lodash

YOU DON’T NEED
LODASH**PROBABLY

WHAT IS LODASH?
“A modern JavaScript utility library…”
https://lodash.com

IT’S GOT SOMETHING FOR EVERYONE!
map, reduce, filter, forEach

map, reduce, filter, forEach, find, includes, contains

map, reduce, filter, forEach, find, includes, contains,
key, toUpper, toLower, join, compact, concat, flatten

map, reduce, filter, forEach, find, includes, contains,
key, toUpper, toLower, join, compact, concat, flatten,
clone, head, tail, groupBy, size, isArray, isDate, isEqual,
and on and on…

USING LODASH
const _ = require(‘lodash’);
const x = [ 1, 2, 3 ];
const doubled = _.map(x, (num) => 2 * num);
console.log(doubled); // [ 2, 4, 6 ]

BUT WAIT… map IS ALREADY AN ARRAY METHOD!
const x = [ 1, 2, 3 ];
const doubled = x.map((num) => 2 * num);

BUT WAIT… map IS ALREADY AN ARRAY METHOD!
const x = [ 1, 2, 3 ];
const doubled = x.map((num) => 2 * num);
No need to require lodash!
!

ES5 HAS SOME (FUN)CTIONAL ARRAY METHODS
▸ Supported in Chrome, Edge, FF, IE9, Opera, Safari
▸ map
▸ filter
▸ reduce
▸ forEach

map
const x = [ 1, 2, 3 ];
const map1 = _.map(x, (num) => num * 2);
const map2 = x.map((num) => num * 2);
// [ 2, 4, 6 ]

filter
const x = [ 1, 2, 3 ];
const filter1 = _.filter(x, (num) => num > 1);
const filter2 = x.filter((num) => num > 1);
// [ 2, 3 ]

reduce
const x = [ 1, 2, 3 ];
const sum1 = _.reduce(x, (acc, num) => acc + num, 0);
const sum2 = x.reduce((acc, num) => acc + num, 0);
// 6

forEach
const x = [ 1, 2, 3 ];
_.forEach(x, (num) => console.log(num));
x.forEach((num) => console.log(num));
// 1
// 2
// 3

THAT WAS FUN, RIGHT?
It gets even more fun with ES6!
▸ Array find, includes
▸ Object merge, keys, values

find
const users = [
{ 'user': 'barney', 'age': 36, 'active': true },
{ 'user': 'fred', 'age': 40, 'active': false },
{ 'user': 'pebbles', 'age': 1, 'active': true }
];
const found1 = _.find(users, (user) => user.age > 30);
const found2 = users.find((user) => user.age > 30);
// { user: 'barney', age: 36, active: true }

includes
const x = [ 1, 2, 3 ];
const included1 = _.includes(x, 1);
const included2 = x.includes(1);
// true

merge
const obj1 = { a: 1 };
const obj2 = { b: 2 };
// avoid mutation using empty object as target
const merged1 = _.merge({}, obj1, obj2);
const merged2 = Object.assign({}, obj1, obj2);
// { a: 1, b: 2 }

keys
z = { a: 1, b: 2};
const keys1 = _.keys(z);
const keys2 = Object.keys(z);
// [ 'a', 'b' ]

values
z = { a: 1, b: 2};
const values1 = _.values(z);
const values2 = Object.values(z);
// [ 1, 2 ]

THE GOOD NEWS!
▸ Node.js 6 supports 97% of ES6!
▸ Don’t need lodash for µservices!

THE BAD NEWS…
Not all browsers are ES6 compliant.
I’M LOOKING AT YOU INTERNET EXPLORER!

POLYFILLS SAVE THE DAY!
▸ Babel can polyfill ES6 functionality
▸ meo-frontend is already doing this! !

WHAT IS SUPPORTED BY EACH BROWSER?
▸ Check the ES6 compatibility table here

HOW CAN I LEARN MORE?
▸ MDN has great documentation!

WHAT IF I REALLY NEED A LODASH FUNCTION?
Lodash lets you import just a single function!
const groupBy = require('lodash/groupby');
const data = [
{ artist: '2 Chainz', genre: 'rap'},
{ artist: 'Popcaan', genre: 'dancehall' },
{ artist: 'Kendrick Lamar', genre: 'rap' },
{ artist: 'Vybz Kartel', genre: 'dancehall' }
];
const grouped = groupBy(data, 'genre');

IN SUMMARY
ES5 and ES6 are powerful and should reduce/remove your need for
Lodash!

IN SUMMARY
ES5 and ES6 are powerful and should reduce/remove your need for
Lodash!
But if you need to use a Lodash function, import just the one you need!

You Don't Need Lodash

More Related Content

What's hot (18)

Similar to You Don't Need Lodash (20)

Recently uploaded (20)

You Don't Need Lodash