You-Dont-Need-Lodash-Underscore 0,0,1,0,3,1,-1,0 travis-ci npm

List of JavaScript methods which you can use natively + ESLint Plugin

2 years after

You don't (may not) need Lodash/Underscore Gitter

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 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 and 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 and 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

ESLint Plugin

NPM Version Downloads Build Status Coverage Status Dependency Status

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

Quick Links

Array

  1. _.compact
  2. _.concat
  3. _.fill
  4. _.find
  5. _.findIndex
  6. .head and .tail
  7. _.indexOf
  8. _.join
  9. _.lastIndexOf
  10. _.reverse
  11. _.without

Collection*

:heavy_exclamation_mark:Important: Note that the native equivalents are array methods, and will not work with objects. If this functionality is needed, then Lodash/Underscore is the better option.

  1. _.each
  2. _.every
  3. _.filter
  4. _.includes
  5. _.map
  6. .minBy and .maxBy
  7. _.pluck
  8. _.reduce
  9. _.reduceRight
  10. _.size
  11. _.some

Function

  1. _.after

Lang

  1. _.isNaN

Object

  1. _.assign
  2. _.keys
  3. _.toPairs
  4. _.values

String

  1. _.repeat
  2. _.template
  3. _.toLower
  4. _.toUpper
  5. _.trim

Array

_.compact

Creates an array with all falsey values removed.

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

  // Native
  [0, 1, false, 2, '', 3].filter( v => !!v)

Browser Support

Chrome Firefox IE Opera Safari
1.5 ✔ 9 ✔

⬆ 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

Chrome Firefox IE Opera Safari
1.0 ✔ 1.0 ✔ 5.5 ✔

⬆ back to top

_.fill

Fills elements of array with value from start up to, but not including, end. Note that fill is a mutable method in both native and Lodash/Underscore.

  // Underscore/Lodash
  var array = [1, 2, 3]

  _.fill(array, 'a')

  console.log(array)
  // output: ['a', 'a', 'a']

  _.fill(Array(3), 2)
  // output: [2, 2, 2]

  _.fill([4, 6, 8, 10], '*', 1, 3)
  // output: [4, '*', '*', 10]

  // Native
  var array = [1, 2, 3]

  array.fill('a')

  console.log(array)
  // output: ['a', 'a', 'a']

  Array(3).fill(2)
  // output: [2, 2, 2]

  [4, 6, 8, 10].fill('*', 1, 3)
  // output: [4, '*', '*', 10]

Browser Support

Chrome Firefox IE Opera Safari
45.0 ✔ 31.0 ✔ Not supported Not supported 7.1 ✔

⬆ back to top

_.find

Returns the value of the first element in the array that 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

Chrome Firefox IE Opera Safari
45.0 ✔ 25.0 ✔ Not supported Not supported 7.1 ✔

⬆ back to top

_.findIndex

Returns the index of the first element in the array that 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

Chrome Firefox IE Opera Safari
45.0 ✔ 25.0 ✔ Not supported Not supported 7.1 ✔

⬆ back to top

.head and .tail

Gets the first element or all but the first element.

  const array = [1, 2, 3]

  // Underscore: _.first, _.head, _.take
  // Lodash: _.first, _.head
  _.head(array)
  // output: 1

  // Underscore: _.rest, _.tail, _.drop
  // Lodash: _.tail
  _.tail(array)
  // output: [2, 3]

  // Native
  const [ head, ...tail ] = array
  console.log(head)
  // output: 1
  console.log(tail)
  // output [2, 3]

Browser Support

Chrome Firefox IE Opera Safari
49 ✔ 34 ✔ Not Supported Not Supported

⬆ 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

Chrome Firefox IE Opera Safari
1.5 ✔ 9 ✔

⬆ back to top

_.join

:heavy_exclamation_mark: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

Chrome Firefox IE Opera Safari
1.0 ✔ 1.0 ✔ 5.5 ✔

⬆ 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

Chrome Firefox IE Opera Safari
9 ✔

⬆ back to top

_.reverse

:heavy_exclamation_mark: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

Chrome Firefox IE Opera Safari
1.0 ✔ 1.0 ✔ 5.5 ✔

⬆ back to top

_.without

:heavy_exclamation_mark:Lodash only Returns an array where matching items are filtered.

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

  // Native
  var array = [1, 2, 3]
  console.log(array.filter(function(value) {
    return value !== 2;
  }));
  // output: [1, 3]

Browser Support

Chrome Firefox IE Opera Safari
1.0 ✔ 1.5 ✔ 9 ✔

