Why is Lodash Still Useful?
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-03-26 02:48:21

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

With the release of ES6 and later versions of JavaScript, there were lots of methods released with it, expanding the functionality of the language. For example, there are new array and string methods, as well as useful operators like the spread and rest operators.

However, JavaScript still doesn’t make utility libraries like Lodash obsolete because there are lots of useful methods that still aren’t available in JavaScript.

In this article, we’ll look at a few methods from Lodash that still makes development easier than with plain JavaScript, including the `times`, `get`, `set`, `debounce`, `deburr`, and `keyBy` methods.

**_.times**
============

The `times` method lets us call a function multiple times, put all the retuned results of each function call into an array, and return it.

It takes 2 arguments, which are the number of times that the function is called and the second is the function to call.

For example, we can use it as follows:

```
import * as _ from "lodash";
const getRandomInteger = () => Math.round(Math.random() * 100);  
let result = _.times(5, getRandomInteger);  
console.log(result);
```

Then we may get the following result:

```
[16, 83, 35, 87, 41]
```

**_.debounce**
===============

We can use the `debounce` method to delay a call of a function by a specified amount of time. There’s no easy way to do this with JavaScript.

This is useful for event handling where we want to wait for something to be done and then call a function. For example, with a typeahead search, a debounce would wait until the user is finished typing before making the API call, removing unnecessary hits on your server.

For example, we can use it as follows. Given the following number input:

```
<input type="number" />
```

We can write the following JavaScript code:

```
import * as _ from "lodash";
const checkPositiveNumber = e => {  
  console.log(+e.target.value > 0);  
};

const numInput = document.querySelector("input[type=number]");  
numInput.addEventListener("input", _.debounce(checkPositiveNumber, 600));
```

The code above has the `checkPositiveNumber` function that checks if the value entered is positive. Then we use the `debounce` method, which takes the function and the delay before calling it in milliseconds.

The function returned by `debouce` has the same parameters and content as the original function, except that it’s delayed by the given number of milliseconds before calling it.

**_.get**
==========

The `get` method lets us access the properties of an object in a safe way. That is, even if the path to the properties doesn’t exist, it will return `undefined` or a default value instead of crashing the program.

For example, given the following object:

```
const obj = {  
  foo: {  
    bar: { baz: { a: 3 } },  
    foo: { b: 2 },  
    baz: [1, 2, 3]  
  }  
};
```

We can access `obj`'s property as follows:

```
const result = _.get(obj, "foo.bar.baz.a", 1);
```

The first argument is the object we want to access a property’s value. The second is the path to the property. The last argument is the default value.

We should get 3 for `result`.

On the other hand, if the path doesn’t exist or it’s `undefined`, then we get `undefined` or a default value returned.

For example, if we have:

```
const result = _.get(obj, "foo.bar.a", 1);
```

Then we get 1 for `result`.

If we don’t specify a default value as follows:

```
const result = _.get(obj, "foo.bar.a");
```

Then we get `undefined`.

There’s no way to safely get the value of a deeply nested property until the optional chaining operator becomes mainstream.

_.set
======

There’s also a `set` method to assign a value to a property of an object. For example, given the same object we had before:

```
const obj = {  
  foo: {  
    bar: { baz: { a: 3 } },  
    foo: { b: 2 },  
    baz: [1, 2, 3]  
  }  
};
```

We can set a value to a property by writing:

```
_.set(obj, "foo.bar.a", 1);
```

The `obj` object is changed in place. As we can see, it can set values for properties that don’t exist yet. The original object didn’t have `foo.bar.a` and it added it automatically set the value to 1.

So we get:

```
{  
  "foo": {  
    "bar": {  
      "baz": {  
        "a": 3  
      },  
      "a": 1  
    },  
    "foo": {  
      "b": 2  
    },  
    "baz": [  
      1,  
      2,  
      3  
    ]  
  }  
}
```

It even works if the nested object doesn’t exist, so if we write:

```
_.set(obj, "foo.foofoo.bar.a.b", 1);
```

We get:

```
{  
  "foo": {  
    "bar": {  
      "baz": {  
        "a": 3  
      }  
    },  
    "foo": {  
      "b": 2  
    },  
    "baz": [  
      1,  
      2,  
      3  
    ],  
    "foofoo": {  
      "bar": {  
        "a": {  
          "b": 1  
        }  
      }  
    }  
  }  
}
```

**_.deburr**
=============

To remove accents from characters with strings, we can use the `deburr` method. It takes in a string and returns a new string with the characters that have accents replaced with the ones that don’t have them.

For example, if we have `“S’il vous plaît”`:

```
const result = _.deburr("S'il vous plaît");
```

Then we get that `result` is `"S’il vous plait"` . The ‘i’ no longer has the accent.

**_.keyBy**
============

The `keyBy` method takes an array and the property name and returns an object with the value of the property as the keys of the object.

For example, if we have the following array:

```
const people = [  
  { name: "Joe", age: 20 },  
  { name: "Jane", age: 18 },  
  { name: "Mary", age: 20 }  
];
```

Then we can use `keyBy` as follows:

```
const results = _.keyBy(people, "name");
```

Then `results` would have the following:

```
{  
  "Joe": {  
    "name": "Joe",  
    "age": 20  
  },  
  "Jane": {  
    "name": "Jane",  
    "age": 18  
  },  
  "Mary": {  
    "name": "Mary",  
    "age": 20  
  }  
}
```

Then we get the object with name `'Joe'` by writing:

```
results['Joe']
```

There’s no way to do this easily with plain JavaScript without writing multiple lines of code.

Conclusion
==========

Lodash has many useful functions that don’t have an equivalent that are as easy to use as these methods.

There’s the `times` method to call a function multiple times in one line. The `debounce` function returns a new function with the same signature and code as the original but it’s delayed by the given amount of milliseconds before it’s called.

For accessing and setting object properties and values safely, there are the `get` and `set` methods that don’t crash when we access property paths that don’t exist or has value `undefined`.

Then there’s the `deburr` method to replace accented characters with the non-accented versions of these characters.

Finally, there’s `keyBy` method to get massage an array into an object that has the given property’s value of each entry as the keys and the entry with the given property’s name’s values as the value of those keys.