Lodash is one of the most popular open-source JavaScript libraries. It implements a lot of functional programming helpers that make everyday coding easier. It's something I use often in my own development work, and so I wanted to share with you some of the methods that I find myself using a lot.
In this short post, we'll go over 15 everyday methods that, when used properly, can speed up development and make your code more readable.
shuffle
Creates an array of shuffled values (using a version of the Fisher-Yates shuffle).
import shuffle from 'lodash/shuffle';
const result = shuffle([1, 2, 3, 4, 5]);
// result => [2, 5, 1, 4, 3]
orderBy
Creates an array of elements, sorted in the specified order by the results of running each element in a collection thru each iteratee.
import orderBy from 'lodash/orderBy';
const items = [
{ name: 'Item A', price: 2 },
{ name: 'Item B', price: 8 },
{ name: 'Item C', price: 4 },
{ name: 'Item D', price: 4 }
];
const result = orderBy(items, ['price', 'name'], ['desc', 'asc']);
/*
result => [
{ name: 'Item B', price: 8 },
{ name: 'Item C', price: 4 },
{ name: 'Item D', price: 4 },
{ name: 'Item A', price: 2 }
]
*/
chunk
Creates an array of elements split into groups of a specified size (if the array can't be split evenly, the final chunk will only contain the remaining elements).
import chunk from 'lodash/chunk';
const array = [ 1, 2, 3, 4 ];
const result = chunk(array, 2);
// result => [[1, 2], [3, 4]]
take
Creates a slice of the array with
nelements taken from the beginning.
import take from 'lodash/take';
const result = take([1, 2, 3], 2);
// result => [1, 2]
difference
Creates an array of the values not included in the other given arrays. The order and references of result values are determined by the first array.
import difference from 'lodash/difference';
const result = difference([1, 2, 3], [2, 3, 4]);
// result => [1]
intersection
Creates an array of unique values that are included in all given arrays. The order and references of result values are determined by the first array.
import intersection from 'lodash/intersection';
const result = intersection([1, 2, 3], [2, 3, 4]);
// result => [2, 3]
isEmpty
Checks if the value is an empty object, collection, map, or set (objects are considered empty if they have no own enumerable string keyed properties).
import isEmpty from 'lodash/isEmpty';
isEmpty({});
// => true
isEmpty({ name: 'John Doe' });
// => false
throttle
Creates a throttled function that only invokes the passed function at most once per every interval, specified in milliseconds.
import throttle from 'lodash/throttle';
const throttled = throttle(() => {
console.log('Throttled after 50ms!');
}, 50);
window.addEventListener('resize', throttled);
debounce
Creates a debounced function that delays invoking the passed function until after the specified wait time has elapsed since the last time the debounced function was invoked.
import debounce from 'lodash/debounce';
const debounced = debounce(() => {
console.log('Debounced after 400ms!');
}, 400);
window.addEventListener('resize', debounced);
merge
Recursively merges own and inherited enumerable string keyed properties of source objects into the destination object.
import merge from 'lodash/merge';
const firstObject = { 'A': [{ 'B': 1 }, { 'C': 2 }] };
const secondObject = { 'A': [{ 'B': 3 }, { 'D': 4 }] };
const result = merge(firstObject, secondObject);
// result => { A: [{ B: 3 }, { C: 2, D: 4 }] }
cloneDeep
Creates a deep clone of a specified value.
import cloneDeep from 'lodash/cloneDeep';
const items = [
{ name: 'Item A' },
{ name: 'Item B' },
];
const result = cloneDeep(items);
// result[0] === items[0] => false
startCase
Converts a string to start case (the first letter of each word capitalized).
import startCase from 'lodash/startCase';
startCase('--foo-bar--');
// => 'Foo Bar'
startCase('fooBar');
// => 'Foo Bar'
startCase('__FOO_BAR__');
// => 'FOO BAR'
kebabCase
Converts a string to kebab case (punctuation is removed, the text is converted to lowercase, and spaces are replaced by single dashes).
import kebabCase from 'lodash/kebabCase';
kebabCase('Foo Bar');
// => 'foo-bar'
kebabCase('fooBar');
// => 'foo-bar'
kebabCase('__FOO_BAR__');
// => 'foo-bar'
snakeCase
Converts a string to snake case (punctuation is removed, the text is converted to lowercase, and spaces are replaced by single underscores).
import snakeCase from 'lodash/snakeCase';
snakeCase('Foo Bar');
// => 'foo_bar'
snakeCase('fooBar');
// => 'foo_bar'
snakeCase('--FOO-BAR--');
// => 'foo_bar'
camelCase
Converts a string to camel case (spaces and punctuation are removed and the first letter of each word is capitalized).
import camelCase from 'lodash/camelCase';
camelCase('Foo Bar');
// => 'fooBar'
camelCase('--foo-bar--');
// => 'fooBar'
camelCase('__FOO_BAR__');
// => 'fooBar'
That’s all. Thanks! I hope this can help you the next time you write a JavaScript application. Lodash is a very popular open-source library that's worth checking out if you're looking for ways to build web applications faster.
Hey! 👋 My name is Diogo and I'm an enthusiastic frontend developer that is passionate about building for the web. If you want to keep in touch check out my website or follow me on Twitter. Thanks!
Top comments (1)
Good stuff! I think I constantly underestimate how useful lodash can be. I wonder if there's a useful mapping to type extensions that would make features more visible?