Share This Article
Lodash is one of the popular JavaScript libraries that offers more than 200 functions for web development. These functions can help you build innovative yet highly interactive web applications. We can use lodash inside a web browser or in NodeJS. In this article, We are going to discuss Lodash and its top 13 features that you should use.
What is Lodash
Lodash makes JavaScript development more peaceful by taking out the trouble of working with arrays, numbers, objects, strings, etc. It’s an open-source JavaScript library with a wide variety of functions that make JavaScript development effortless and quicker. It has functions like map, filter, invokes function binding, JavaScript templating, deep equality checks, creating indexes, and many others that we will discuss here. Lodash can be used directly via the browser or from NodeJS. Development with JavaScript is pretty challenging, but with Lodash, any scale of development can be easier and quicker.
Top 10 Lodash Functions that Everyone Should Know About
- _.assign
_.assign is a similar function to the spread operator of ES 6. Easily understandable and can assign properties of one or many objects to a source object.
var first= { a: "value a" };
var second= { b: 4, c: "value c" }
var result = _.assign({ a: "old property" },first,second);
// result => { a: 'a property', b: 4, c: 'an other property' }
- _.times
_.times can be very helpful when creating dynamic data. It receives as rows of numbers of iterations and a function to perform n times and reflects with an array of the results.
function getRandomInteger() {
return Math.round(Math.random() * 100);
}
var result = _.times(5, getRandomNumber);
// result => [64, 70, 29, 10, 23]
- _.get and _.set
We are counting these two as one because these works are about the same. _.get will return a property state from an object, and _.set will set a property with a value—Same except you can get to a property with the address.
var bar = { foo: { key: "foo" } };
_.set(bar, "foo.items[0]", "An item");
// bar => { foo: { key: "foo", items: ["An item"] } }
var name = _.get(bar, "name", "John Doe");
// name => John Doe
- _.deburr
_.deburr is the easiest one; It excludes all “combining diacritical marks,” so “é” converts “e.” It’s an immeasurable habit to deburr text for a search function when there is internationalization and localization.
_.deburr("déjà vu");
// -> deja vu
_.deburr("Juan José");
// -> Juan Jose
- _.keyBy
_.keyBy helps to find and call an object with a specific property. See the example below
var posts = [
{ id: "1abc", title: "First blog post", content: "..." },
{ id: "2abc", title: "Second blog post", content: "..." },
// more blog posts
{ id: "34abc", title: "The blog post we want", content: "..." }
// even more blog posts
];
posts = _.keyBy(posts, "id");
var post = posts["34abc"]
// post -> { id: "34abc", title: "The blog post we want", content: "..." }
- _.reduce
_.reduce is like a filter function, but it allows you to choose the form of the returned object, which makes it different. You can add objects or remove them via the filter method.
var users = [
{ name: "John", age: 30 },
{ name: "Jane", age: 28 },
{ name: "Bill", age: 65 },
{ name: "Emily", age: 17 },
{ name: "Jack", age: 30 }
]
var reducedUsers = _.reduce(users, function (result, user) {
if(user.age >= 18 && user.age <= 59) {
(result[user.age] || (result[user.age] = [])).push(user);
}
return result;
}, {});
// reducedUsers -> {
// 28: [{ name: "Jane", age: 28 }],
// 30: [{ name: "John", age: 30 }, { name: "Jack", age: 30 }]
// }
- _.debounce
_.debounce will invoke a function in a time cap of a specified amount of time since the last time it was called.
- _.find
You can use _ .find instead of interacting within an array with a loop to locate a particular object. It can also help you find any object with more than one property with a single line of code.
- _.cloneDeep
_ .cloneDeep is the easiest one and can clone an object. The cloned object will also have the same properties and new address in memory so that you won’t crush others.
var original = { foo: "bar" };
var copy = original;
copy.foo = "new value";
// copy -> { foo: "new value" } Yeah!
// original -> { foo: "new value" } Oops!
var original = { foo: "bar" };
var copy = _.cloneDeep(original);
copy.foo = "new value";
// copy -> { foo: "new value" } Yeah!
// original -> { foo: "bar" } Yeah!
- _. sortedUniq
_. sortedUniq stops duplicate values to repeat. Its mainly used for performance issues because it is built to specify the sorted arrays. _. sortedUniq is valid only if you work with an extensive array. If you want better performance, you should sort your array and use functions that work better with sorted arrays.
var sortedArray = [1, 1, 2, 3, 3, 3, 5, 8, 8];
var result = _.sortedUniq(sortedArray);
// -> [1, 2, 3, 5, 8]
Features of Lodash
Lodash has many integrations and features that help in the development process and makes it easier for developers. Lodash offers 13 types of features in its latest build –
- Array
- Collection
- Date
- Function
- Lang
- Math
- Number
- Object
- Saq
- Util
- Properties
- Methods
Lodash is one of the top libraries for web development that is sufficient to build innovative applications in very little time. It has 13 types of functions mentioned below; In addition, we have mentioned some of the most useful functions that everyone should know.