This Lodash tutorial covers the Lodash JavaScript library. In this tutorial, we will learn important Lodash functions with examples.

Lodash

Lodash is a JavaScript library which provides utility functions for common programming tasks. It uses a functional programming paradigm. Lodash was inspired by Underscore.js.

Why Lodash?

Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc. Lodash’s modular methods are great for:

Iterating arrays, objects, & strings
Manipulating & testing values
Creating composite functions

Read more at official documentation at https://lodash.com.

Lodash Installation

You can install Lodash using npm. Refer to the official documentation at https://lodash.com.

In this tutorial, I am using cnd link as like:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

Lodash JS Examples

Lodash _.assign Method

The _.assign method is the equivalent of the spread operator from ES6. It’s pretty easy to understand, it assigns properties of one or many objects to a source object.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
    <script type="text/javascript">
        var foo = {
            a: "a property"
        };
        var bar = {
            b: 4,
            c: "an other property"
        }

        var result = _.assign({
            a: "an old property"
        }, foo, bar);

        console.log(JSON.stringify(result));
    </script>
</head>
<body></body>
</html>

Output:

{"a":"a property","b":4,"c":"an other property"}

Lodash _.first() and _.last() Methods

The .first()/.head() functions return the first array element; the _.last() function returns the last array element.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
    <script type="text/javascript">
  // Lodash first and last array elements
        words = ['sky', 'wood', 'forest', 'falcon',
            'pear', 'ocean', 'universe'
        ];

        let fel = _.first(words);
        let lel = _.last(words);

        console.log(`First element: ${fel}`);
        console.log(`Last element: ${lel}`);
    </script>
</head>
<body></body>
</html>

The above HTML prints below output on the console:

First element: sky
Last element: universe

Lodash _.find Method

Instead of iterating through an array with a loop to find a specific object, we can simply use a _.find method.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
    <script type="text/javascript">
  // Lodash first and last array elements
  var users = [
    { firstName: "John", lastName: "Doe", age: 28, gender: "male" },
    { firstName: "Jane", lastName: "Doe", age: 5, gender: "female" },
    { firstName: "Jim", lastName: "Carrey", age: 54, gender: "male" },
    { firstName: "Kate", lastName: "Winslet", age: 40, gender: "female" }
  ];

  var user = _.find(users, { lastName: "Doe", gender: "male" });
  console.log(user);
  // user -> { firstName: "John", lastName: "Doe", age: 28, gender: "male" }

  var underAgeUser = _.find(users, function(user) {
   return user.age < 18;
  });
  
  console.log(underAgeUser);
    </script>
</head>
<body></body>
</html>

The above HTML prints below output on the console:

{firstName: "John", lastName: "Doe", age: 28, gender: "male"}
{firstName: "Jane", lastName: "Doe", age: 5, gender: "female"}

Lodash _.chunk() Method

The _.chunk() function creates an array of elements split into groups the length of the specified size.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
    <script type="text/javascript">
  // Lodash chunking array
        nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

        let c1 = _.chunk(nums, 2);
        console.log(c1);

        let c2 = _.chunk(nums, 3);
        console.log(c2);
    </script>
</head>
<body></body>
</html>

The above HTML prints below output on the console:

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9 ] ]
[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]

Lodash _.slice() Method

The _.slice() method gets a slice from an array. It takes two indexes: the starting and ending index, where the starting index is inclusive and the ending is exclusive.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
    <script type="text/javascript">
  // Getting array slice
        nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

        let c2 = _.slice(nums, 2, 6);
        console.log(c2);

        let c3 = _.slice(nums, 0, 8);
        console.log(c3);
    </script>
</head>
<body></body>
</html>

The above HTML prints below output on the console:

[3, 4, 5, 6]
[1, 2, 3, 4, 5, 6, 7, 8]

Lodash _.random() Method

The _.random() function produces random values between the inclusive lower and upper bounds.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
    <script type="text/javascript">
  // Getting array slice
  var r = _.random(15);
  console.log(r);

  r = _.random(5, 15);
  console.log(r);
    </script>
