Learn Lodash library in javascript with examples

Learn Lodash library in javascript with examples

Discuss the popular javascript library Lodash with examples.

understanding Lodash framework

As you know javascript is popular nowadays. which is used to write code for front-end and back-end layers.

During development, if any reusable functionalities like object null check and common utilities etc are there, I will write a utility module, which can be reused in all your application modules.

It is time-consuming for various reasons

  • have to write a code for each utility and have to take all edge cases for handling this
  • maintenance of this module if any changes from browsers as well as from other frameworks.

To avoid all these things, We have to use the existing framework like Lodash and Underscore libraries to do the same thing.

Lodash is a javascript library for common utility functions.

This library can be used in javascript/jquery applications and npm-based applications like angular, react, and vueJs frameworks. Lodash is greater than the underscore library in terms of functionality and performance.

It is a utility library for manipulating strings, arrays, and collections of objects. It is easy to learn and understand functions very easily.

Lodash Core features

  1. Arrays/collection/object manipulation
  2. Function testing

Advantages

  • Handy Utilities made the developer’s job easy for reusable functionalities.
  • Easy to learn and understand functions.
  • Plain library,
  • No dependencies just adding a javascript file
  • Performing well than underscore library
  • Quick usage
  • Community support

Installation and setup

This library provides plain javascript and npm/yarn packages.

Javascript/Jquery applications In the HTML script tag, You can use either script file or lodash CDN library as described below.

<script src="lodash.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

Then using underscore _, we can access methods. Any method is accessed with _ symbol like _.isEmpty().
NodeJS setup It has npm and yarn packages for the installation of this dependency.

npm i --save lodash
or yarn add lodash

In your code, you need to load the module using the required function as below.

`var _ = require('lodash');`;

Javascript Lodash Examples

This library uses either in the front-end layer (using )or backend layer with node.js.

We will see various common examples of using these utility functions in javascript. I am using a version of 4.17.10 for the below examples.

Check for an empty String object in javascript

The basic common function needs to know for every developer. isEmpty() method - returns true, if it is empty strings. else returns false

console.log(_.isEmpty({})); // returns true
console.log(_.isEmpty("test")); // returns false
console.log(_.isEmpty(null)); // returns true
console.log(_.isEmpty("")); // returns true
console.log(_.isEmpty(undefined)); // returns true

How to delete duplicate elements/objects from an array?

using the uniqWith() method which accepts array and comparator.

Here isEqual comparator is used to check array objects’ values.

var arrayOfObjects = [
  { id: 1, name: "kiran" },
  { id: 2, name: "Franc" },
  { id: 1, name: "kiran" },
];
let uniqObjects = _.uniqWith(arrayOfObjects, _.isEqual);
console.log(uniqObjects); // returns [{ 'id': 1, 'name': 'kiran' }, { 'id': 2, 'name': 'Franc' }]

How to Sort Array in javascript lodash

It provides sortBy() function to sort numbers/objects/strings.

It iterates each element and compares elements using stable sort and returns a new array in ascending order. The following example is for sorting numbers, strings, and objects.

var numberArray = [12, 5, 1, 91, 46, 23];
var stringArray = ["kiran", "ebc", "zen", "abc"];
let newNumberArray = _.sortBy(numberArray);
let newstringArray = _.sortBy(stringArray);

console.log(newNumberArray); // returns [1, 5, 12, 23, 46, 91]
console.log(newstringArray); //["abc", "ebc", "kiran", "zen"]

var emps = [
  { name: "kiran", id: 32 },
  { name: "franck", id: 76 },
  { name: "Ram", id: 51 },
  { name: "Antony", id: 18 },
];

console.log(
  _.sortBy(emps, function (e) {
    return e.name;
  }),
);
// returns {name: "Antony", id: 18},{name: "Ram", id: 51},{name: "franck", id: 76},{name: "kiran", id: 32}

Integration with Frameworks

Conclusion

Learn about lodash library for common reusable functionalities in legacy and npm javascript frameworks.