Tuesday, July 31, 2018

Learn Lodash library in javascript with examples

In this post, I am going to discuss the popular javascript library Lodash with examples.

understanding Lodash framework

Lodash library usage examples
As you know javascript is popular nowadays. which is used to write a code for front end an back-end layers. During development, if any reusable functionalities are there, I will write a utility module for object null check and common utilities etc.. which can be reused in all your application modules.
This is a time consuming for various reasons - have to write a code for each utility and have to take all edge cases for handling this and 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 does 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 underscore library in terms of functionality and performance. It is a utility library for manipulating strings, arrays, and collection of objects. It is very easy to learn and understand functions very easily.

Lodash Core features

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

Advantages 

  • Handy Utilities made developer 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 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/lodash@4.17.10/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 installation of this dependency
npm i --save lodash 
or yarn add lodash 
In your code, you need to load module using require to function as below
var _ = require('lodash'); 

Javascript Lodash Examples

This library can be used either in the front-end layer (using )or backend layer with node.js.We will see various common examples of using this 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 element/object from an array?

using uniqWith() method which accepts array and comparator.
Here isEqual comparator is used to check array objects value.

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' }]

Sort Array in javascript 

It provides sortBy() function to sort numbers/objects/strings. This iterates and 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 5/6 using typescript language.
NodeJS example. This covers some examples - using require function, clone, and cloneDeep methods

Related article


EmoticonEmoticon