lucasbento / You-Dont-Need-Lodash-Underscore

List of JavaScript methods which you can use natively

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 being supported natively thanks to ECMAScript5 [ES5] and ESCMAScript2015 [ES6]. If you want to make your project less 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.

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

_.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 ✔	✔	✔

_.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 ✔	✔	✔

_.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 ✔	✔	✔

_.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 ✔	✔	✔

_.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

_.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

_.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 ✔	✔	✔

_.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

_.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

_.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 ✔	✔	✔

_.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(2);    
console.log(result); 
// output: 0

Browser Support

✔	✔	9 ✔	✔	✔

_.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

_.keys

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

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

Reference

• Mozilla Developer Network

• Underscore.js

• Lodash.js

Inspired by:

• You-Dont-Need-jQuery

License

MIT