⬆ back to top

Collection*

:heavy_exclamation_mark:Important: Note that the native equivalents are array methods, and will not work with objects. If this functionality is needed, then Lodash/Underscore is the better option.

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

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
1.5 ✔ 9 ✔

⬆ 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

Chrome Firefox IE Opera Safari
1.5 ✔ 9 ✔

⬆ back to top

_.includes

Checks if a value is in collection.

  var array = [1, 2, 3]
  // Underscore/Lodash - also called _.contains
  _.includes(array, 1)
  // output: true

  // Native
  var array = [1, 2, 3]
  array.includes(1)
  // output: true

  // Native (does not use same value zero)
  var array = [1, 2, 3]
  array.indexOf(1) > -1
  // output: true

Browser Support for Array.prototype.includes

Chrome Firefox IE Opera Safari
47 ✔ 43 ✔ Not supported 34 ✔ 9 ✔

Browser Support for Array.prototype.indexOf

Chrome Firefox IE Opera Safari

⬆ back to top

_.map

Translates 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]

.minBy and .maxBy

Use Array#reduce for find the maximum or minimum collection item

  // Underscore/Lodash
  var data = [{ value: 6 }, { value: 2 }, { value: 4 }]
  var minItem = _.minBy(data, 'value')
  var maxItem = _.maxBy(data, 'value')
  console.log(minItem, maxItem)
  // output: { value: 2 } { value: 6 }

  // Native
  var data = [{ value: 6 }, { value: 2 }, { value: 4 }]
  var minItem = data.reduce(function(a, b) { return a.value <= b.value ? a : b }, {})
  var maxItem = data.reduce(function(a, b) { return a.value >= b.value ? a : b }, {})
  console.log(minItem, maxItem)
  // output: { value: 2 }, { value: 6 }

Extract a functor and use es2015 for better code

  // utils
  const makeSelect = (comparator) => (a, b) => comparator(a, b) ? a : b
  const minByValue = makeSelect((a, b) => a.value <= b.value)
  const maxByValue = makeSelect((a, b) => a.value <= b.value)

  // main logic
  const data = [{ value: 6 }, { value: 2 }, { value: 4 }]
  const minItem = data.reduce(minByValue, {})
  const maxItem = data.reduce(maxByValue, {})

  console.log(minItem, maxItem)
  // output: { value: 2 }, { value: 6 }

  // or also more universal and little slower variant of minBy
  const minBy = (collection, key) => {
    // slower becouse need to create a lambda function for each call...
    const select = (a, b) => a[key] <= b[key] ? a : b
    return collection.reduce(select, {})
  }

  console.log(minBy(data))
  // output: { value: 2 }

Browser Support

Chrome Firefox IE Opera Safari
3.0 ✔ 9 ✔ 10.5 ✔ 4.0 ✔

⬆ back to top

_.pluck

array.map or _.map can also be used to replace _.pluck. Lodash v4.0 removed _.pluck in favor of _.map with iteratee shorthand. Details can be found in Changelog

  // Underscore/Lodash
  var array1 = [{name: "Alice"}, {name: "Bob"}, {name: "Jeremy"}]
  var names = _.pluck(array1, "name")
  console.log(names)
  // output: ["Alice", "Bob", "Jeremy"]

  // Native
  var array1 = [{name: "Alice"}, {name: "Bob"}, {name: "Jeremy"}]
  var names = array1.map(function(x){
    return x.name
  })
  console.log(names)
  // output: ["Alice", "Bob", "Jeremy"]

Browser Support

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
3.0 ✔ 9 ✔ 10.5 ✔ 4.0 ✔

⬆ back to top

_.size

Returns 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

Chrome Firefox IE Opera Safari
5 ✔ 4.0 ✔ 9 ✔ 12 ✔ 5 ✔

⬆ back to top

_.some

Tests whether any of the 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, 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

Chrome Firefox IE Opera Safari
1.5 ✔ 9 ✔

⬆ back to top

Function

_.after

:heavy_exclamation_mark: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

Chrome Firefox IE Opera Safari

⬆ back to top

Lang

_.isNaN

Checks if a 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

Chrome Firefox IE Opera Safari

Browser Support for Number.isNaN

Chrome Firefox IE Opera Safari
25 ✔ 15 ✔ Not supported 9 ✔

⬆ back to top

Object

_.assign

