Manipulate JavaScript data with Lodash library

Take a glance at how and why we should use Lodash

Let’s say you’ve dived into the Frontend development world for a while, now you’ve become a Frontend developer as you like. Congratulations, that’s really cool, playing around with HTML, CSS, JavaScript.

Then you have to manipulate and handle the data, either from the server, API, or hard-coded ones. JavaScript is really powerful, but somehow you might find that it would be great if there’re some tools or utilities which help to deal with all those complex data, object, array, or even collection.

Today, let’s introduce you to Lodash, which is described as

A modern JavaScript utility library delivering modularity, performance & extras.

You might have heard about this notable Lodash, or even have used it before.

Today, I will walk you through my favorite features of Lodash, which I regularly use in my projects, and find them very helpful.

1. Let’s get started with the most common one (IMO), Lodash `_.get()`.

Gets the value at path of object. If the resolved value is undefined, the defaultValue is returned in its place.

If you take a look at the official doc, this is an example provided,

_.get(object, path, [defaultValue])

What I found the very helpful use cases of this method is it helps us prevent the most common JavaScript error every developer must found in their career path. Let say you get the user data, it looks like this,

const user = {
  name: 'Lucas', 
  age: 25,
  addresses: [
    {
      street: 'Post St.'
      post_code: '94109'
    },
    {
      street: 'Taylor St.'
      post_code: '94108'
    },
  ]
}

When we want to access the street of this user, we would have to do something like this

let streetName = user.addresses[0].street

Feeling unsecured?
Notice that the above code is very likely to crash if someone accidentally calls the above line before getting the user object, or if the addresses field doesn’t exist, or doesn’t exactly have the shape like that, we will get a super common JavaScript error similar to what is shown below

The classic way to avoid this crash is to use the validating pattern like this,

let streetName = user && user.addresses && user.addresses[0] && user.addresses[0].street

OMG LOL, I can’t imagine how painful we are facing, not mentioned more complex objects in the real-world application.

This is where Lodash _.get() really plays a big role, instead of calling the code like that, we will do like

_.get(user, 'addresses[0].street', '')

Feeling much more secured?
You will either retrieve the street of that user or an empty string (as a default value), instead of crashing your web application, no matter how deep the field is in or how complex the object is.

2. Tired of checking an empty array ([ ]) or empty object({ }) ?

Let’s introduced you to_.isEmpty()
How many times do you check if the array or object is empty like this?

// Check array
if (myArray.length === 0) { 
  // Empty array
  // Do something
}

// Check object
if (Object.keys(myObj).length === 0) { 
  // Empty object
  // Do something
}

With _.isEmpty, we will do this cleaner way,

// Check array
if (_.isEmpty(myArray)) { 
  // Empty array
  // Do something
}
// Check object
if (_.isEmpty(myArray)) { 
  // Empty object
  // Do something
}

This might not look like doing a big change, but think of writing Object.keys(myObj) === 0 20 times a day, that helps a lot, doesn’t it?

3. Uniq that data

Most of the time I brought myself to the problems of getting rid of something duplicated in my data,

const users = [
  {
    id: 1,
    name: 'Lucas'
  },
  {
    id: 2,
    name: 'John'
  },
  {
    id: 1,
    name: 'Lucas'
  }
]

_.uniqBy(users, 'id');
/* 
  => [
  {
      id: 1,
      name: 'Lucas'
    },
    {
      id: 2,
      name: 'John'
    }
  ] 
*/

Lodash still has a lot of powerful methods which I usually use them in my daily work.

I really hope this article is the entry point to help you find yourself some useful JavaScript methods and ideas from this powerful Lodash library.

Feel free to contact me if you have any questions or suggestions. I’d love to hear from all of you.

Also, you can comment below and get in touch with me or visiting my websites, https://www.oaksupanat.com and https://www.codemonday.com