Lodash is a modern JavaScript utility library that provides a wide range of functions to make it easier to work with arrays, objects, strings, and other data types. Lodash helps developers to write clean, efficient, and modular code by offering a vast array of utility functions that simplify complex operations. In this article, we will delve into the world of Lodash and explore its various features with detailed examples.
1: Installation and Setup
To get started with Lodash, you can either include the library via a CDN or install it using npm or yarn.
CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
npm:
npm install lodash
yarn:
yarn add lodash
2: Array Functions
Lodash offers a variety of functions to manipulate arrays, such as chunk, compact, difference, and many more. Here are some examples:
_.chunk(array, [size=1]): Splits an array into chunks of a specified size.
const array = [1, 2, 3, 4, 5, 6, 7, 8];
const result = _.chunk(array, 3);
console.log(result); // [[1, 2, 3], [4, 5, 6], [7, 8]]
_.compact(array): Removes falsey values from an array.
const array = [0, 1, false, 2, '', 3, null, undefined];
const result = _.compact(array);
console.log(result); // [1, 2, 3]
_.difference(array, [values]): Creates an array of unique array values not included in the other given arrays.
const array1 = [1, 2, 3];
const array2 = [2, 3, 4];
const result = _.difference(array1, array2);
console.log(result); // [1]
_.flatten(array): Flattens an array by one level.
const nestedArray = [1, [2, [3, [4]], 5]];
const result = _.flatten(nestedArray);
console.log(result); // [1, 2, [3, [4]], 5]
_.flattenDeep(array): Recursively flattens an array.
const nestedArray = [1, [2, [3, [4]], 5]];
const result = _.flattenDeep(nestedArray);
console.log(result); // [1, 2, 3, 4, 5]
_.union(array1, array2, ...): Creates an array of unique values, in order, from all given arrays.
const array1 = [1, 2, 3];
const array2 = [2, 3, 4];
const array3 = [3, 4, 5];
const result = _.union(array1, array2, array3);
console.log(result); // [1, 2, 3, 4, 5]
_.without(array, [values]): Creates an array excluding all given values.
const array = [1, 2, 3, 4, 5];
const result = _.without(array, 2, 4);
console.log(result); // [1, 3, 5]
_.slice(array, [start=0], [end=array.length]): Creates a slice of an array from the start index up to, but not including, the end index.
const array = [1, 2, 3, 4, 5];
const result = _.slice(array, 1, 4);
console.log(result); // [2, 3, 4]
_.zip(...arrays): Creates an array of grouped elements, where the first element of each passed array is paired together, and the second element of each passed array is paired together, and so on.
const names = ['John', 'Jane'];
const ages = [30, 28];
const cities = ['New York', 'Los Angeles'];
const result = _.zip(names, ages, cities);
console.log(result); // [['John', 30, 'New York'], ['Jane', 28, 'Los Angeles']]
3: Collection Functions
Lodash also provides functions to work with collections (arrays or objects), such as filter, map, and reduce. Here are some examples:
_.filter(collection, [predicate=_.identity]): Iterates over elements of a collection and returns an array with elements that pass the predicate test.
const users = [
{ 'user': 'barney', 'age': 36, 'active': true },
{ 'user': 'fred', 'age': 40, 'active': false },
{ 'user': 'pebbles','age': 1, 'active': true }
];
const result = _.filter(users, (o) => !o.active);
console.log(result); // [{ 'user': 'fred', 'age': 40, 'active': false }]
_.map(collection, [iteratee=_.identity]): Creates an array of values by running each element in the collection through an iteratee function.
const users = [
{ 'user': 'barney', 'age': 36 },
{ 'user': 'fred', 'age': 40 },
{ 'user': 'pebbles','age': 1 }
];
const result = _.map(users, 'user');
console.log(result); // ['barney', 'fred', 'pebbles']
_.reduce(collection, [iteratee=_.identity], [accumulator]): Reduces a collection to a value, iterating through each element and applying an iteratee function.
const numbers = [1, 2, 3, 4];
const sum = _.reduce(numbers, (accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // 10
_.groupBy(collection, [iteratee=_.identity]): Creates an object composed of keys generated from the results of running each element of the collection through an iteratee function.
const pets = [
{ 'type': 'dog', 'name': 'Fido' },
{ 'type': 'cat', 'name': 'Whiskers' },
{ 'type': 'dog', 'name': 'Buddy' }
];
const groupedPets = _.groupBy(pets, 'type');
console.log(groupedPets);
// {
// 'dog': [{ 'type': 'dog', 'name': 'Fido' }, { 'type': 'dog', 'name': 'Buddy' }],
// 'cat': [{ 'type': 'cat', 'name': 'Whiskers' }]
// }
_.sortBy(collection, [iteratees=[_.identity]]): Creates an array of elements, sorted in ascending order by the results of running each element in the collection through each iteratee.
const users = [
{ 'user': 'fred', 'age': 40 },
{ 'user': 'barney', 'age': 36 },
{ 'user': 'pebbles','age': 1 }
];
const result = _.sortBy(users, 'age');
console.log(result);
// [
// { 'user': 'pebbles', 'age': 1 },
// { 'user': 'barney', 'age': 36 },
// { 'user': 'fred', 'age': 40 }
// ]
_.countBy(collection, [iteratee=_.identity]): Creates an object composed of keys generated from the results of running each element of the collection through an iteratee function.
const numbers = [1.2, 2.1, 2.3, 3.1, 3.5];
const result = _.countBy(numbers, Math.floor);
console.log(result); // { '1': 1, '2': 2, '3': 2 }
_.filter(collection, [predicate=_.identity]): Iterates over elements of the collection, returning an array of all elements that the predicate returns truthy for.
const users = [
{ 'user': 'barney', 'age': 36, 'active': true },
{ 'user': 'fred', 'age': 40, 'active': false },
{ 'user': 'pebbles','age': 1, 'active': true }
];
const result = _.filter(users, (o) => !o.active);
console.log(result); // [{ 'user': 'fred', 'age': 40, 'active': false }]
_.partition(collection, [predicate=_.identity]): Creates an array of elements split into two groups: those for which the predicate returns a truthy value, and those for which it returns a falsy value.
const users = [
{ 'user': 'barney', 'age': 36, 'active': true },
{ 'user': 'fred', 'age': 40, 'active': false },
{ 'user': 'pebbles','age': 1, 'active': true }
];
const result = _.partition(users, (o) => o.active);
console.log(result);
// [
// [{ 'user': 'barney', 'age': 36, 'active': true }, { 'user': 'pebbles', 'age': 1, 'active': true }],
// [{ 'user': 'fred', 'age': 40, 'active': false }]
// ]
4: Object Functions
Lodash provides various functions to deal with objects, such as assign, merge, and keys. Here are some examples:
_.assign(object, [sources]): Assigns the own enumerable string keyed properties of source objects to the destination object.
const obj1 = { 'a': 1, 'b': 2 };
const obj2 = { 'b': 3, 'c': 4 };
const result = _.assign(obj1, obj2);
console.log(result); // { 'a': 1, 'b': 3, 'c': 4 }
_.merge(object, [sources]): Merges the own and inherited enumerable string keyed properties of source objects into the destination object.
const obj1 = { 'a': { 'b': { 'c': 1 } } };
const obj2 = { 'a': { 'b': { 'd': 2 } }, 'e': { 'f': 3 } };
const result = _.merge(obj1, obj2);
console.log(result); // { 'a': { 'b': { 'c': 1, 'd': 2 } }, 'e': { 'f': 3 } }
_.keys(object): Retrieves an array of the own enumerable string keyed property names of an object.
const obj = { 'a': 1, 'b': 2, 'c': 3 };
const result = _.keys(obj);
console.log(result); // ['a', 'b', 'c']
_.values(object): Retrieves an array of the own enumerable string keyed property values of an object.
const obj = { 'a': 1, 'b': 2, 'c': 3 };
const result = _.values(obj);
console.log(result); // [1, 2, 3]
_.omit(object, [paths]): Creates an object composed of the own and inherited enumerable string keyed properties of the input object that are not included in the provided array.
const obj = { 'a': 1, 'b': 2, 'c': 3, 'd': 4 };
const result = _.omit(obj, ['a', 'c']);
console.log(result); // { 'b': 2, 'd': 4 }
_.pick(object, [paths]): Creates an object composed of the picked object properties.
const obj = { 'a': 1, 'b': 2, 'c': 3, 'd': 4 };
const result = _.pick(obj, ['a', 'c']);
console.log(result); // { 'a': 1, 'c': 3 }
_.invert(object): Creates an object composed of the inverted keys and values of the input object.
const object = { 'a': 1, 'b': 2, 'c': 1 };
const result = _.invert(object);
console.log(result); // { '1': 'c', '2': 'b' }
5: String Functions
Lodash has numerous functions to manipulate strings, such as camelCase, kebabCase, and trim. Here are some examples:
_.camelCase(string): Converts a string to camel case.
const string = 'foo_bar-baz';
const result = _.camelCase(string);
console.log(result); // 'fooBarBaz'
_.kebabCase(string): Converts a string to kebab case.
const string = 'Foo Bar_baz';
const result = _.kebabCase(string);
console.log(result); // 'foo-bar-baz'
_.trim(string, [chars]): Removes leading and trailing whitespace or specified characters from a string.
const string = ' lodash is great ';
const result = _.trim(string);
console.log(result); // 'lodash is great'
`_.replace(string, pattern, replacement): Replaces matches of patternwithreplacementinstring`.
const string = 'Hello, world!';
const result = _.replace(string, 'world', 'there');
console.log(result); // 'Hello, there!'
_.truncate(string, [options={}]): Truncates a string if it is longer than the given maximum string length. The last characters of the truncated string are replaced with an omission string.
const longString = 'The quick brown fox jumps over the lazy dog';
const result = _.truncate(longString, { 'length': 24, 'omission': '...' });
console.log(result); // 'The quick brown fox...'
_.pad(string, [length=0], [chars=' ']): Pads a string on both sides with the specified characters if the string’s length is less than the given padding length.
const string = 'abc';
const result = _.pad(string,8, '0');
console.log(result); // '00abc000'
_.startCase(string): Converts a string to start case, capitalizing the first letter of each word and converting the rest of the word to lower case.
const string = '--foo-bar--baz';
const result = _.startCase(string);
console.log(result); // 'Foo Bar Baz'
_.words(string, [pattern]): Splits a string into an array of its words based on a specified pattern or the default pattern of matching words composed of alphanumeric characters.
const string = 'lodash is great';
const result = _.words(string);
console.log(result); // ['lodash', 'is', 'great']
_.snakeCase(string): Converts a string to snake case, making all letters lowercase and replacing spaces and special characters with underscores.
const string = 'Foo Bar-Baz!';
const result = _.snakeCase(string);
console.log(result); // 'foo_bar_baz'
6: Function Functions
Lodash offers functions to work with other functions, such as debounce, throttle, and memoize. Here are some examples:
_.debounce(func, [wait=0], [options={}]): Creates a debounced function that delays invoking the provided function until after wait milliseconds have passed since the last time the debounced function was invoked.
const saveData = () => console.log('Data saved');
const debouncedSaveData = _.debounce(saveData, 1000);
// Calling debouncedSaveData multiple times in quick succession
debouncedSaveData();
debouncedSaveData();
debouncedSaveData();
// 'Data saved' will be logged only once, 1000ms after the last debouncedSaveData call
_.throttle(func, [wait=0], [options={}]): Creates a throttled function that only invokes the provided function at most once every wait milliseconds.
const getData = () => console.log('Data fetched');
const throttledGetData = _.throttle(getData, 1000);
// Calling throttledGetData multiple times in quick succession
throttledGetData();
throttledGetData();
throttledGetData();
// 'Data fetched' will be logged only once, as subsequent calls were made within 1000ms
_.memoize(func, [resolver]): Creates a memoized version of the provided function, caching the results of function calls and returning the cached results when the same inputs occur again.
const expensiveOperation = (x) => {
console.log(`Performing expensive operation for ${x}`);
return x * x;
};
const memoizedExpensiveOperation = _.memoize(expensiveOperation);
console.log(memoizedExpensiveOperation(5)); // Performing expensive operation for 5, 25
console.log(memoizedExpensiveOperation(5)); // 25 (no log, uses cached result)
_.once(func): Creates a function that is restricted to invoking the provided function only once. Repeated calls to the modified function will have no effect, returning the value from the original call.
let count = 0;
const increment = () => ++count;
const incrementOnce = _.once(increment);
console.log(incrementOnce()); // 1
console.log(incrementOnce()); // 1 (no change, since the function can only be called once)
_.after(n, func): Creates a function that invokes the provided function after it is called n or more times.
const loadData = () => console.log('Data loaded');
const loadDataAfterThreeCalls = _.after(3, loadData);
loadDataAfterThreeCalls(); // No output
loadDataAfterThreeCalls(); // No output
loadDataAfterThreeCalls(); // 'Data loaded'
_.before(n, func): Creates a function that invokes the provided function before it is called n times. Subsequent calls to the created function return the result of the last function invocation.
const sendData = () => console.log('Data sent');
const sendDataBeforeThreeCalls = _.before(3, sendData);
sendDataBeforeThreeCalls(); // 'Data sent'
sendDataBeforeThreeCalls(); // 'Data sent'
sendDataBeforeThreeCalls(); // No output
In this comprehensive guide, we have delved deeply into the Lodash JavaScript utility library, exploring its wide array of array, collection, object, string, and function functions. We’ve covered numerous examples to showcase the usage and versatility of these functions. By understanding and utilizing Lodash’s features, you can improve your coding efficiency and write cleaner, more modular code. The Lodash library is a powerful tool for any JavaScript developer’s arsenal, helping simplify complex operations and streamline your workflow.