DEV Community

Cover image for JavaScript - Some very useful lodash/fp functions
Pablo Veiga
Pablo Veiga

Posted on

JavaScript - Some very useful lodash/fp functions

#javascript #lodash #functional #beginners

If you still don't know Lodash, it's time for you to try it. Lodash is a modern JavaScript utility library that

makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.

Source: https://lodash.com

It's okay if you prefer to deal with data types and structures the old fashion way by implementing your own algorithms, but I strongly believe that, in several cases, using Lodash will leverage your productivity and avoid some lines of code.

Besides, it is a very popular library, used by more then 10 million other projects on GitHub, and it's been downloaded more than 40 million times from NPM.

Lodash also provides a Functional Programming Module, which, according to them:

promotes a more functional programming (FP) friendly style by exporting an instance of Lodash with its methods wrapped to produce immutable auto-curried iteratee-first data-last methods.

Source: https://github.com/lodash/lodash/wiki/FP-Guide

In this article I'm going to introduce some
Lodash FP methods that will save some of your precious development hours by helping you to deal easily with different data structures in several situations.

isEmpty

Let's start with one of the simplest methods of Lodash FP module. It is the isEmpty one.
This method provides you an easy way to verify if a variable is empty or not (really?! 😒). It works well for arrays, objects and strings. But take care when checking Boolean or Numeric values.

Take a look at the examples below:

import { isEmpty } from 'lodash/fp'

// Empty array
isEmpty([]) // true

// Empty object
isEmpty({}) // true

// Empty string
isEmpty('') // true

// Null
isEmpty(null) // true

// Undefined
isEmpty(undefined) // true
Enter fullscreen mode Exit fullscreen mode

Initially, isEmpty was designed to deal only with arrays, objects and strings so, when dealing with Boolean, numeric or Function values, you need to be a little bit more cautious because it will always return true for these types no matter what..

// Numbers
isEmpty(0) // true - it seems okay depending on the context
isEmpty(2021) // true - wait, what?!

// Boolean
isEmpty(false) // true - this might make sense
isEmpty(true) // true - oh no, again?!

// Function
isEmpty(function() {}) // true - ok, I quit!
Enter fullscreen mode Exit fullscreen mode

You can check its full implementation to understand why this happens here

get

The next method on our list is the get method.
It allows you to get (again, b*tch?!) values from objects or arrays that you're not sure if they're available.
This helps a lot when dealing with dynamic structures within implementations that might continue even if specific values are not available at runtime.

Here are some examples:

import { get } from 'lodash/fp' 

const aryaStark = {
  name: 'Arya Stark',
  age: 15,
  father: { name: 'Ned Start' },
  mother: { name: 'Catelyn Stark' }
}

const jonSnow = {
  name: 'Jon Snow',
  age: 30,
  father: { name: 'Ned Stark' },
  mother: null
}

get('mother.name', aryaStark) // 'Catelyn Stark'
get('mother.name', jonSnow) // undefined
Enter fullscreen mode Exit fullscreen mode

It's important to mention that, if the searched value is null, the result will be null

You may use get to grab values regardless of the level the information is at within an object. For example:

import { get } from 'lodash/fp' 

const jonSnow = {
  name: 'Jon Snow',
  parents: {
    father: {
      fullName: {
        firstName: 'Ned',
        lastName: 'Stark'
      }
    }
  }
}

get('parents.father.fullName.firstName', jonSnow) // 'Ned'

get('parents.mother.fullName.firstName', jonSnow) // undefined
Enter fullscreen mode Exit fullscreen mode

You may also use get to get (😒) values from arrays by their indexes using the [index] notation. You might even combine the . and the [index] notations to grab data from complex structures.

import { get } from 'lodash/fp' 