</head>
<body></body>
</html>

The above HTML prints below output on the console:

8
7

Lodash _.keyBy Method

_.keyBy is a very useful method. It helps a lot when trying to get an object with a specific property. Let’s say we have 100 users and we want to get the user with Id 1.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

    <script type="text/javascript">
        var users = [
    { id: 1, firstName: "John", lastName: "Doe", age: 28, gender: "male" },
    { id : 2, firstName: "Jane", lastName: "Doe", age: 5, gender: "female" },
    { id : 3, firstName: "Jim", lastName: "Carrey", age: 54, gender: "male" },
    { id : 4, firstName: "Kate", lastName: "Winslet", age: 40, gender: "female" }
        ];
        
        users = _.keyBy(users, "id");
  
        var user = users[1];
        console.log(user);
    </script>
</head>
<body></body>
</html>

Output:

{id: 1, firstName: "John", lastName: "Doe", age: 28, gender: "male"}

Lodash _.reduce Method

_.reduce is a little bit like a filter function. The only difference is that you can choose the form of the returned object.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

    <script type="text/javascript">
  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;
  }, {});
  
  console.log(JSON.stringify(reducedUsers));
    </script>
</head>
<body></body>
</html>

The above HTML prints below output on the console:

{"28":[{"name":"Jane","age":28}],"30":[{"name":"John","age":30},{"name":"Jack","age":30}]}

Lodash _.shuffle() Method

The _.shuffle() function shuffles a collection.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

    <script type="text/javascript">
  words = ['sky', 'wood', 'forest', 'falcon', 
   'pear', 'ocean', 'universe'];

  console.log(_.shuffle(words));
  console.log(_.shuffle(words));
  console.log(_.shuffle(words));
  console.log(words);
    </script>
</head>
<body></body>
</html>

Output:

["universe", "pear", "ocean", "sky", "wood", "falcon", "forest"]
["forest", "pear", "ocean", "falcon", "wood", "universe", "sky"]
["ocean", "sky", "wood", "universe", "pear", "forest", "falcon"]
["sky", "wood", "forest", "falcon", "pear", "ocean", "universe"]

Lodash _.times Method

The _.times() executes the function n times.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

    <script type="text/javascript">
  _.times(4, () => {
   console.log("brave");
  })
    </script>
</head>
<body></body>
</html>

In the example, we execute the inner function four times. The function prints a word to the console.

brave
brave
brave
brave

Lodash _.delay function

The _.delay() function delays the execution of a function for the specified amount of milliseconds.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

    <script type="text/javascript">
  function message()
  {
   console.log("Some message");
  }
  _.delay(message, 150);
  console.log("Some other message");
    </script>
</head>
<body></body>
</html>

The example outputs two messages. The first one is delayed for 150ms. Here is the output:

Some other message
Some message

Lodash _.range Method

The Lodash _.range() function creates an array of numbers. The function accepts the start, end, and step parameters.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

    <script type="text/javascript">
  const vals = _.range(10);
  console.log(vals);

  const vals2 = _.range(0, 15);
  console.log(vals2);

  const vals3 = _.range(0, 15, 5);
  console.log(vals3);
    </script>
</head>
<body></body>
</html>

Output:

[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 ]
[ 0, 5, 10 ]

Lodash _.min and _.max() Methods

Lodash allows computing the maximum and minimum values of an array.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

    <script type="text/javascript">
  const vals = [-3, 4, 0, 12, 43, 9, -12];

  var min = _.min(vals);
  console.log(min);

  var max = _.max(vals);
  console.log(max);

  max = _.max(_.range(5, 25));
  console.log(max);

  const obs = [{n: 12}, {n: -4}, {n: 4}, {n: -11}];

  min = _.minBy(obs, 'n');
  console.log(min);

  max = _.maxBy(obs, 'n');
  console.log(max);
    </script>
</head>
<body></body>
</html>

Output:

-12
43
24
{ n: -11 }
{ n: 12 }

Lodash _.sum Method

The _.sum() function calculates the sum of array values.

Example:

const vals = [-2, 0, 3, 7, -5, 1, 2];

