you-dont-need-lodash-underscore

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

1. _.each
2. _.map
3. _.every
4. _.some
5. _.reduce
6. _.reduceRight
7. _.filter
8. _.find
9. _.findIndex
10. _.indexOf
11. _.lastIndexOf
12. _.includes
13. _.keys
14. _.size
15. _.isNaN
16. _.reverse
17. _.join
18. _.toUpper
19. _.toLower
20. _.trim
21. _.repeat
22. _.after

_.each

Iterates over a list of elements, yielding each in turn to an iteratee function.

// Underscore/Lodash
_.each([1, 2, 3], function(value, index) {
  console.log(value);
});
// output: 1 2 3
 
// Native
[1, 2, 3].forEach(function(value, index) {
  console.log(value);
});
// output: 1 2 3

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ back to top

_.map

Translate all items in an array or object to new array of items.

// Underscore/Lodash
var array1 = [1, 2, 3];
var array2 = _.map(array1, function(value, index) {
  return value*2;
});
console.log(array2);
// output: [2, 4, 6]
 
// Native
var array1 = [1, 2, 3];
var array2 = array1.map(function(value, index) {
  return value*2;
});
console.log(array2);
// output: [2, 4, 6]

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ back to top

_.every

Tests whether all elements in the array pass the test implemented by the provided function.

// Underscore/Lodash
function isLargerThanTen(element, index, array) {
  return element >=10;
}
var array = [10, 20, 30];
var result = _.every(array, isLargerThanTen);
console.log(result);
// output: true
 
// Native
function isLargerThanTen(element, index, array) {
  return element >=10;
}
 
var array = [10, 20, 30];
var result = array.every(isLargerThanTen);
console.log(result);
// output: true

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ back to top

_.some

Tests whether some element in the array passes the test implemented by the provided function.

// Underscore/Lodash
function isLargerThanTen(element, index, array) {
  return element >=10;
}
var array = [10, 9, 8];
var result = _.some(array, isLargerThanTen);
console.log(result);
// output: true
 
// Native
function isLargerThanTen(element, index, array) {
  return element >=10;
}
 
var array = [10, 9, 8];
var result = array.some(isLargerThanTen);
console.log(result);
// output: true

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ back to top

_.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/Lodash
var array = [0, 1, 2, 3, 4];
var result = _.reduce(array, function (previousValue, currentValue, currentIndex, array) {
  return previousValue + currentValue;
});
console.log(result);
// output: 10
 
// Native
var array = [0, 1, 2, 3, 4];
var result = array.reduce(function (previousValue, currentValue, currentIndex, array) {
  return previousValue + currentValue;
});
console.log(result);
// output: 10

Browser Support

✔	3.0 ✔	9 ✔	10.5	4.0

⬆ back to top

_.reduceRight

This method is like _.reduce except that it iterates over elements of collection from right to left.

// Underscore/Lodash
var array = [0, 1, 2, 3, 4];
var result = _.reduceRight(array, function (previousValue, currentValue, currentIndex, array) {
  return previousValue - currentValue;
});
console.log(result);
// output: -2
 
// Native
var array = [0, 1, 2, 3, 4];
var result = array.reduceRight(function (previousValue, currentValue, currentIndex, array) {
  return previousValue - currentValue;
});
console.log(result);
// output: -2

Browser Support

✔	3.0 ✔	9 ✔	10.5	4.0

⬆ back to top

_.filter

Creates a new array with all elements that pass the test implemented by the provided function.

// Underscore/Lodash
function isBigEnough(value) {
  return value >= 10;
} 
var array = [12, 5, 8, 130, 44];
var filtered = _.filter(array, isBigEnough);
console.log(filtered);
// output: [12, 130, 44]
 
// Native
function isBigEnough(value) {
  return value >= 10;
} 
var array = [12, 5, 8, 130, 44];
var filtered = array.filter(isBigEnough);
console.log(filtered);
// output: [12, 130, 44]

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ back to top

_.find

Returns a value in the array, if an element in the array satisfies the provided testing function. Otherwise undefined is returned.

// Underscore/Lodash
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
 
_.find(users, function(o) { return o.age < 40; });
// output: object for 'barney'
 
// Native
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
 
users.find(function(o) { return o.age < 40; });
// output: object for 'barney'

Browser Support

45.0	25.0 ✔	Not supported	Not supported	7.1

⬆ back to top

_.findIndex

Returns an index in the array, if an element in the array satisfies the provided testing function. Otherwise -1 is returned.

// Underscore/Lodash
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
 
var index =  _.findIndex(users, function(o) { return o.age >= 40; });
console.log(index);
// output: 1
 
// Native
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
 
var index =  users.findIndex(function(o) { return o.age >= 40; });
console.log(index);
// output: 1

Browser Support

45.0	25.0 ✔	Not supported	Not supported	7.1

⬆ back to top

_.indexOf

Returns the first index at which a given element can be found in the array, or -1 if it is not present.

// Underscore/Lodash
var array = [2, 9, 9];
var result = _.indexOf(array, 2);    
console.log(result); 
// output: 0
 
// Native
var array = [2, 9, 9];
var result = array.indexOf(2);    
console.log(result); 
// output: 0

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ back to top

_.lastIndexOf

