Lodash - Basics

Author: MiloŇ° Medan
Posted on 16 March, 2018
Lodash is probably one of the most popular javascript libraries. The main reason is that it's pretty useful in almost every project. If you're not using it, you probably should!

Most of experience developers, I believe already have knowledge how to reduce number of lines, through using various libraries and techniques of coding. But, when we speak about beginners, situation is quite different. In majority of cases they rely of standard loops and basic coding skills. That approach can often increase complexity, especially in the case when we want to find some specific value inside multidimensional object or array.

Through this post I will explain some of the most useful functions, which have ability to save you quite lines of code, and make it much more readable at the end.

For all examples below, we will use people object array:

var people = [
    {name: "Brad", age: 31, married: false, city: "Madrid"},
    {name: "John", age: 34, married: true, city: "London"},
    {name: "Sally", age: 26, married: false, city: "Oslo" },
    {name: "Marry", age: 15, married: false, city: "Madrid"}
];

1) Find Index

_.findIndex();

This function can find index of element inside array. That element can be object, string, number, another array, etc. Take a look at basic example of _.findIndex() method:

_.findIndex(people, {name: "Bread", age: 31, married: false, city: "Madrid"});

It is very thankful function, because we don't have to pass whole object content as a second parameter, instead we can use just a part of it.

_.findIndex(people, {married: true, city: "London"});

Second parameter can also be a closure function, take a look at the example below:

_.findIndex(people, function(person){
    return person.name === "John";
});

In addition, there is possibility to search only by object property name, in case it is of boolean type.

_.findIndex(people, "married");

If you want it iterate though simple array, you should consider to use _.indexOf.

There are several other functions which are very similar to _.findIndex, such as _.indexOf, _.find, _.findKey.

Pay attention, find index function will always find just the first value we are searching for. Even if there is another elements which correspond to our search logic, their indices will be ignored.

2) Sort By

_.sortBy();

This function is pretty simple and at same time very powerful. It can sort array in only one line of code.

var numbers = [10, 118, 2, -50, -2, 22];
_.sortBy(numbers, function(element){ return element});

For more specific sorting techniques, we should use functions such as _.sortedIndex, _.sortedIndexBy, _.sortedIndexOf, _.sortedLastIndex, _.sortedLastIndexBy, _.sortedLastIndexOf, and all of them have very similar syntax and purpose.

Main drawback is that we can only sort values by ascending order.

3) Concat

_.concat()

This one is very interesting and can be very useful in some uncommon situations, where we need to make single array, which elements are other arrays or objects.

But, I have to emphasize, if we want concat several object, into array, they will become indexed elements of that array, as a separate elements.

If we want concat several object, into array, they will become indexed elements of that array, as a separate elements.
var arrayOne = [1, 2, 3];
var arrayTwo = [4, 5];
_.concat(arrayOne, arrayTwo);

The result of two concatenated arrays will be single array with elements, from both merged into one.

var objectOne = {name: "John", age: 34};
var objectTwo =  {city: "London", married: true}
_.concat(objectOne, objectTwo);
The result of two concatenated objects will be single array with elements which corresponds to each of the objects.

4) Size

_.size()

This very simple and above all more than intuitive function can be used as a replacement for well known length method.

Take a look at examples below:

var name = "John";
_.size(name);
var numbers = [1, 4, 6, 32, 45];
_.size(numbers); 

var people = [{name: "John", age: 34}];
_.size(people);

var countries = [{county: "England", city: "London"}, {country: "Spain", city: "Madrid"}];
_.size(country);

We can also count number of attributes in object:

var person = {name: "Sally", age: 26, married: false, city: "Oslo" };
_.size(person);

5) Is Empty

_.isEmpty()

How many times you have to check whether or not some array is empty or not. Because of that it is unavoidable to use if statement, and call length method. And if it's true do this, else do that. That kind of tasks are perfect for _.isEmpty method. As a result of this function we will get boolean values (true/false).

var numbers = [1, 2];
_.isEmpty(number);
var people = [{name: "Marry", age: 15, married: false, city: "Madrid"}];
_.isEmpty(people);
var arrayA = [{}];
_.isEmpty(arrayA);
var arrayB = [];
_.isEmpty(arrayB);

As we can see if our array is empty, we got true. By opposite, if array isn't empty our result will be false.

In case we execute this function on primitive value, the result will always be true in other words, primitive values will always be considered empty.

var someValue = 1;
_.isEmpty(someValue);

There are also several very similar functions, which works on almost the same principle. Those functions are _.isArray, _.isBoolean, _.isDate, _.isElement, _.isFunction, _.Nan etc.


At the official Lodash documentation you can find numerous functions, which operate with different data types (arrays, objects, strings) or perform different math operations, functions etc.