const characters = [
  {
     name: 'Jon Snow',
     house: 'Stark',
     parents: [
       'Ned Stark',
       'Unknown Mom (spoiler)'
     ]
  },
  {
    name: 'Jaime Lannister',
    house: 'Lannister',
    parents: [
      'Tywin Lannister', 
      'Joanna Lannister'
    ]
  },
  {
    name: 'Daenerys Targaryen',
    house: 'Targaryen',
    parents: [
      'Aerys II Targaryen',
      'Rhaella Targaryen'
    ]
  }
]

get('[1].parents[0]', characters) // 'Tywin Lannister'
Enter fullscreen mode Exit fullscreen mode

This is how you deal with simple arrays:

import { get } from 'lodash/fp' 

const evenNumbers = ['zero', 'two', 'four', 'six', 'eight']

get(3, evenNumbers) // 'six'
Enter fullscreen mode Exit fullscreen mode

And last, but not least, you may also need to get dynamic properties according to a given variable:

import { get } from 'lodash/fp' 

const activeUser = {
  name: 'John Doe',
  isActive: true,
  nickname: 'theUnknown'
}

const inactiveUser = {
  name: 'Jane Doe',
  isActive: false,
  nickname: 'someoneElse'
}


function getName(user) {
  const attr = user.isActive ? 'nickname' : 'name'
  return get(attr, user)
}

getName(activeUser) // 'theUnknown'
getName(inactiveUser) // 'Jane Doe'
Enter fullscreen mode Exit fullscreen mode

getOr

The getOr method increments a little bit what the get method does. The only difference here is that there is a third parameter that will be used in case of the property or index doesn't exist.

import { getOr } from 'lodash/fp' 

const jaimeLannister = {
  name: 'Jaime Lannister',
  parents: {
    father: {
      fullName: {
        firstName: 'Tywin',
        lastName: 'Lannister'
      }
    }
  }
}

getOr('Joanna Lannister', 'parents.mother.fullName.firstName', jaimeLannister) // Joanna Lannister
Enter fullscreen mode Exit fullscreen mode

It's important to keep in mind that, regardless of the attribute/item value, if it exists it will be returned.
The fallback value (first parameter) will only be used if the attribute or item searched does not exist or is undefined.

Check the example:

import { getOr } from 'lodash/fp' 

const houseLannister = { name: 'Lannister' }
const houseStark = { name: 'Stark' }
const uknownHouse = { name: null }
const invalidHouse = {}

getOr('UnknownHouse', 'name', unknownHouse) // null
getOr('Invalid House', 'name', invalidHouse) // 'Invalid House'
Enter fullscreen mode Exit fullscreen mode

If the intention is to get the value 'Unknown House' in a situation like above, the correct way of doing it would be using get:

import { getOr } from 'lodash/fp' 

const uknownHouse = { name: null }

get('name', uknownHouse) || 'Unknown House' // 'Unknown House'
Enter fullscreen mode Exit fullscreen mode

You may also use getOr to grab data from arrays or even combine the object and array notations to get values from complex structures:

import { getOr } from 'lodash/fp' 

const characters = [
  {
    name: 'John Snow',
    house: 'Stark',
    parents: [ 'Ned Stark' ]
  },
  {
    name: 'Jaime Lannister',
    house: 'Lannister',
    parents: [
      'Tywin Lannister',
     'Joanna Lannister'
    ]
  },
  {
    name: 'Daenerys Targaryen',
    house: 'Targaryen',
    parents: [
      'Aerys II Targaryen',
      'Rhaella Targaryen'
    ]
  }
]

getOr('Unknown Mom (spoiler)', '[0].parents[1]', characters) // 'Unknown Mom (spoiler)'
Enter fullscreen mode Exit fullscreen mode

Take a look at all get examples. You may implement all of them using getOr following the same logic.

at

The at method is quite useful when you need to get more than one attribute/index from the same object regardless of the level the information is. It will return an array containing all of the found values and undefined for those that weren't found. The coolest thing about it is that you can use the Destructuring Assignment syntax and use the variables straight away:

import { at } from 'lodash/fp'