Returns the index of the last occurrence of value in the array, or -1 if value is not present.

// Underscore/Lodash
var array = [2, 9, 9, 4, 3, 6];
var result = _.lastIndexOf(array, 9);    
console.log(result); 
// output: 2
 
// Native
var array = [2, 9, 9, 4, 3, 6];
var result = array.lastIndexOf(9);    
console.log(result); 
// output: 2

Browser Support

✔	✔	9 ✔	✔	✔

⬆ back to top

_.includes

Checks if value is in collection.

var array = [1, 2, 3];
// Underscore/Lodash - also called with _.contains
_.includes(array, 1);
// → true
 
// Native
var array = [1, 2, 3];
array.includes(1);
// → true

Browser Support

47✔	43 ✔	Not supported	34	9

⬆ back to top

_.keys

Retrieve all the names of the object's own enumerable properties.

// Underscore/Lodash 
var result = _.keys({one: 1, two: 2, three: 3});
console.log(result);
// output: ["one", "two", "three"]
 
// Native
var result2 = Object.keys({one: 1, two: 2, three: 3});
console.log(result2); 
// output: ["one", "two", "three"]

Browser Support

5✔	4.0 ✔	9	12	5

⬆ back to top

_.size

Return the number of values in the collection.

// Underscore/Lodash
var result = _.size({one: 1, two: 2, three: 3});
console.log(result);
// output: 3
 
// Native
var result2 = Object.keys({one: 1, two: 2, three: 3}).length;
console.log(result2); 
// output: 3

Browser Support

5✔	4.0 ✔	9	12	5

⬆ back to top

_.isNaN

Checks if value is NaN.

// Underscore/Lodash
console.log(_.isNaN(NaN));
// output: true
 
// Native
console.log(isNaN(NaN));
// output: true
 
// ES6
console.log(Number.isNaN(NaN));
// 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 to NaN, but aren't actually the same value as NaN. This also means that only values of the type number, that are also NaN, return true. Number.isNaN()

Voice from the Lodash author:

Lodash's _.isNaN is equiv to ES6 Number.isNaN which is different than the global isNaN.
--- jdalton

Browser Support for isNaN

✔	✔	✔	✔	✔

Browser Support for Number.isNaN

25	15	Not supported	✔	9

⬆ back to top

_.reverse

❗️Lodash only Reverses array so that the first element becomes the last, the second element becomes the second to last, and so on.

// Lodash
var array = [1, 2, 3];
console.log(_.reverse(array));
// output: [3, 2, 1]
 
// Native
var array = [1, 2, 3];
console.log(array.reverse());
// output: [3, 2, 1]

Voice from the Lodash author:

Lodash's _.reverse just calls Array#reverse and enables composition like _.map(arrays, _.reverse). It's exposed on _ because previously, like Underscore, it was only exposed in the chaining syntax. --- jdalton

Browser Support

1.0✔	1.0✔	5.5✔	✔	✔

⬆ back to top

_.join

❗️Lodash only Joins a list of elements in an array with a given separator.

// Lodash
var result = _.join(['one', 'two', 'three'], '--');
console.log(result);
// output: 'one--two--three'
 
// Native
var result = ['one', 'two', 'three'].join('--');
console.log(result)
// output: 'one--two--three'

Browser Support

1.0✔	1.0✔	5.5✔	✔	✔

⬆ back to top

_.toUpper

❗️Lodash only Uppercase a given string.

// Lodash
var result = _.toUpper('foobar');
console.log(result);
// output: 'FOOBAR'
 
// Native
var result = 'foobar'.toUpperCase();
console.log(result);
// output: 'FOOBAR'

Browser Support

✔	✔	✔	✔	✔

⬆ back to top

_.toLower

❗️Lodash only Lowercase a given string.

// Lodash
var result = _.toLower('FOOBAR');
console.log(result);
// output: 'foobar'
 
// Native
var result = 'FOOBAR'.toLowerCase();
console.log(result);
// output: 'foobar'

Browser Support

✔	✔	✔	✔	✔

⬆ back to top

_.trim

❗️Lodash only Removes leading and trailing whitespace characters from string.

// Lodash
var result = _.trim(' abc ');
console.log(result);
// output: 'abc'
 
// Native
var result = ' abc '.trim();
console.log(result);
// output: 'abc'

Browser Support

5.0✔	3.5✔	9.0✔	10.5✔	5.0✔

⬆ back to top

_.repeat

❗️Lodash only Repeats the given string n times.

// Lodash
var result = _.repeat('abc', 2);
// output: 'abcabc'
 
// Native
var result = 'abc'.repeat(2);
console.log(result);
// output: 'abcabc'

Browser Support

41✔	24✔	Not supported	Not supported	9

⬆ back to top

_.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/Lodash
var renderNotes = _.after(notes.length, render);
   notes.forEach(function(note) {
   console.log(note);
   renderNotes();
});
 
 // Native
notes.forEach(function(note, index) {
 console.log(note);
 if (notes.length === (index + 1)) {
   render();
 }
});

Browser Support

✔	✔	✔	✔	✔

⬆ back to top

Reference

• Mozilla Developer Network
• Underscore.js
• Lodash.js

Inspired by:

• You-Dont-Need-jQuery
• Rui's blog

License

MIT