You don't (may not) need Lodash/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.

You are welcome to contribute with more items provided below.

• If you are targeting legacy JavaScript engine with those ES5 methods, you can use es5-shim

• Please note that, the examples used below are just showing you the native alternative of performing certain tasks. For some functions, Lodash provides you more options than native built-ins. This list is not a 1:1 comparison.

• Please send a PR if you want to add or modify the code. No need to open an issue unless it's something big and you want to discuss.

Voice of Developers

Make use of native JavaScript object and array utilities before going big.

—<cite>Cody Lindley, Author of jQuery Cookbook and JavaScript Enlightenment</cite>

<!-- -->

You probably don't need Lodash. Nice List of JavaScript methods which you can use natively.

—<cite>Daniel Lamb, Computer Scientist, Technical Reviewer of Secrets of the JavaScript Ninja and Functional Programming in JavaScript</cite>

<!-- -->

I guess not, but I want it.

—<cite>Tero Parviainen, Author of build-your-own-angular</cite>

<!-- -->

I'll admit, I've been guilty of overusing #lodash. Excellent resource.

—<cite>@therebelrobot, Maker of web things, Facilitator for Node.js/io.js</cite>

ESLint Plugin

<div align="center">

</div>

If you're using ESLint, you can install a plugin that will help you identify places in your codebase where you don't (may not) need Lodash/Underscore.

Install the plugin ...

npm install --save-dev eslint-plugin-you-dont-need-lodash-underscore

... then update your config

"extends" : ["plugin:you-dont-need-lodash-underscore/compatible"],

For more information, see Configuring the ESLint Plugin

[!IMPORTANT] Note that, while many Lodash methods are null safe (e.g. _.keys, _.entries), this is not necessarily the case for their Native equivalent. If null safety is critical for your application, we suggest that you take extra precautions [e.g. consider using the native Object.keys as Object.keys(value || {})].

Quick Links

Array

1. _.chunk
2. _.compact
3. _.concat
4. _.difference
5. _.drop
6. _.dropRight
7. _.fill
8. _.find
9. _.findIndex
10. _.first
11. _.flatten
12. _.flattenDeep
13. _.fromPairs
14. _.head and _.tail
15. _.indexOf
16. _.intersection
17. _.isArray
18. _.isArrayBuffer
19. _.join
20. _.last
21. _.lastIndexOf
22. _.reverse
23. _.slice
24. _.without
25. _.initial
26. _.pull
27. _.unionBy

Collection*

[!IMPORTANT] Note that most native equivalents are array methods, and will not work with objects. If this functionality is needed and no object method is provided, then Lodash/Underscore might be the better option. Bear in mind however, that all iterable objects can easily be converted to an array by use of the spread operator.

1. _.each
2. _.every
3. _.filter
4. _.groupBy
5. _.includes
6. _.keyBy
7. _.map
8. _.minBy and _.maxBy
9. _.orderBy
10. _.pluck
11. _.range
12. _.reduce
13. _.reduceRight
14. _.reject
15. _.size
16. _.some
17. _.sortBy
18. _.uniq
19. _.uniqWith

Function

1. _.after
2. _.bind
3. _.debounce
4. _.isFunction
5. _.partial
6. _.throttle

Lang

1. _.castArray
2. .cloneDeep
3. _.gt
4. _.gte
5. _.isDate
6. _.isEmpty
7. _.isFinite
8. _.isInteger
9. _.isNaN
10. _.isNil
11. _.isNull
12. _.isUndefined

Object

1. _.assign
2. _.defaults
3. _.extend
4. _.has
5. _.get
6. _.invert
7. _.isPlainObject
8. _.keys
9. _.mapKeys
10. _.omit
11. _.pick
12. _.pickBy
13. _.toPairs
14. _.values

String

1. _.capitalize
2. _.endsWith
3. _.isString
4. _.lowerFirst
5. _.padStart and _.padEnd
6. _.repeat
7. _.replace
8. _.split
9. _.startsWith
10. _.template
11. _.toLower
12. _.toUpper
13. _.trim
14. _.upperFirst

Util

1. _.times

Number

1. _.clamp
2. _.inRange
3. _.random

Array

_.chunk

