Commonly Used Lodash Methods for Frontend Development

Introduction

In everyday front‑end development we constantly need to process data returned from back‑end services or prepare data for form submission, and Lodash provides a comprehensive toolbox to simplify these tasks.

Array Utilities

_.compact(array) removes falsey values (false, null, 0, "", undefined, NaN) from an array and returns a new array.

const _ = require('lodash')
console.log(_.compact([0, 1, false, 2, '', 3, undefined, 4, null, 5])); // => [ 1, 2, 3, 4, 5 ]

Used in projects to clean dirty data before rendering.

_.difference(array, [values]) creates a new array excluding the specified values.

const _ = require('lodash')
console.log(_.difference([1, 2, 3], [2, 4])); // => [ 1, 3 ]
const arr = [1, 2], obj = { a: 1 }
console.log(_.difference([1, arr, [3, 4], obj, { a: 2 }], [1, arr, obj])); // => [ 1, 3 ]

Can replace Array.prototype.filter in certain scenarios.

_.last(array) returns the last element of an array.

console.log(_.last([1, 2, 3, 4, 5])); // => 5

Useful for extracting the final level ID in a cascader component.

_.chunk(array, [size=1]) splits an array into chunks of the given size, returning a two‑dimensional array.

console.log(_.chunk([1, 2, 3, 4, 5], 2)); // => [ [ 1, 2 ], [ 3, 4 ], [ 5 ] ]

Helps build grid layouts by converting a flat list into rows and columns.

Object Helpers

_.get(object, path, [defaultValue]) safely retrieves a value at a given path, returning defaultValue if the result is undefined .

const _ = require('lodash')
const object = { a: { b: [{ c: 1 }, null] }, d: 3 };
console.log(_.get(object, 'a.b[0].c')); // => 1
console.log(_.get(object, ['a','b',1], 4)); // => null
console.log(_.get(object, 'e', 5)); // => 5

Eliminates verbose if (a && a.b && a.b.c) checks.

_.has(object, path) checks whether a path exists on the object (excluding prototype properties).

const _ = require('lodash')
const obj = { a: 1 }
const obj1 = { b: 1 }
const obj2 = Object.create(obj1)
console.log(_.has(obj, 'a')); // => true
console.log(_.has(obj2, 'b')); // => false

Can replace Object.prototype.hasOwnProperty .

_.mapKeys(object, [iteratee=_.identity]) creates a new object with transformed keys.

const _ = require('lodash')
const obj = { a: 1, b: 1 }
const res = _.mapKeys(obj, (value, key) => key + value)
console.log(res) // => { a1: 1, b1: 1 }

Useful for adapting mismatched API field names.

_.mapValues(object, [iteratee=_.identity]) creates a new object with transformed values.

const _ = require('lodash')
const obj = { a: { age: 1 }, b: { age: 2 } }
const res = _.mapValues(obj, value => value.age)
console.log(res) // => { a: 1, b: 2 }

Helps format data to match back‑end expectations.

_.pick(object, [props]) extracts specified properties into a new object.

const _ = require('lodash')
const obj = { a: 1, b: 2, c: 3 }
const res = _.pick(obj, ['a', 'b'])
console.log(res) // => { a: 1, b: 2 }

Used to select only needed fields from API responses.

_.pickBy(object, [predicate=_.identity]) picks properties whose values satisfy a predicate.

const _ = require('lodash')
const obj = { a: 1, b: 2, c: 3 }
const res = _.pickBy(obj, (val, key) => val === 2)
console.log(res) // => { b: 2 }

Provides dynamic selection of properties.

_.omit(object, [props]) creates a new object without the specified properties.

const _ = require('lodash')
const obj = { a: 1, b: 2, c: 3 }
const res = _.omit(obj, ['b'])
console.log(res) // => { a: 1, c: 3 }

Acts as a concise alternative to delete statements.

_.omitBy(object, [predicate=_.identity]) omits properties for which the predicate returns true.

const _ = require('lodash')
const obj = { a: 1, b: 2, c: 3, cc: 4 }
const res = _.omitBy(obj, (val, key) => key.includes('c'))
console.log(res) // => { a: 1, b: 2 }

Practical Functions

_.cloneDeep(value) performs a deep clone of any value, handling circular references.

const _ = require('lodash')
const obj = { a: [{ b: 2 }] }
const res = _.cloneDeep(obj)
console.log(res) // => { a: [ { b: 2 } ] }

Preferred over JSON.parse(JSON.stringify(...)) for complex structures.

_.isEqual(value, other) deeply compares two values for equality.

const _ = require('lodash')
const obj = { a: [{ b: 2 }] }
const obj1 = { a: [{ b: 2 }] }
console.log(_.isEqual(obj, obj1)) // => true

Useful for detecting changes in form data.

_.isNil(value) checks whether a value is null or undefined .

const _ = require('lodash')
let a = null
console.log(_.isNil(a)) // => true

Provides a more accurate emptiness test than simple truthy checks.

_.debounce(func, [wait=0], [options]) creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last call.

const _ = require('lodash')
const fn = () => { fetch('https://xxx.cn/api') }
const debounced = _.debounce(fn, 3000)

Ideal for reducing API calls on input fields.

_.throttle(func, [wait=0], [options]) creates a throttled function that only invokes func at most once per wait milliseconds.

const _ = require('lodash')
const fn = () => { fetch('https://xxx.cn/api') }
const throttled = _.throttle(fn, 300)

Commonly used for scroll or resize event handling.

_.isEmpty(value) determines if a collection (object, array, map, set) is empty.

const _ = require('lodash')
const obj = {}
console.log(_.isEmpty(obj)) // => true

Helps validate incoming data.

_.flow([funcs]) creates a function that runs the provided functions from left to right, passing the result of each to the next.

const _ = require('lodash')
const add = (a, b) => a + b
const multi = a => a * a
const computerFn = _.flow([add, multi])
console.log(computerFn(1, 2)) // => 9

Enables functional composition of utility functions.

_.flowRight([funcs]) works like _.flow but composes functions from right to left (similar to compose ).

const _ = require('lodash')
const add = a => a + 3
const multi = a => a * a
const computerFn = _.flowRight([add, multi])
console.log(computerFn(4)) // => 19

Conclusion

The Lodash methods highlighted above are frequently used in front‑end projects to streamline data manipulation, improve code readability, and reduce boilerplate, ultimately saving development time and preventing common bugs.