const jaimeLannister = {
  firstName: 'Jaime',
  lastName: 'Lannister',
  father: {
    firstName: 'Tywin',
    lastName: 'Lannister'
  },
  mother: {
    firstName: 'Joanna',
    lastName: 'Lannister'
  }
}

at(['father.firstName', 'mother.firstName'], jaimeLannister) // ['Tywin', 'Joanna']

// Using Destructuring Assignment
const [father, mother] = at(['father.firstName', 'mother.firstName'], jaimeLannister)

console.log(father) // 'Tywin'
console.log(mother) // 'Joanna'
Enter fullscreen mode Exit fullscreen mode

The same rule to get items from arrays using their indexes with get or getOr is applied for at.

import { at } from 'lodash/fp'

const characters = [
  {
    name: 'Jon Snow',
    house: 'Stark',
    parents: [ 'Ned Stark' ]
  },
  { 
    name: 'Jaime Lannister',
    house: 'Lannister',
    parents: [
      'Tywin Lannister',
      'Joanna Lannister'
    ]
  },
  {
    name: 'Daenerys Targaryen',
    house: 'Targaryen',
    parents: [
      'Aerys II Targaryen',
      'Rhaella Targaryen'
    ]
  }
]

at(['[0].parents[0]', '[2].parents[1]'], characters)  // ['Ned Stark', 'Rhaella Targaryen']

// Using Destructuring Assignment
const [jonSnowFather, daenerysMother] = at(['[0].parents[0]', '[2].parents[1]'], characters)

console.log(jonSnowFather) // 'Ned Stark'
console.log(daenerysMother) // 'Rhaella Targaryen'
Enter fullscreen mode Exit fullscreen mode

pick

The pick method is very useful when you need to get just some of the attributes of a given object and, by using it, your code will become more understandable for those who read. To use it, you need to specify the attributes you want to retrieve within an array.

import { pick } from 'lodash/fp'

const jonSnow = {
  firstName: 'Jon',
  lastName: 'Snow',
  isBastard: true,
  father: {
    firstName: 'Ned',
    lastName: 'Stark'
  },
  mother: 'Unknown',
  age: 14,
  wolf: 'Ghost'
}

pick(['firstName', 'father.firstName', 'wolf'], jonSnow) // { firstName: 'Jon', father: { firstName: 'Ned' }, wolf: 'Ghost' }
Enter fullscreen mode Exit fullscreen mode

Notice that you can also get nested attributes from your object. When using 'father.firstName', the pick method will get the father object but containing only its firstName property.

omit

The omit is like the "opposite" of pick.
Instead of getting the attributes specified, it will hide them from the result.

import { omit} from 'lodash/fp'

const jonSnow = {
  firstName: 'Jon',
  lastName: 'Snow',
  isBastard: true,
  father: {
    firstName: 'Ned',
    lastName: 'Stark'
  },
  mother: 'Unknown',
  age: 14,
  wolf: 'Ghost'
}

omit(['firstName', 'father.firstName', 'wolf'], jonSnow) // { lastName: 'Snow', isBastard: true, father: { lastName: 'Stark' }, mother: 'Unknown', age: 14 }
Enter fullscreen mode Exit fullscreen mode

The same rule for hiding nested attributes works here. Notice that, by using 'father.firstName' it means that the firstName will be omitted and only the lastName will be gotten from father attribute.

orderBy

The orderBy method is useful to sort an array of objects considering a given property. You can sort value in both ascending and descending orders.

Take a look:

import { orderBy } from 'lodash/fp'

const characters = [
  {
    name: 'Ned Stark',
    age: 52
  },
  {
    name: 'Daenerys Targaryen',
    age: 15
  },
  {
    name: 'Jon Snow',
    age: 17
  },
  {
    name: 'Arya Stark',
    age: 12
  }
]

orderBy('age', 'desc', characters)

/*

[
  {
    name: 'Ned Stark', 
    age: 52
  },
  {
    name: 'Jon Snow',
    age: 17
  }
  {
    name: 'Daenerys Targaryen',
    age: 15
  },
  {
    name: 'Arya Stark',
    age: 12
  }
]

*/
Enter fullscreen mode Exit fullscreen mode