Creates an array of elements split into groups the length of size.

// Underscore/Lodash
_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]

_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]


// Native

const chunk = (input, size) => {
  return input.reduce((arr, item, idx) => {
    return idx % size === 0
      ? [...arr, [item]]
      : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]];
  }, []);
};

chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]

chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

Browser Support for Spread in array literals

![Chrome][chrome-image]	![Edge][edge-image]	![Firefox][firefox-image]	![IE][ie-image]	![Opera][opera-image]	![Safari][safari-image]
46.0 ✔	12.0 ✔	16.0 ✔	✖	37.0 ✔	8.0 ✔

⬆ back to top

_.compact

Creates an array with all falsy values removed.

// Underscore/Lodash
_.compact([0, 1, false, 2, '', 3]);
// output: [1, 2, 3]

// Native
[0, 1, false, 2, '', 3].filter(Boolean)
// output: [1, 2, 3]

Browser Support for array.prototype.filter

![Chrome][chrome-image]	![Edge][edge-image]	![Firefox][firefox-image]	![IE][ie-image]	![Opera][opera-image]	![Safari][safari-image]
✔	✔	1.5 ✔	9.0 ✔	✔	✔

⬆ back to top

_.concat

Creates a new array concatenating array with any additional arrays and/or values.

// Underscore/Lodash
var array = [1]
var other = _.concat(array, 2, [3], [[4]])

console.log(other)
// output: [1, 2, 3, [4]]

// Native
var array = [1]
var other = array.concat(2, [3], [[4]])

console.log(other)
// output: [1, 2, 3, [4]]

Browser Support for Array.prototype.concat()

![Chrome][chrome-image]	![Edge][edge-image]	![Firefox][firefox-image]	![IE][ie-image]	![Opera][opera-image]	![Safari][safari-image]
1.0 ✔	✔	1.0 ✔	5.5 ✔	✔	✔

⬆ back to top

_.difference

Similar to without, but returns the values from array that are not present in the other arrays.

// Underscore/Lodash
console.log(_.difference([1, 2, 3, 4, 5], [5, 2, 10]))
// output: [1, 3, 4]

// Native
var arrays = [[1, 2, 3, 4, 5], [5, 2, 10]];
console.log(arrays.reduce(function(a, b) {
  return a.filter(function(value) {
    return !b.includes(value);
  });
}));
// output: [1, 3, 4]

// ES6
let arrays = [[1, 2, 3, 4, 5], [5, 2, 10]];
console.log(arrays.reduce((a, b) => a.filter(c => !b.includes(c))));
// output: [1, 3, 4]

Browser Support for Array.prototype.reduce()

![Chrome][chrome-image]	![Edge][edge-image]	![Firefox][firefox-image]	![IE][ie-image]	![Opera][opera-image]	![Safari][safari-image]
✔	✔	3.0 ✔	9.0 ✔	10.5 ✔	4.0 ✔

⬆ back to top

_.drop

Creates a slice of array with n elements dropped from the beginning.

// Underscore/Lodash
_.drop([1, 2, 3]);
// => [2, 3]

_.drop([1, 2, 3], 2);
// => [3]

// Native
[1, 2, 3].slice(1);
// => [2, 3]

[1, 2, 3].slice(2);
// => [3]

Browser Support for Array.prototype.slice()

![Chrome][chrome-image]	![Edge][edge-image]	![Firefox][firefox-image]	![IE][ie-image]	![Opera][opera-image]	![Safari][safari-image]
1.0 ✔	✔	1.0 ✔	✔	✔	✔

⬆ back to top

_.dropRight

Creates a slice of array with n elements dropped at the end.

// Underscore/Lodash
_.dropRight([1, 2, 3]);
// => [1, 2]

_.dropRight([1, 2, 3], 2);
// => [1]

// Native
[1, 2, 3].slice(0, -1);
// => [1, 2]

[1, 2, 3].slice(0, -2);
// => [1]

Browser Support for Array.prototype.slice()

![Chrome][chrome-image]	![Edge][edge-image]	![Firefox][firefox-image]	![IE][ie-image]	![Opera][opera-image]	![Safari][safari-image]
1.0 ✔	✔	1.0 ✔	✔	✔