Lodash is a great library, well crafted and with a strong team behind it, this page is a mere exercise to see what we can achieve with plain js, even more now that ES2015 is getting used more and more.

There are many many reasons why you should rely on lodash, but sometimes it's nice to know the nitty gritty details of what we are building or how stuff works behind the hood, hence this project.

The project is far from complete, please contribute on github

Your search didn't match any comparisons.

Array

Chunk

Lodash

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

Vanilla JS

function chunk(arr, n) {
  return arr.slice(0, (arr.length + n - 1)/n | 0)
          .map((c, i) => arr.slice(n * i, n * i + n));
}

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

Refs:

Compact

Lodash

_.compact([0, 1, 2]);
// => [1, 2]

Vanilla JS

[0,1,2].filter(Boolean)
// => [1, 2]

//es2015
array.filter(x => !!x);
// => [1, 2]

Refs:

Concat

Lodash

var array = [1]
_.concat(array, 2, [3], [[4]]);
// => [1, 2, 3, [4]]

Vanilla JS

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

Refs:

Difference

Lodash

var a = [2, 1];
var b = [3, 2];

_.difference(a, b);
// => [1]

Vanilla JS

var a = [2, 1];
var b = [3, 2];

[...a].filter(x => !b.includes(x));
// => [1]

Refs:

DifferenceBy

Lodash

var arrA = [2.1, 1.2];
var arrB = [2.3, 3.4];
_.differenceBy(arrA, arrB, Math.floor);
// => [{ 'x': 2, 'y': 1 }][1.2]

// The `_.property` iteratee shorthand.
var arrA = [{ 'x': 2 }, { 'x': 1 }];
var arrB = [{ 'x': 1 }];

_.differenceBy(arrA, arrB, 'x');
// => [{ 'x': 2, 'y': 1 }][{ 'x': 2 }]

Vanilla JS

var arrA = [2.1, 1.2];
var arrB = [2.3, 3.4];

[...arrA].filter(a => !arrB.map(Math.floor).includes(Math.floor(a)));
// => [1.2]

// The `_.property` iteratee shorthand.
var arrA = [{ 'x': 2 }, { 'x': 1 }];
var arrB = [{ 'x': 1 }];

[...arrA].filter(a => !arrB.map(b => b.x).includes(a.x));
// => [{ 'x': 2 }]

Refs:

Fill

Lodash

var array = [1, 2, 3]
_.fill(array, 'a')
// => ['a', 'a', 'a']

_.fill(Array(3), 2)
// => [2, 2, 2]

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

Vanilla JS

// Native
var array = [1, 2, 3]
array.fill('a')
// => ['a', 'a', 'a']

Array(3).fill(2)
// => [2, 2, 2]

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

Refs:

FindIndex

Lodash

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
]

_.findIndex(users, function (o) { return o.age >= 40; })
// => 1

Vanilla JS

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
]

users.findIndex(function (o) { return o.age >= 40; })
// => 1

Refs:

Includes

Lodash

var array = [1, 2, 3]
_.includes(array, 1)
// => true

Vanilla JS

var array = [1, 2, 3]
array.includes(1)
// => true

var array = [1, 2, 3]
array.indexOf(1) > -1
// => true

Refs:

IndexOf

Lodash

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

Vanilla JS

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

Refs:

Reduce

Lodash

_.reduce([0, 1, 2, 3], function(a, b) {
  return a + b;
}, 0);
// => 6

Vanilla JS

[1, 2, 3].reduce((a, b) => a + b);
// => 6

Refs:

Tail

Lodash

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

Vanilla JS

const [head, ...tail] = [1, 2, 3];
console.log(tail)
// => [2, 3]

Refs:

Collection

Each

Lodash

function isLargerThanTen (element, index, array) {
  return element >= 10
}

var array = [10, 20, 30]
_.every(array, isLargerThanTen)
// => true

Vanilla JS

function isLargerThanTen (element, index, array) {
  return element >= 10
}

var array = [10, 20, 30]
array.every(isLargerThanTen)
// => true

Refs:

Every

Lodash

function iteratee(item, index) {
  console.log(item, index)
}

var array = ["a", "b", "c"]
_.each(array, iteratee)
// => a 0
// => b 1
// => c 2

Vanilla JS

function iteratee(item, index) {
  console.log(item, index)
}

var array = ["a", "b", "c"]
array.forEach(iteratee)
// => a 0
// => b 1
// => c 2

Refs:

Filter

Lodash

function isBigEnough(value) {
  return value >= 10
}
var array = [12, 5, 8, 130, 44]
_.filter(array, isBigEnough)
// => [12, 130, 44]

Vanilla JS

function isBigEnough(value) {
  return value >= 10
}

var array = [12, 5, 8, 130, 44]
array.filter(isBigEnough)
// => [12, 130, 44]

Refs:

Find

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; })
// => { user: "barney", age: 36, active: true }

Vanilla JS

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; })
// => { user: "barney", age: 36, active: true }

Refs:

Map

Lodash

_.map([1, 2, 3], function(n) { return n * 3; });
// => [3, 6, 9]

Vanilla JS

[1, 2, 3].map(n => n * 3);
// => [3, 6, 9]

Refs: