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 ESCMAScript2015 [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 of the functions, Lodash provides you more options than native built-ins. This list is not a 1:1 comparison.
Voice of developers
Make use of native JavaScript object and array utilities before going big.
Cody lindley, Author of jQuery Cookbook,JavaScript Enlightenment
You probably don't need Lodash. Nice List of JavaScript methods which you can use natively.
Daniel Lamb, Computer Scientist, Technical Reviewer of Secrets of the JavaScript Ninja, Functional Programming in JavaScript
I guess not, but I want it.
Tero Parviainen, Author of build-your-own-angular
I'll admit, I've been guilty of overusing #lodash. Excellent resource.
therebelrobot, Maker of web things, Facilitator for Node.js/io.js
Quick links
- _.each
- _.map
- _.every
- _.some
- _.reduce
- _.reduceRight
- _.filter
- _.find
- _.findIndex
- _.indexOf
- _.lastIndexOf
- _.includes
- _.keys
- _.size
- _.isNaN
- _.reverse
- _.join
- _.toUpper
- _.toLower
- _.trim
- _.repeat
- _.after
_.each
Iterates over a list of elements, yielding each in turn to an iteratee function.
// Underscore/Lodash_;// output: 1 2 3 // Native1 2 3;// output: 1 2 3
Browser Support
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
_.map
Translate all items in an array or object to new array of items.
// Underscore/Lodashvar array1 = 1 2 3;var array2 = _;console;// output: [2, 4, 6] // Nativevar array1 = 1 2 3;var array2 = array1;console;// output: [2, 4, 6]
Browser Support
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
_.every
Tests whether all elements in the array pass the test implemented by the provided function.
// Underscore/Lodash { return element >=10;}var array = 10 20 30;var result = _;console;// output: true // Native { return element >=10;} var array = 10 20 30;var result = array;console;// output: true
Browser Support
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
_.some
Tests whether some element in the array passes the test implemented by the provided function.
// Underscore/Lodash { return element >=10;}var array = 10 9 8;var result = _;console;// output: true // Native { return element >=10;} var array = 10 9 8;var result = array;console;// output: true
Browser Support
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
_.reduce
Applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value.
// Underscore/Lodashvar array = 0 1 2 3 4;var result = _;console;// output: 10 // Nativevar array = 0 1 2 3 4;var result = array;console;// output: 10
Browser Support
✔ | 3.0 ✔ | 9 ✔ | 10.5 | 4.0 |
_.reduceRight
This method is like _.reduce except that it iterates over elements of collection from right to left.
// Underscore/Lodashvar array = 0 1 2 3 4;var result = _;console;// output: -2 // Nativevar array = 0 1 2 3 4;var result = array;console;// output: -2
Browser Support
✔ | 3.0 ✔ | 9 ✔ | 10.5 | 4.0 |
_.filter
Creates a new array with all elements that pass the test implemented by the provided function.
// Underscore/Lodash { return value >= 10;} var array = 12 5 8 130 44;var filtered = _;console;// output: [12, 130, 44] // Native { return value >= 10;} var array = 12 5 8 130 44;var filtered = array;console;// output: [12, 130, 44]
Browser Support
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
_.find
Returns a value in the array, if an element in the array satisfies the provided testing function. Otherwise undefined is returned.
// Underscore/Lodashvar users = 'user': 'barney' 'age': 36 'active': true 'user': 'fred' 'age': 40 'active': false 'user': 'pebbles' 'age': 1 'active': true ; _;// output: object for 'barney' // Nativevar users = 'user': 'barney' 'age': 36 'active': true 'user': 'fred' 'age': 40 'active': false 'user': 'pebbles' 'age': 1 'active': true ; users;// output: object for 'barney'
Browser Support
45.0 | 25.0 ✔ | Not supported | Not supported | 7.1 |
_.findIndex
Returns an index in the array, if an element in the array satisfies the provided testing function. Otherwise -1 is returned.
// Underscore/Lodashvar users = 'user': 'barney' 'age': 36 'active': true 'user': 'fred' 'age': 40 'active': false 'user': 'pebbles' 'age': 1 'active': true ; var index = _;console;// output: 1 // Nativevar users = 'user': 'barney' 'age': 36 'active': true 'user': 'fred' 'age': 40 'active': false 'user': 'pebbles' 'age': 1 'active': true ; var index = users;console;// output: 1
Browser Support
45.0 | 25.0 ✔ | Not supported | Not supported | 7.1 |
_.indexOf
Returns the first index at which a given element can be found in the array, or -1 if it is not present.
// Underscore/Lodashvar array = 2 9 9;var result = _; console; // output: 0 // Nativevar array = 2 9 9;var result = array; console; // output: 0
Browser Support
✔ | 1.5 ✔ | 9 ✔ | ✔ | ✔ |
_.lastIndexOf
Returns the index of the last occurrence of value in the array, or -1 if value is not present.
// Underscore/Lodashvar array = 2 9 9 4 3 6;var result = _; console; // output: 2 // Nativevar array = 2 9 9 4 3 6;var result = array; console; // output: 2
Browser Support
✔ | ✔ | 9 ✔ | ✔ | ✔ |
_.includes
Checks if value is in collection.
var array = 1 2 3;// Underscore/Lodash - also called with _.contains_;// → true // Nativevar array = 1 2 3;array;// → true
Browser Support
47✔ | 43 ✔ | Not supported | 34 | 9 |
_.keys
Retrieve all the names of the object's own enumerable properties.
// Underscore/Lodash var result = _;console;// output: ["one", "two", "three"] // Nativevar result2 = Object;console; // output: ["one", "two", "three"]
Browser Support
5✔ | 4.0 ✔ | 9 | 12 | 5 |
_.size
Return the number of values in the collection.
// Underscore/Lodashvar result = _sizeone: 1 two: 2 three: 3;console;// output: 3 // Nativevar result2 = Objectlength;console; // output: 3
Browser Support
5✔ | 4.0 ✔ | 9 | 12 | 5 |
_.isNaN
Checks if value is NaN.
// Underscore/Lodashconsole;// output: true // Nativeconsole;// output: true // ES6console;// output: true
MDN:
In comparison to the global
isNaN()
function,Number.isNaN()
doesn't suffer the problem of forcefully converting the parameter to a number. This means it is now safe to pass values that would normally convert toNaN
, but aren't actually the same value asNaN
. This also means that only values of the type number, that are alsoNaN
, return true. Number.isNaN()
Voice from the Lodash author:
Lodash's
_.isNaN
is equiv to ES6Number.isNaN
which is different than the globalisNaN
.
--- jdalton
isNaN
Browser Support for ✔ | ✔ | ✔ | ✔ | ✔ |
Number.isNaN
Browser Support for 25 | 15 | Not supported | ✔ | 9 |
_.reverse
❗️Lodash only
Reverses array so that the first element becomes the last, the second element becomes the second to last, and so on.
// Lodashvar array = 1 2 3;console;// output: [3, 2, 1] // Nativevar array = 1 2 3;console;// output: [3, 2, 1]
Voice from the Lodash author:
Lodash's
_.reverse
just callsArray#reverse
and enables composition like_.map(arrays, _.reverse).
It's exposed on _ because previously, likeUnderscore
, it was only exposed in the chaining syntax. --- jdalton
Browser Support
1.0✔ | 1.0✔ | 5.5✔ | ✔ | ✔ |
_.join
❗️Lodash only
Joins a list of elements in an array with a given separator.
// Lodashvar result = _;console;// output: 'one--two--three' // Nativevar result = 'one' 'two' 'three';console// output: 'one--two--three'
Browser Support
1.0✔ | 1.0✔ | 5.5✔ | ✔ | ✔ |
_.toUpper
❗️Lodash only
Uppercase a given string.
// Lodashvar result = _;console;// output: 'FOOBAR' // Nativevar result = 'foobar';console;// output: 'FOOBAR'
Browser Support
✔ | ✔ | ✔ | ✔ | ✔ |
_.toLower
❗️Lodash only
Lowercase a given string.
// Lodashvar result = _;console;// output: 'foobar' // Nativevar result = 'FOOBAR';console;// output: 'foobar'
Browser Support
✔ | ✔ | ✔ | ✔ | ✔ |
_.trim
❗️Lodash only
Removes leading and trailing whitespace characters from string.
// Lodashvar result = _;console;// output: 'abc' // Nativevar result = ' abc ';console;// output: 'abc'
Browser Support
5.0✔ | 3.5✔ | 9.0✔ | 10.5✔ | 5.0✔ |
_.repeat
❗️Lodash only
Repeats the given string n times.
// Lodashvar result = _;// output: 'abcabc' // Nativevar result = 'abc';console;// output: 'abcabc'
Browser Support
41✔ | 24✔ | Not supported | Not supported | 9 |
_.after
❗️Note this is an alternative implementation
Creates a version of the function that will only be run after first being called count times. Useful for grouping asynchronous responses, where you want to be sure that all the async calls have finished, before proceeding.
var notes = 'profile' 'settings';// Underscore/Lodashvar renderNotes = _; notes; // Nativenotes;
Browser Support
✔ | ✔ | ✔ | ✔ | ✔ |
Reference
Inspired by:
License
MIT