DEV Community

Cover image for 15 useful Lodash methods for everyday coding
Diogo Capela
Diogo Capela

Posted on • Updated on • Originally published at diogocapela.com

15 useful Lodash methods for everyday coding

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]
Enter fullscreen mode Exit fullscreen mode

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 }
]
*/
Enter fullscreen mode Exit fullscreen mode

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]]
Enter fullscreen mode Exit fullscreen mode

take

Creates a slice of the array with n elements taken from the beginning.

import take from 'lodash/take';

const result = take([1, 2, 3], 2);

// result => [1, 2]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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 }] }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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 who is passionate about building for the web. If you want to keep in touch check out my website or follow me on Twitter.

Top comments (1)

Collapse
 
tythos profile image
Brian Kirkpatrick

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?