The method is used to copy the values of all enumerable own properties from one or more source objects to a target object.

  // Underscore: _.extendOwn
  // Lodash
  function Foo() {
    this.c = 3;
  }
  function Bar() {
    this.e = 5;
  }
  Foo.prototype.d = 4;
  Bar.prototype.f = 6;
  var result = _.assign(new Foo, new Bar);
  console.log(result);
  // output: { 'c': 3, 'e': 5 }

  // Native
  function Foo() {
    this.c = 3;
  }
  function Bar() {
    this.e = 5;
  }
  Foo.prototype.d = 4;
  Bar.prototype.f = 6;
  var result = Object.assign(new Foo, new Bar);
  console.log(result);
  // output: { 'c': 3, 'e': 5 }

Browser Support

Chrome Firefox IE Opera Safari
45 ✔ 34 ✔ No support 32 ✔ 9 ✔

⬆ back to top

_.keys

Retrieves 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

Chrome Firefox IE Opera Safari
5 ✔ 4.0 ✔ 9 ✔ 12 ✔ 5 ✔

⬆ back to top

_.toPairs

Retrieves all the given object's own enumerable property [ key, value ] pairs.

  // Underscore - also called _.pairs
  // Lodash - also called _.entries
  var result = _.toPairs({one: 1, two: 2, three: 3})
  console.log(result)
  // output: [["one", 1], ["two": 2], ["three", 3]]

  // Native
  var result2 = Object.entries({one: 1, two: 2, three: 3})
  console.log(result2)
  // output: [["one", 1], ["two": 2], ["three", 3]]

Browser Support

Chrome Firefox IE Opera Safari
38 ✔ 28 ✔ Not supported 25 ✔ 7.1 ✔

⬆ back to top

_.values

Retrieves all the given object's own enumerable property values.

  // Underscore/Lodash
  var result = _.values({one: 1, two: 2, three: 3})
  console.log(result)
  // output: [1, 2, 3]

  // Native
  var result2 = Object.values({one: 1, two: 2, three: 3})
  console.log(result2)
  // output: [1, 2, 3]

Browser Support

Chrome Firefox IE Opera Safari
54 ✔ 47 ✔ Not supported Not supported Not supported

⬆ back to top

String

_.repeat

:heavy_exclamation_mark: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

Chrome Firefox IE Opera Safari
41 ✔ 24 ✔ Not supported Not supported 9 ✔

⬆ back to top

_.template

:heavy_exclamation_mark: Note this is an alternative implementation. Native template literals not escape html.

Create a template function.

  // Lodash/Underscore
  const compiled = _.template('hello <%= user %>!');
  compiled({ 'user': 'fred' });

  // Native
  const templateLitreal = (value) => `hello ${value.user}`;
  templateLiterlFunction({ 'user': 'fred' });

Browser Support

Chrome Firefox IE Opera Safari
41 ✔ 34 ✔ Not supported 28 ✔ 9 ✔

⬆ back to top

_.toLower

:heavy_exclamation_mark:Lodash only Lowercases 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

Chrome Firefox IE Opera Safari

⬆ back to top

_.toUpper

:heavy_exclamation_mark:Lodash only Uppercases 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

Chrome Firefox IE Opera Safari

⬆ back to top

_.trim

:heavy_exclamation_mark:Lodash only Removes the leading and trailing whitespace characters from a string.

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

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

Browser Support

Chrome Firefox IE Opera Safari
5.0 ✔ 3.5 ✔ 9.0 ✔ 10.5 ✔ 5.0 ✔

⬆ back to top

Reference

Inspired by:

License

MIT

Related Repositories

essential-javascript-links

essential-javascript-links

Essential JavaScript website. ...

crocodile-node-mvc-framework

crocodile-node-mvc-framework

:crocodile: CrocodileJS is a full-stack Node.js + Koa + ES7 MVC framework for Ap ...

generator-cg-angular

generator-cg-angular

Yeoman generator for Enterprise Angular projects. ...

TreehouseShow

TreehouseShow

TeamTreeHouse's Weekly show notes ...

You-Dont-Know-Lodash-Underscore

You-Dont-Know-Lodash-Underscore

In response to You-Dont-Need-Lodash-Underscore :raised_hand: ...


Top Contributors

cht8687 stevemao DanCouper pmcelhaney ipeters90 infacq Hermanya benjamingr chrismbarr doque guilhermehn acconrad JonMcPartland lucasbento mathieumg nosir PalleZingmark kyukyukyu zwacky draco dracupid soomtong plantain-00

Dependencies

package version
kebab-case ^1.0.0
dev coveralls ^2.11.9
eslint ^3.0.0
istanbul ^0.4.4

Releases

-   v5.0.1 zip tar
-   v5.0.0 zip tar