Exploring the Versatility and Power of Lodash: A simple cheat sheet to the Popular JavaScript Library

There are many javascript libraries that are essential for frontend application development, but the one that I admire a lot is the lodash.

I started programming in javascript with react framework for our operations portal, where we had to deal huge data sets that come different backend services. It needs a lot of data co-relation and mangling of the data so that it can rendered in form of tables as well as in graphical form using d3 graphics.

The main library that comes for my rescue is the lodash which can slice and dice the data in required from, without the hassle of lot coding the conditions and loops. The simplicity of the library keeps your code look elegant.

Lodash makes our job easier while working with huge set of arrays, numbers, objects, strings etc. Its very much useful in

- looping through arrays, objects, & strings
- Manipulating and check for values
- Creating composite functions

There are plenty of APIs available from lodash. But I have listed the most commonly used APIs in my case and hope so it will be useful for most of your needs as well. Created the snippets with a sample data and at the end have shared the mindmap poster on the same.

Sample data set.

import _ from 'lodash'

//out sample data
const studentList = [
    { id: 1, name: 'John', age: 10 },
    { id: 2, name: 'Jane', age: 11 },
    { id: 3, name: 'Bob', age: 12 },
    { id: 4, name: 'Alice', age: 10 },
    { id: 5, name: 'Pete', age: 11 },
];

List of APIs

• _.keyBy(studentList, ‘id’)
• _.groupBy(studentList, ‘age’)
• _.filter(studentList, obj => obj.age < 12)
• _.orderBy(studentList, [‘name’], [‘asc’])
• _.uniqBy(studentList, ‘age’)
• _.map(studentList, ‘name’)
• _.sortBy(studentList, ‘name’)
• _.without(_.map(studentList, ‘name’), ‘Bob’)
• _.each(studentList, fn)
• _.sample(_.map(studentList, ‘name’))
• _.sampleSize(_.map(studentList, ‘name’), 2)
• _.values(studentList[0])
• _.keys(studentList[0])
• _.partition(studentList, el => { return el[‘age’] <= 11})
• _.reject(studentList,{age: 10})
• _.startsWith(), _.pickBy() & _.isEmpty()

_.keyBy(studentList, ‘id’) — Returns a map of objects with id as the key

# Output

{
    '1': { id: 1, name: 'John', age: 10 },
    '2': { id: 2, name: 'Jane', age: 11 },
    '3': { id: 3, name: 'Bob', age: 12 },
    '4': { id: 4, name: 'Alice', age: 10 },
    '5': { id: 5, name: 'Pete', age: 11 }
}

_.groupBy(studentList, ‘age’) — Group the objects into arrays by age

# Output

{
    '10': [
        { id: 1, name: 'John', age: 10 },
        { id: 4, name: 'Alice', age: 10 }
    ],
    '11': [
        { id: 2, name: 'Jane', age: 11 },
        { id: 5, name: 'Pete', age: 11 }
   ],
   '12': [{ id: 3, name: 'Bob', age: 12 }]
}

_.filter(studentList, obj => obj.age < 12) — Filters out the object matching the condition. In this case it returns the list of students whose age is lesser than 12.

# Output

[
    { id: 1, name: 'John', age: 10 },
    { id: 2, name: 'Jane', age: 11 },
    { id: 4, name: 'Alice', age: 10 },
    { id: 5, name: 'Pete', age: 11 }
]

_.orderBy(studentList, [‘name’], [‘asc’]) — Returns the sorted array of objects based on the name in ascensding order.

# Output

[
    { id: 4, name: 'Alice', age: 10 },
    { id: 3, name: 'Bob', age: 12 },
    { id: 2, name: 'Jane', age: 11 },
    { id: 1, name: 'John', age: 10 },
    { id: 5, name: 'Pete', age: 11 }
]

_.uniqBy(studentList, ‘age’) — Returns a unique array of objects based on their age. If we have multiple matching objects, the one at the top will be returned.

# Output

[
    { id: 1, name: 'John', age: 10 },
    { id: 2, name: 'Jane', age: 11 },
    { id: 3, name: 'Bob', age: 12 }
]

_.map(studentList, ‘name’) — Returns an array of name by iterating over the collection. The second parameter can take a function as well to iterate over the array of objects.

# Output

 ['John', 'Jane', 'Bob', 'Alice', 'Pete']

_.sortBy(studentList, ‘name’) — Returns a sorted array of objects based on the name.

# Output

[
    { id: 4, name: 'Alice', age: 10 },
    { id: 3, name: 'Bob', age: 12 },
    { id: 2, name: 'Jane', age: 11 },
    { id: 1, name: 'John', age: 10 },
    { id: 5, name: 'Pete', age: 11 }
]

_.without(_.map(studentList, ‘name’), ‘Bob’) — Returns an array of names excluding ‘Bob’.

# Output

['John', 'Jane', 'Alice', 'Pete']

let displayAge = (obj) => {
console.log(obj.name, " age is ", obj.age)
}

_.each(studentList, displayAge) — Iterate over the array of object with the above function.

# Output

John  age is  10
Jane  age is  11
Bob  age is  12
Alice  age is  10
Pete  age is  11

_.sample(_.map(studentList, ‘name’)) — Returns a random name from the list of names

# Output

Jack

_.sampleSize(_.map(studentList, ‘name’), 2) — Returns a random array of names of size 2 from the given array of names

# Output

 [ 'Bob', 'Jack' ]

_.values(studentList[0]) — Returns the array of values of a given object

# Output

[1, 'John', 10]

_.keys(studentList[0]) — Returns the array of keys of a given object

# Output

['id', 'name', 'age']

_.partition(studentList, el => { return el[‘age’] <= 11}) — Returns the partition of array of objects based on the age. In this case students of [ age ≤ 11] & [ age > 11]

# Output

parts: [
    [
        { id: 1, name: 'John', age: 10 },
        { id: 2, name: 'Jane', age: 11 },
        { id: 4, name: 'Alice', age: 10 },
        { id: 5, name: 'Pete', age: 11 }
    ],
    [{ id: 3, name: 'Bob', age: 12 }]
]

_.reject(studentList,{age: 10}) — returns the array of objects excluding the object matching the criteria.

# Output

[
    { id: 2, name: 'Jane', age: 11 },
    { id: 3, name: 'Bob', age: 12 },
    { id: 5, name: 'Pete', age: 11 }
  ]

_.pickBy() — picks the object matching the criteria

_.map(
    studentList,
    obj => _.pickBy(obj, (v, k) =>
        _.startsWith(v, "J")))
    .filter(value =>
        !_.isEmpty(value))

# Output

[ { name: 'John' }, { name: 'Jane' } ]

mindmap