Lodash Library Usage Examples

Using Lodash library will make writing JS code so much easier. The good definition is: "Applicative programming is the pattern of defining a function that takes a function and then invokes that function for each element in a collection/list".

It has a very nice documentation.

Now, let's get to the actual work. Here is a list of the most commonly used functions for different data structures.

Common functions for collection

_.forEach - iterates over elements of the collection and invokes iteratee for each element.

_.forEach([1, 2], function(value) {
  console.log(value);
});
// => Logs `1` then `2`.

_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key);
});
// => Logs 'a' then 'b' (iteration order is not guaranteed)

_.map - creates an array of values by running each element in the collection throught iteratee.

var users = [
  { 'user': 'barney' },
  { 'user': 'fred' }
];

_.map(users, 'user');
// => ['barney', 'fred']

function square(n) {
  return n * n;
}

_.map([4, 8], square);
// => [16, 64]

_.find - iterates over elements of the collection, returning the first element predicate returns truthy for.

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; });
// => object for 'barney'

_.filter - returning new array of items based on a logical criteria.

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

_.filter(users, { 'age': 36, 'active': true });
// => objects for ['barney']

_.some - checks if the predicate returns truthy for any element of the collection. Iteration is stopped once the predicate returns truthy.

var users = [
  { 'user': 'barney', 'active': true },
  { 'user': 'fred',   'active': false }
];

_.some(users, { 'user': 'barney', 'active': false });
// => false

_.some(users, ['active', false]);
// => true

_.sortBy - allows sorting arrays by the specified value.

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
];

_.sortBy(users, ['user', 'age']);
// => [['barney', 36], ['fred', 40], ['fred', 48]]

Common functions for array

_.difference - creates an array of array values that are not included in the other given arrays. The order and references of result values are determined by the first array.

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

_.indexOf - gets the index at which the first occurrence of the value is found in array.

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

_.uniq - creates a duplicate-free version of an array in which only the first occurrence of each element is kept.

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

Check _.uniq_by too.

_.findIndex - similar to _.find except it returns the index of the first element.

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
 
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0

_.reverse - reverses array.

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

_.remove - removes all elements from array that predicate returns truthy for and returns an array of the removed elements.

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});
 
console.log(array);
// => [1, 3]
 
console.log(evens);
// => [2, 4]

_.slice - creates a slice of array from start up to, but not including, end.

var array = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];

_.slice(array, 1, 3)
// => ['Orange','Lemon']

Common functions for object

_.keys - creates an array of the own enumerable property names of the object.

function Foo() {
  this.a = 1;
  this.b = 2;
}

_.keys(new Foo);
// => ['a', 'b'] (iteration order is not guaranteed)

_.values - creates an array of the own enumerable string keyed property values of the object.

function Foo() {
  this.a = 1;
  this.b = 2;
}
 
_.values(new Foo);
// => [1, 2] (iteration order is not guaranteed)

_.pick - creates an object composed of the picked object properties.

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }

_.omit - creates an object composed of own and inherited enumerable property paths of objects that are not committed.

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.omit(object, ['a', 'c']);
// => { 'b': '2' }

Common functions for string

_.capitalize - converts the first character of the string to upper case and the remaining to lower case.

_.capitalize('FRED');
// => 'Fred'

_.lowerCase - converts the string, as space separated words, to lower case.

_.lowerCase('fooBar');
// => 'foo bar'

_.includes - checks if the string contains substring.

_.includes('foobar', 'ob');
// → true

_.split - splits the string by a separator.

_.split('a-b-c', '-', 2);
// => ['a', 'b']

_.trim - removes leading and trailing whitespace or specified characters from the string.

_.trim('  abc  ');
// => 'abc'

Common math functions

_.sum - computes the sum of the values in array.

_.sum([4, 2, 8, 6]);
// => 20

Check _.sumBy too.

_.round - computes a number rounded to precision.

_.round(4.006);
// => 4
 
_.round(4.006, 2);
// => 4.01

_.random - produces a random number between the inclusive lower and upper bounds.

_.random(0, 5);
// => an integer between 0 and 5

_.max(array) - computes the maximum value of array. If the array is empty or falsey, undefined is returned.

_.max([4, 2, 8, 6]);
// => 8

Check _.min too.

_.mean(array) - computes the mean of the values in the array.

_.mean([4, 2, 8, 6]);
// => 5

You should also check out _.debounce, _.throttle and _.cloneDeep.

That's it! Thanks for reading!

If you want to know more how we can help you deal with writing JS code, subscribe to our newsletter!

References:
https://codehangar.io/common-lodash-functions/
https://vooban.com/en/send-english-newsletter-tips-articles-geek-stuff/10-lodash-functions-everyone-should-know/
http://ngninja.com/posts/powerful-lodash-functions-javascript
https://lodash.com/docs/