More Related Content Similar to You Don't Need Lodash (20) 4. IT’S GOT SOMETHING FOR EVERYONE!
map, reduce, filter, forEach, find, includes, contains
5. IT’S GOT SOMETHING FOR EVERYONE!
map, reduce, filter, forEach, find, includes, contains,
key, toUpper, toLower, join, compact, concat, flatten
6. IT’S GOT SOMETHING FOR EVERYONE!
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…
7. USING LODASH
const _ = require(‘lodash’);
const x = [ 1, 2, 3 ];
const doubled = _.map(x, (num) => 2 * num);
console.log(doubled); // [ 2, 4, 6 ]
8. BUT WAIT… map IS ALREADY AN ARRAY METHOD!
const x = [ 1, 2, 3 ];
const doubled = x.map((num) => 2 * num);
console.log(doubled); // [ 2, 4, 6 ]
9. BUT WAIT… map IS ALREADY AN ARRAY METHOD!
const x = [ 1, 2, 3 ];
const doubled = x.map((num) => 2 * num);
console.log(doubled); // [ 2, 4, 6 ]
No need to require lodash!
!
10. ES5 HAS SOME (FUN)CTIONAL ARRAY METHODS
▸ Supported in Chrome, Edge, FF, IE9, Opera, Safari
▸ map
▸ filter
▸ reduce
▸ forEach
11. map
const x = [ 1, 2, 3 ];
const map1 = _.map(x, (num) => num * 2);
const map2 = x.map((num) => num * 2);
// [ 2, 4, 6 ]
12. filter
const x = [ 1, 2, 3 ];
const filter1 = _.filter(x, (num) => num > 1);
const filter2 = x.filter((num) => num > 1);
// [ 2, 3 ]
13. 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
14. forEach
const x = [ 1, 2, 3 ];
_.forEach(x, (num) => console.log(num));
x.forEach((num) => console.log(num));
// 1
// 2
// 3
15. THAT WAS FUN, RIGHT?
It gets even more fun with ES6!
▸ Array find, includes
▸ Object merge, keys, values
16. 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 }
17. includes
const x = [ 1, 2, 3 ];
const included1 = _.includes(x, 1);
const included2 = x.includes(1);
// true
18. 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 }
19. keys
z = { a: 1, b: 2};
const keys1 = _.keys(z);
const keys2 = Object.keys(z);
// [ 'a', 'b' ]
20. values
z = { a: 1, b: 2};
const values1 = _.values(z);
const values2 = Object.values(z);
// [ 1, 2 ]
21. THE GOOD NEWS!
▸ Node.js 6 supports 97% of ES6!
▸ Don’t need lodash for µservices!
22. THE BAD NEWS…
Not all browsers are ES6 compliant.
I’M LOOKING AT YOU INTERNET EXPLORER!
23. POLYFILLS SAVE THE DAY!
▸ Babel can polyfill ES6 functionality
▸ meo-frontend is already doing this! !
25. HOW CAN I LEARN MORE?
▸ MDN has great documentation!
26. 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');
27. 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');
console.log(grouped);
// {
// rap: [
// { artist: '2 Chainz', genre: 'rap' },
// { artist: 'Kendrick Lamar', genre: 'rap' }],
// dancehall: [
// { artist: 'Popcaan', genre: 'dancehall' },
// { artist: 'Vybz Kartel', genre: 'dancehall' }]
// }
29. 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!
