You Don't Need Lodash

"You Don't Need Lodash" is intened to show how modern javascript can replace most of the Lodash library.

It's 2018; Things Have Changed

9+ years after Lodash's initial release, the browser landscape has drastically changed. The purpose of this is not to tell you that you shouldn't use Lodash, but rather to re-educate you on what exactly Lodash is useful for. The JavaScript standard library, and other browser APIs, have been much better standardized, and many of the previous pitfalls of compatibility no longer exist. While Lodash is still useful, it is less so than before, and it's important for you--the developer--to be familiar with the underlying APIs that libraries are abstracting. A lot of the new APIs and methodologies are much easier to understand, and are sometimes more coherent than those in libraries like Lodash.

---

Most of the APIs that I'll be showing can be polyfilled, meaning that if the browser is modern, and supports the APIs, it will use those, but if the browser is legacy, it will update the APIs with the new features, and allow all browsers to work. Modern features that can be polyfilled for legacy browsers:

• Promise
• fetch
• classList
• Array.from
• Object.assign
• More... Although a couple of the modern examples have more characters in their code, they should not deter you from trying to understand these new APIs. Read carefully, and try to understand what the code is doing so that you can better reflect on whether or not you should use a library.

---

_.compact(array)

Lodash

_.compact([0, 1, false, 2, "", 3]);

Modern | Using Array.filter and Arrow functions

[0, 1, false, 2, "", 3].filter(element => element);

---

_.concat(array, [values])

Lodash

const array = [1];
const other = _.concat(array, 2, [3], [[4]]);

Modern | Using Array.concat

const array = [1];
const other = array.concat(2, [3], [[4]]);

---

_.drop(array, [n=1])

Lodash

_.drop([1, 2, 3], 2);

Modern | Using Array.slice

[1, 2, 3].slice(2);

---

_.fill(array, value, [start=0], [end=array.length])

Lodash

_.fill([4, 6, 8, 10], "*", 1, 3);

Modern | Using Array.fill

[4, 6, 8, 10].fill("*", 1, 3);

---

_.findIndex(array, [predicate=_.identity], [fromIndex=0])

Lodash

const users = [
	{ user: "barney", active: false },
	{ user: "fred", active: false },
	{ user: "pebbles", active: true }
];

_.findIndex(users, o => o.user == "barney");

Modern | Using Array.findIndex

const users = [
	{ user: "barney", active: false },
	{ user: "fred", active: false },
	{ user: "pebbles", active: true }
];

users.findIndex(o => o.user == "barney");

---

_.head(array)

Lodash

_.head([1, 2, 3]);

Modern

[1, 2, 3][0];

---

_.flatten(array)

Lodash

_.flatten([1, [2, [3, [4]], 5]]);

New | Using Array.flat

[1, [2, [3, [4]], 5]].flat(1);

---

_.flattenDeep(array)

Lodash

_.flattenDeep([1, [2, [3, [4]], 5]]);

New | Using Array.flat

[1, [2, [3, [4]], 5]].flat(Infinity);

---

_.flattenDepth(array, [depth=1])

Lodash

const array = [1, [2, [3, [4]], 5]];

_.flattenDepth(array, 1);

New | Using Array.flat

const array = [1, [2, [3, [4]], 5]];

array.flat(1));

---

_.fromPairs(pairs)

Lodash

_.fromPairs([["a", 1], ["b", 2]]);

New | Using Object.fromEntries

Object.fromEntries([["a", 1], ["b", 2]]);

---

_.indexOf(array, value, [fromIndex=0])

Lodash

_.indexOf([1, 2, 1, 2], 2, 2);

Modern | Using Array.indexOf

[1, 2, 1, 2].indexOf(2, 2);

---

_.initial(array)

Lodash

_.initial([1, 2, 3]);

Modern | Using Array.slice

[1, 2, 3].slice(0, -1);

---

_.join(array, [separator=','])

Lodash

_.join(["a", "b", "c"], "~");

Modern | Using Array.join

["a", "b", "c"].join("~");

---

_.last(array)

Lodash

_.last([1, 2, 3]);

Modern | Using Array.slice

[1, 2, 3].slice(-1)[0];

---

_.reverse(array)

Lodash

const array = [1, 2, 3];

_.reverse(array);

Modern | Using Array.reverse

const array = [1, 2, 3];

array.reverse();

---

_.tail(array)

Lodash

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

Modern | Using Array.slice

[1, 2, 3].slice(1);

---

_.take(array, [n=1])

Lodash

_.take([1, 2, 3], 2);

Modern | Using Array.slice

[1, 2, 3].slice(0, 2);

---

_.takeRight(array, [n=1])

Lodash

_.takeRight([1, 2, 3], 2);

Modern | Using Array.slice

[1, 2, 3].slice(-2);

---