Introduction to Lodash
By – Rohit Malhotra (Engineer, Marketplace)
Lodash is a JavaScript library which provides utility functions for dealing with javascript objects and arrays, enhancing productivity and code readability.
Lodash provides a plethora of functions, following are some of them that will help in solving the most common challenges when dealing with javascript objects.
_.map
Iterates over an array or properties of an object and returns a new array with values as the result of the callback function.
const numbers = [2, 5, 9];_.map(numbers, num => num * 2);
// [ 4, 10, 18 ]
The above can be achieved through es5 map as well but _.map can be used in other ways. Like getting a specific property from an array of objects.
const data = [
{
name: 'Patrick',
age: '25',
},
{
name: 'John',
age: '24',
},
{
name: 'Teresa',
age: '26',
}
];_.map(data, 'name');
// [ 'Patrick', 'John', 'Teresa' ]
Works with nested properties as well
const data = [
{
name: 'Patrick',
age: '25',
profile: {
experience: 2
}
},
{
name: 'John',
age: '24',
profile: {
experience: 2
}
},
{
name: 'Teresa',
age: '26',
profile: {
experience: 4
}
}
];_.map(data, 'profile.experience');
// [ 2, 2, 4 ]
Similar useful functions: _.mapValues, _.mapKeys, _.flatMap
_.find
Iterates over elements of collection
, returning the first element predicate
returns truthy for.
const users = [
{
name: 'Patrick', age: '25', profile: { experience: 2 }
},
{
name: 'John', age: '24', profile: { experience: 2 }
},
{
name: 'Teresa', age: '26', profile: { experience: 4 }
}
];_.find(users, user => user.name === 'John');
// { name: 'John', age: '24', profile: { experience: 2 } }
Similar useful functions: _.findIndex, _.some
_.filter
Iterates over elements of collection
, returning an array of all elements predicate
returns truthy for.
For example, we want to filter the array of objects based on the profile.experience
property.
const users = [
{
name: 'Patrick', age: '25', profile: { experience: 3 }
},
{
name: 'John', age: '24', profile: { experience: 2 }
},
{
name: 'Teresa', age: '26', profile: { experience: 4 }
}
];_.filter(users, user => user.profile.experience > 2);
// [ { name: 'Patrick', age: '25', profile: { experience: 3 } },
// { name: 'Teresa', age: '26', profile: { experience: 4 } } ]
Similar useful functions: _.every
_.keyBy
Creates an object composed of keys generated from the results of running each element of collection
through the callback function.
We can convert an array of objects into a single object having properties as the unique identifier of each object. This way we can easily access the object based on that unique identifier.
const users = [
{
name: 'Patrick', age: '25', profile: { experience: 2 }
},
{
name: 'John', age: '24', profile: { experience: 2 }
},
{
name: 'Teresa', age: '26', profile: { experience: 4 }
}
];const usersByName = _.keyBy(users, 'name');usersByName['Teresa'];
// { name: 'Teresa', age: '26', profile: { experience: 4 } }
Similar useful functions: _.groupBy
_.get
Gets the value at path
of object
. If the resolved value is undefined
, the defaultValue
is returned in its place.
Normally in javascript, to get a nested property of an object, we have to write something like the following:
const experience = user && user.profile && user.profile.experience ? user.profile.experience : 0;
Very common use case, using _.get not only makes the code more readable but also avoids annoying errors like cannot read property 'experience' of undefined
.
const experience = _.get(user, 'profile.experience', 0);
Similar useful functions: _.set
_.cloneDeep
This method recursively clones the whole object, so if any property of the resultant object changes, it will not change the original object as the references will also be new.
const users = [
{
name: 'Patrick', age: '25', profile: { experience: 3 }
},
{
name: 'John', age: '24', profile: { experience: 2 }
},
{
name: 'Teresa', age: '26', profile: { experience: 4 }
}
];const usersClone = _.cloneDeep(users);
usersClone[0].age = '27';usersClone[0].age;
// 27
users[0].age;
// 25
Goodbye to code likeJSON.parse(JSON.stringify(obj))
.
Note: _.forEach, _.reduce, _.assign are some of the functions I skipped since they pretty much work the same as their ES5/6 counterparts. If these don’t sound familiar, you should definitely check them out.
Function Chaining
_.chain can be used to chain functions together as follows:
const users = [
{
name: 'Patrick', age: 25, profile: { experience: 3 }
},
{
name: 'John', age: 24, profile: { experience: 2 }
},
{
name: 'Teresa', age: 26, profile: { experience: 4 }
}
];_.chain(users)
.map('age')
.mean()
.value();
// 25
This way code becomes much more readable.
One downfall with _.chain is that we cannot use user-defined functions on the object returned by it. But lodash does give a way to do it by using _.mixin as shown in the following:
const users = [
{
name: 'Patrick', age: 25, profile: { experience: 3 }
},
{
name: 'John', age: 24, profile: { experience: 2 }
},
{
name: 'Teresa', age: 26, profile: { experience: 4 }
}
];const multiplyByTwo = numbers => _.map(numbers, num => num * 2);_.mixin({ multiplyByTwo });_.chain(users)
.map('age')
.multiplyByTwo()
.mean()
.value();
// 50
Conclusion
Lodash as a javascript utility library provides many useful functions that one needs to deal with arrays, numbers, objects, strings, etc.
At the time of writing, it is the most depended upon package on npm. So rest assured while using it as it is one of the most well-maintained libraries.
References: https://lodash.com/docs