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 that we will discuss here. Lodash can be used directly via 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.

Hire Web Developer
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 via 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 to other.

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 the extensive array. If you want better performance, you should sort your array and use functions that work better with sorted arrays. 

Hire Web Developer
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.

0 Shares:
Leave a Reply

Your email address will not be published.

You May Also Like