DEV Community

Cover image for Lodash - a javascript power tool
Le Vuong
Le Vuong

Posted on

Lodash - a javascript power tool

Lodash, a lightweight replacement for Underscore.js, is a popular JavaScript utility library that simplifies common programming tasks. Explore the top 20 Lodash functions below to enhance your JavaScript skills:


1. _.get

  • Safely retrieves a nested property from an object, avoiding errors if the property doesn't exist.
const obj = { a: { b: { c: 42 } } }; _.get(obj, 'a.b.c', 'default'); // 42
Enter fullscreen mode Exit fullscreen mode

2. _.set

  • Sets the value of a nested property in an object, creating intermediate properties if they don’t exist.
const obj = {}; _.set(obj, 'a.b.c', 42); console.log(obj); // { a: { b: { c: 42 } } }
Enter fullscreen mode Exit fullscreen mode

3. _.cloneDeep

  • Creates a deep copy of an object or array.
const arr = [{ a: 1 }]; const deepClone = _.cloneDeep(arr);
Enter fullscreen mode Exit fullscreen mode

4. _.debounce

  • Delays the execution of a function until after a specified time has passed since its last call.
const log = _.debounce(() => console.log('Debounced!'), 300); window.addEventListener('resize', log);
Enter fullscreen mode Exit fullscreen mode

5. _.throttle

  • Ensures a function is executed at most once in a specified time interval.
const log = _.throttle(() => console.log('Throttled!'), 1000); window.addEventListener('scroll', log);
Enter fullscreen mode Exit fullscreen mode

6. _.isEmpty

  • Checks if a value is an empty object, array, or falsy value.
_.isEmpty([]); // true _.isEmpty({}); // true _.isEmpty(''); // true
Enter fullscreen mode Exit fullscreen mode

7. _.merge

  • Deeply merges two or more objects, combining their properties.
const obj1 = { a: { b: 1 } }; const obj2 = { a: { c: 2 } }; _.merge(obj1, obj2); // { a: { b: 1, c: 2 } }
Enter fullscreen mode Exit fullscreen mode

8. _.pick

  • Creates an object composed of the selected properties.
const obj = { a: 1, b: 2, c: 3 }; _.pick(obj, ['a', 'c']); // { a: 1, c: 3 }
Enter fullscreen mode Exit fullscreen mode

9. _.omit

  • Creates an object excluding the specified properties.
const obj = { a: 1, b: 2, c: 3 }; _.omit(obj, ['b']); // { a: 1, c: 3 }
Enter fullscreen mode Exit fullscreen mode

10. _.uniq

  • Removes duplicate values from an array.
_.uniq([1, 2, 2, 3]); // [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

11. _.groupBy

  • Groups the elements of an array based on a provided criterion.
_.groupBy([6.1, 4.2, 6.3], Math.floor); // { '4': [4.2], '6': [6.1, 6.3] }
Enter fullscreen mode Exit fullscreen mode

12. _.sortBy

  • Sorts an array of objects based on specific properties or criteria.
const users = [{ name: 'Tom', age: 30 }, { name: 'Jerry', age: 20 }]; _.sortBy(users, 'age'); // [{ name: 'Jerry', age: 20 }, { name: 'Tom', age: 30 }]
Enter fullscreen mode Exit fullscreen mode

13. _.map

  • Creates a new array by transforming each element in a collection.
_.map([1, 2, 3], n => n * 2); // [2, 4, 6]
Enter fullscreen mode Exit fullscreen mode

14. _.filter

  • Creates an array with elements that pass the provided condition.
_.filter([1, 2, 3, 4], n => n % 2 === 0); // [2, 4]
Enter fullscreen mode Exit fullscreen mode

15. _.find

  • Finds the first element that satisfies a condition.
_.find([1, 2, 3, 4], n => n > 2); // 3
Enter fullscreen mode Exit fullscreen mode

16. _.flatten

  • Flattens a nested array into a single-level array.
_.flatten([1, [2, [3, [4]]]]); // [1, 2, [3, [4]]]
Enter fullscreen mode Exit fullscreen mode

17. _.flattenDeep

  • Flattens a nested array into a fully single-level array.
_.flattenDeep([1, [2, [3, [4]]]]); // [1, 2, 3, 4]
Enter fullscreen mode Exit fullscreen mode

18. _.difference

  • Returns the values from the first array that are not in the second array.
_.difference([2, 1, 3], [2, 3]); // [1]
Enter fullscreen mode Exit fullscreen mode

19. _.chunk

  • Splits an array into groups of the specified size.
_.chunk([1, 2, 3, 4, 5], 2); // [[1, 2], [3, 4], [5]]
Enter fullscreen mode Exit fullscreen mode

20. _.isEqual

  • Performs a deep comparison to determine if two values are equivalent.
_.isEqual({ a: 1 }, { a: 1 }); // true
Enter fullscreen mode Exit fullscreen mode

Keep learning and having FUN !

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay