Learn Lodash library in javascript with examples
- Admin
- Dec 31, 2023
- Lodash Javascript
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
- Arrays/collection/object manipulation
- 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
- Using Lodash in Angular/typescript projects :- This post is about how to integrate Lodash with Angular 12 using typescript language.
- NodeJS example. This covers some examples - using require function, clone, and cloneDeep methods
Conclusion
Learn about lodash library for common reusable functionalities in legacy and npm javascript frameworks.