const sum = _.sum(vals);
console.log(sum);

In the code example, we compute and print the sum of array values.

Lodash String Case Methods

Locash library contains several functions that work with the case of words.

_.camelCase
_.capitalize
_.kebabCase
_.lowerCase
_.upperCase

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

    <script type="text/javascript">
  const words = ["sky", "Sun", "Blue Island"];

  console.log(_.map(words, _.camelCase));
  console.log(_.map(words, _.capitalize));
  console.log(_.map(words, _.kebabCase));
  console.log(_.map(words, _.lowerCase));
  console.log(_.map(words, _.upperCase));
    </script>
</head>
<body></body>
</html>

Output:

[ 'sky', 'sun', 'blueIsland' ]
[ 'Sky', 'Sun', 'Blue island' ]
[ 'sky', 'sun', 'blue-island' ]
[ 'sky', 'sun', 'blue island' ]
[ 'SKY', 'SUN', 'BLUE ISLAND' ]

Lodash string _.startsWith and _.endsWith Methods

The _.startsWith() function determines if the string starts with the specified string. The _.endsWith() function determines if the string ends with the specified string.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

    <script type="text/javascript">
  const words = ["tank", "boy", "tourist", "ten",
    "pen", "car", "marble", "sonnet", "pleasant",
    "ink", "atom"]

  console.log("Starting with 't'");
  words.forEach( e => {

   if (_.startsWith(e, 't')) {

    console.log(e);
   }
  });

  console.log("Ending with 'k'");
  words.forEach( e => {

   if (_.endsWith(e, 'k')) {

    console.log(e);
   }
  });
    </script>
</head>
<body></body>
</html>

Output:

Starting with 't'
tank
tourist
ten
Ending with 'k'
tank
ink

Lodash object keys and values

The _.keys() function returns an array of the property names of the JavaScript object and the _.values() function returns an array of their values.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

    <script type="text/javascript">
        // using Object Literals
        var user = {
            firstName: 'Ramesh',
            lastName: 'Fadatare',
            emailId: 'ramesh@gmail.com',
            age: 29,
            getFullName: function () {
                return user.firstName + " " + user.lastName;
            }
        }

        const keys = _.keys(user);
        console.log(keys);

        const values = _.values(user);
        console.log(values);
    </script>
</head>
<body></body>
</html>

Output:

["firstName", "lastName", "emailId", "age", "getFullName"]
["Ramesh", "Fadatare", "ramesh@gmail.com", 29, ƒ]

Lodash iterate object properties

The _.forIn() function can be used to iterate over object properties.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Lodash Tutorial</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

    <script type="text/javascript">
        // using Object Literals
        var user = {
            firstName: 'Ramesh',
            lastName: 'Fadatare',
            emailId: 'ramesh@gmail.com',
            age: 29
        }

        _.forIn(user, (value, key) => {
            console.log(`${key}: ${value}`);
        })
    </script>
</head>
<body></body>
</html>

Output:

firstName: Ramesh
lastName: Fadatare
emailId: ramesh@gmail.com
age: 29

References

https://lodash.com/

https://lodash.com/docs/4.17.11

Lodash Tutorial for Beginners

Lodash

Why Lodash?

Lodash Installation

Lodash JS Examples

Lodash _.assign Method

Example:

Lodash _.first() and _.last() Methods

Example:

Lodash _.find Method

Example:

Lodash _.chunk() Method

Example:

Lodash _.slice() Method

Example:

Lodash _.random() Method

Example:

Lodash _.keyBy Method

Example:

Lodash _.reduce Method

Example:

Lodash _.shuffle() Method

Example:

Lodash _.times Method

Example:

Lodash _.delay function

Example:

Lodash _.range Method

Example:

Lodash _.min and _.max() Methods

Example:

Lodash _.sum Method

Example:

Lodash String Case Methods

Lodash string _.startsWith and _.endsWith Methods

Example:

Lodash object keys and values

Example:

Lodash iterate object properties

Example:

References

Comments

Post a Comment

My Top and Bestseller Udemy Courses