If you want to order items in ascending order, all you need to do is replace the 'desc' parameter by 'asc'.

orderBy is an evolved version of sortBy

intersectionBy

The intersectionBy method is useful to find items that belong to two different groups. You just need to pass the name of the property that will play as criteria for the intersection.

Check the examples:

import { intersectionBy } from 'lodash/fp'

const goodGuys = [
  { name: 'Daenerys Targaryen' },
  { name: 'Jon Snow' },
  { name: 'Arya Stark' }
]

const badGuys = [
  { name: 'Cersei Lannister' },
  { name: 'Joffrey Lannister' },
  { name: 'Daenerys Targaryen' }
]

intersectionBy('name', goodGuys, badGuys) // [ { name: 'Daenerys Targaryen' } ]
Enter fullscreen mode Exit fullscreen mode

To deal with arrays of primitive values (numbers, strings) you may use the intersection method

These were some of the methods from Lodash Functional Programming Module that might be useful for you in a daily basis.
There a lot of other methods that can be used.

Attention: some links in this article take you to the basic Lodash documentation. In order to use the FP version of the method, the parameters need to be ordered differently.

I hope you liked it.
Please, comment and share!

Cover image by: Mika Baumeister

Top comments (1)

Collapse
 
marcoslhc profile image
Marcos Hernández • • Edited

Good article, but I think you missed the most important part of lodash/fp the functional part.

lodash/fp is designed to compose functions by curry (partially apply) them

so in the pick example you could extend to something like this:

import { pick, flow, map, filter, defaultsDeep } from "lodash/fp";

export const getSonFatherAndWolfName = pick([
  "firstName",
  "father.firstName",
  "wolf",
]);

// getSonFatherAndWolfName(northSons[0])

// {
//    firstName: 'Jon',
//     father: {
//         firstName: 'Ned'
//     },
//     wolf: 'Ghost'
// }

export const getAllNamesAndWolves = flow(
  map(pick(["firstName", "wolf"])),
  filter((son) => son.wolf),
);

// getAllNamesAndWolves(northSons)

// [ {
//     firstName: 'Jon',
//     wolf: 'Ghost'
// }, {
//     firstName: 'Rob',
//     wolf: 'Grey Wind'
// }]

export const getBastards = filter((son) => son.isBastard);

export const composeLine = flow(
// pick properties
  pick([
    "firstName",
    "lastName",
    "age",
    "father.firstName",
    "father.lastName",
    "mother.firstName",
    "mother.lastName",
  ]),
// set defaults and normalize the objects
  defaultsDeep({
    firstName: "",
    lastName: "",
    father: {
      firstName: "",
      lastName: "",
    },
    mother: {
      firstName: "",
      lastName: "",
    },
  }),
// convert object to array of strings
  (s) => {
    return [
      `${s.firstName} ${s.lastName}`,
      `${s.age}`,
      `${s.father.firstName} ${s.father.lastName}`,
      `${s.mother.firstName} ${s.mother.lastName}`,
    ];
  },
);

export const listBastardsInfo = flow(getBastards, map(composeLine));

// listBastardsInfo(northSons)
// [
//    ['Jon Snow', 14, 'Raeghar Targaryen', 'Lianna Stark'],
//    ['Ramsay Snow', 16, 'Roose Bolton', '']
// ]
Enter fullscreen mode Exit fullscreen mode

this way it really highlights the power of functional programming and composition and shows the simplicity of declarative programming.

Read next

anwarachilles profile image

Custom YouTube Player Gadget with Javascript

Anwar Achilles -

pardnchiu profile image

FlexPlyr: 模組化多風格播放器

邱敬幃 Pardn Chiu -

sharanappa_m profile image

Understanding React Router: A Step-by-Step Guide for Beginners

Sharanappa -

imsushant12 profile image

Interview Questions on AWS EC2 and Compute Services

Sushant Gaurav -