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 blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up