DEV Community

loading...
Cover image for Getting Started with Lodash in JavaScript

Getting Started with Lodash in JavaScript

Rahul Banerjee
Comp Eng Student @uoft | My opinions are my own Add me on LinkedIn: https://www.linkedin.com/in/rahulbanerjee2699/
Originally published at realpythonproject.com ・4 min read

Why use lodash

  • It reduces the lines of code significantly
  • Supports common operations done on Objects and Arrays
  • Supports common operations on strings
  • Supports generic functions
  • Trusted by other developers. It has 50k+ ⭐️ on GitHub
  • Well Documented
  • You don't need to learn any new syntax or concepts or anything. It uses plain old JavaScript.

Install lodash

npm install lodash

Accessing values in deeply nested objects

When dealing with API responses, more often than not, the data you'd like to access will be deeply nested.

Consider the following example.

image

This is a sample response from the JSON API

If we want to access the title, we could do something like this

image

This works fine but we made a big assumption:

'deepObject' , 'data' , 'attributes' ,'title' are all defined.

However, it is possible that any of them might be undefined. This would throw an error. If 'attributes' is empty or undefined, then 'attributes.title' would not exist.

Lodash's get function can be used to handle the error gracefully. Below is the syntax

_.get(object, path, [defaultValue])
Enter fullscreen mode Exit fullscreen mode

image

In the second console statement, we try to access the element at index 3 in data but this doesn't exist. Therefore 'Value doesn't exist' is printed in the console.

In the third console statement, we try to print the value for 'title' in 'data[0]' but 'data[0]' doesn't have any attribute called 'title'. Similar to the above case, 'Value doesn't exist' is printed in the console.

Adding attributes to deeply nested Objects

We will work with the same object we were working with earlier.

If we want to add a new key-value pair for subtitle inside 'attributes', we could do something like this

image

Again, we made a similar assumption that the entire path is defined. However, if any part of the path is undefined, it will throw an error.

We can use Lodash's set function to handle this error gracefully. Below is the syntax

_.set(object, path, value)
Enter fullscreen mode Exit fullscreen mode

If the path doesn't exist, it will create the path.

image

set is an in-place function, i.e it updates the input object. Our new object is below

image

The second set operation added 3 elements (2 empty elements) to the 'data' array while the third set operation added an attribute 'subtitle' to 'data[0]'

Check if a path exists

We can use the has function to check if a path exists in an object. Below is the syntax

_.has(object, path)
Enter fullscreen mode Exit fullscreen mode

image

Invert Keys an Values of an object

Lodash's invert function will invert the keys and values. Below is the syntax

_.invert(object)
Enter fullscreen mode Exit fullscreen mode

image

Create an object from another object

If you have a object and want to create an object with some of the keys from the original object, you can use Lodash's pick function. It doesn't add the key and value directly, if the path provided is nested, it will recreate the path as well. If you are confused, refer to the example below

Below is the syntax

_.pick(object, [paths])
Enter fullscreen mode Exit fullscreen mode

Let's work with the JSON API response again.

image

Instead of directly adding title directly, it recreate the path 'data[0].attributes.title'.

Deep Copy of an Object

The cloneDeep function creates a deep copy of an object
image

As you can see, the original object remains unchanged.

Compare Object irrespective of the order of the keys

image

Some Set operations on Arrays

Find the elements in array1 but not in array2

image

Find Common elements in two arrays

image

Find the difference between two arrays

image

Zip

This is similar to the zip function in Python.
image

Get unique elements of an array

image

Lodash has a bunch of other useful functions, refer to their documentation for more

Discussion (0)