JavaScript Lodash: A Practical Guide

By /

JavaScript Lodash: A Practical Guide

Lodash is a modern JavaScript utility library that delivers modularity, performance, and extra features to make working with arrays, numbers, objects, strings, etc., much easier. It’s inspired by Underscore.js, but has since surpassed it in many ways, including performance and the breadth of available utility functions. This guide will walk you through the core concepts of Lodash and provide practical examples to illustrate its usefulness.

Why Use Lodash?

Before diving into specifics, let’s consider why Lodash is so popular:

  • Code Readability: Lodash’s functions are often more concise and expressive than native JavaScript equivalents, leading to cleaner and more readable code.
  • Reduced Boilerplate: It eliminates the need to write repetitive, common tasks, saving you time and effort.
  • Improved Performance: Many Lodash functions are optimized for performance, often outperforming hand-written equivalents. This is especially true for operations on large datasets.
  • Cross-Browser Compatibility: Lodash handles cross-browser inconsistencies for you, providing a consistent experience across different browsers.
  • Extensive Functionality: It provides a vast array of utility functions, covering a wide range of programming needs.
  • Modularity: Lodash is modular. You can import only the specific functions you need, minimizing your project’s bundle size.

Getting Started

You can use Lodash in your project in a few different ways:

  • CDN: Include a script tag referencing a CDN (Content Delivery Network):

    html
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

  • npm/Yarn: Install it as a dependency using npm or Yarn:

    “`bash
    npm install lodash

    OR

    yarn add lodash
    “`

    Then, import it into your JavaScript files:

    “`javascript
    // Import the entire library (not recommended for production)
    import _ from ‘lodash’;

    // Import specific functions (recommended)
    import { chunk, debounce, isEqual } from ‘lodash’;
    //or
    import chunk from ‘lodash/chunk’;
    import debounce from ‘lodash/debounce’;
    import isEqual from ‘lodash/isEqual’;

    “`

  • ES Modules (Directly in Browser – for modern browsers supporting modules):

    html
    <script type="module">
    import _ from 'https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js';
    // Your code using Lodash
    </script>

Core Concepts and Practical Examples

Let’s explore some of the most commonly used Lodash functions, grouped by category:

1. Array Manipulation:

  • _.chunk(array, [size=1]): Creates an array of elements split into groups the length of size. If array can’t be split evenly, the final chunk will be the remaining elements.

    javascript
    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const chunked = _.chunk(numbers, 3);
    console.log(chunked); // Output: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]

  • _.compact(array): Creates an array with all falsey values removed. The values false, null, 0, "", undefined, and NaN are falsey.

    javascript
    const mixed = [0, 1, false, 2, '', 3, undefined, NaN];
    const compacted = _.compact(mixed);
    console.log(compacted); // Output: [1, 2, 3]

  • _.concat(array, [values]): Creates a new array concatenating array with any additional arrays and/or values.

    javascript
    const arr1 = [1, 2];
    const arr2 = [3, 4];
    const combined = _.concat(arr1, arr2, 5, [6]);
    console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

  • _.difference(array, [values]): Creates an array of array values not included in the other given arrays.

    javascript
    const arr1 = [1, 2, 3, 4];
    const arr2 = [2, 4, 5];
    const diff = _.difference(arr1, arr2);
    console.log(diff); // Output: [1, 3]

  • _.drop(array, [n=1]): Creates a slice of array with n elements dropped from the beginning.

    javascript
    const numbers = [1, 2, 3, 4, 5];
    const dropped = _.drop(numbers, 2);
    console.log(dropped); // Output: [3, 4, 5]

  • _.dropRight(array, [n=1]): Similar to _.drop, but removes elements from the end.

  • _.findIndex(array, [predicate=_.identity], [fromIndex=0]): Returns the index of the first element that satisfies the provided testing function.

    “`javascript
    const users = [
    { ‘user’: ‘barney’, ‘active’: false },
    { ‘user’: ‘fred’, ‘active’: false },
    { ‘user’: ‘pebbles’, ‘active’: true }
    ];

    const index = _.findIndex(users, { ‘user’: ‘fred’, ‘active’: false });
    console.log(index); // Output: 1

    const index2 = .findIndex(users, (o) => o.active);
    console.log(index2); // Output: 2
    * **`_.find(collection, [predicate=_.identity], [fromIndex=0])`**: Iterates over elements of collection, returning the first element predicate returns truthy for.javascript
    const users = [
    { ‘user’: ‘barney’, ‘active’: false, age: 30 },
    { ‘user’: ‘fred’, ‘active’: false, age: 40 },
    { ‘user’: ‘pebbles’, ‘active’: true, age: 18 }
    ];
    const user =     .find(users, user=>user.age<30);
    console.log(user); //{ user: ‘pebbles’, active: true, age: 18 }
    “`

  • _.flatten(array): Flattens array a single level deep.

    javascript
    const nested = [1, [2, [3, [4]], 5]];
    const flattened = _.flatten(nested);
    console.log(flattened); // Output: [1, 2, [3, [4]], 5]

  • _.flattenDeep(array): Recursively flattens array.

    javascript
    const nested = [1, [2, [3, [4]], 5]];
    const deeplyFlattened = _.flattenDeep(nested);
    console.log(deeplyFlattened); // Output: [1, 2, 3, 4, 5]

  • _.intersection([arrays]): Creates an array of unique values that are included in all given arrays.

    javascript
    const arr1 = [1, 2, 3];
    const arr2 = [2, 3, 4];
    const arr3 = [3, 5, 6];
    const intersection = _.intersection(arr1, arr2, arr3);
    console.log(intersection); // Output: [3]
    * _.pull(array, [values]): Removes all given values from array using SameValueZero for equality comparisons. This method mutates the original array.

    javascript
    const array = ['a', 'b', 'c', 'a', 'b', 'c'];
    _.pull(array, 'a', 'c');
    console.log(array); // Output: ['b', 'b']
    * _.remove(array, [predicate=_.identity]):Removes all elements from array that predicate returns truthy for and returns an array of the removed elements. Note: Unlike _.filter, this method mutates array.

    “`javascript
    const array = [1, 2, 3, 4];
    const evens = _.remove(array, function(n) {
    return n % 2 == 0;
    });

    console.log(array);
    // => [1, 3]

    console.log(evens);
    // => [2, 4]
    ``
    * **    _.uniq(array)`:** Creates a duplicate-free version of an array.

    javascript
    const numbers = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
    const uniqueNumbers = _.uniq(numbers);
    console.log(uniqueNumbers); // Output: [1, 2, 3, 4]

2. Object Manipulation:

  • _.get(object, path, [defaultValue]): Gets the value at path of object. If the resolved value is undefined, the defaultValue is returned in its place.

    “`javascript
    const object = { ‘a’: [{ ‘b’: { ‘c’: 3 } }] };
    const value = _.get(object, ‘a[0].b.c’);
    console.log(value); // Output: 3

    const anotherValue = _.get(object, ‘a[0].b.d’, ‘default’);
    console.log(anotherValue); // Output: default
    “`

  • _.set(object, path, value): Sets the value at path of object. If a portion of path doesn’t exist, it’s created.

    javascript
    const object = { 'a': [{ 'b': { 'c': 3 } }] };
    _.set(object, 'a[0].b.d', 4);
    console.log(object.a[0].b.d); // Output: 4

  • _.merge(object, [sources]): Recursively merges own and inherited enumerable string keyed properties of source objects into the destination object.

    javascript
    const object = { 'a': [{ 'b': 2 }, { 'd': 4 }] };
    const other = { 'a': [{ 'c': 3 }, { 'e': 5 }] };
    const merged = _.merge(object, other);
    console.log(merged); // Output: { a: [ { b: 2, c: 3 }, { d: 4, e: 5 } ] }

  • _.omit(object, [paths]): Creates an object composed of the own and inherited enumerable property paths of object that are not omitted.

    javascript
    const object = { 'a': 1, 'b': '2', 'c': 3 };
    const omitted = _.omit(object, ['a', 'c']);
    console.log(omitted); // Output: { b: '2' }
    * _.pick(object, [paths]): Creates an object composed of the picked object properties.
    javascript
    const object = { 'a': 1, 'b': '2', 'c': 3 };
    _.pick(object, ['a', 'c']);
    // => { 'a': 1, 'c': 3 }

  • _.keys(object): Creates an array of the own enumerable property names of object.

    “`javascript
    function Foo() {
    this.a = 1;
    this.b = 2;
    }

    Foo.prototype.c = 3;

    .keys(new Foo);
    // => [‘a’, ‘b’] (iteration order is not guaranteed)
    ``
    * **    .values(object)`:** Creates an array of the own enumerable string keyed property values of object.

    “`javascript
    function Foo() {
    this.a = 1;
    this.b = 2;
    }

    Foo.prototype.c = 3;

    _.values(new Foo);
    // => [1, 2] (iteration order is not guaranteed)
    “`

3. Function Manipulation:

  • _.debounce(func, [wait=0], [options={}]): Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.

    javascript
    // Avoid costly calculations while the window size is in flux.
    window.addEventListener('resize', _.debounce(calculateLayout, 150));

  • _.throttle(func, [wait=0], [options={}]): Creates a throttled function that only invokes func at most once per every wait milliseconds.

    javascript
    // Avoid excessively updating the position while scrolling.
    window.addEventListener('scroll', _.throttle(updatePosition, 100));

  • _.delay(func, wait, [args]): Invokes func after wait milliseconds.

    javascript
    _.delay(function(text) {
    console.log(text);
    }, 1000, 'later');
    // => Logs 'later' after one second.
    * _.memoize(func, [resolver]): Creates a function that memoizes the result of func.
    “`javascript
    const object = { ‘a’: 1, ‘b’: 2 };
    const other = { ‘c’: 3, ‘d’: 4 };

    const values = .memoize(.values);
    values(object);
    // => [1, 2]

    values(other);
    // => [3, 4]

    object.a = 2;
    values(object);
    // => [1, 2]
    “`

4. Utility Functions:

  • _.isEqual(value, other): Performs a deep comparison between two values to determine if they are equivalent.

    javascript
    const object1 = { 'a': 1 };
    const object2 = { 'a': 1 };
    console.log(_.isEqual(object1, object2)); // Output: true

  • _.isNil(value): Checks if value is null or undefined.

    javascript
    console.log(_.isNil(null)); // Output: true
    console.log(_.isNil(undefined)); // Output: true
    console.log(_.isNil(0)); // Output: false

  • _.cloneDeep(value): Creates a deep clone of value.

    javascript
    const objects = [{ 'a': 1 }, { 'b': 2 }];
    const deep = _.cloneDeep(objects);
    console.log(objects[0] === deep[0]); // Output: false (they are different objects in memory)

  • _.random([lower=0], [upper=1], [floating]): Produces a random number between the inclusive lower and upper bounds.

    javascript
    console.log(_.random(0, 5)); // Output: a random integer between 0 and 5
    console.log(_.random(1.2, 5.2)); // Output: a random floating-point number between 1.2 and 5.2
    * _.times(n, [iteratee=_.identity]):Invokes the iteratee n times, returning an array of the results of each invocation.
    javascript
    _.times(3, String);
    // => ['0', '1', '2']
    * _.uniqueId([prefix='']):Generates a unique ID.
    javascript
    _.uniqueId('contact_');
    // => 'contact_104'

Best Practices:

  • Import Only What You Need: As mentioned earlier, import only the specific Lodash functions you use to keep your bundle size small.
  • Favor Immutability: Many Lodash functions return new arrays or objects rather than modifying the originals. This promotes predictable behavior and avoids unexpected side effects. Be mindful of those functions that do mutate in place (like _.pull and _.remove).
  • Consider Native Alternatives: Modern JavaScript has incorporated many features similar to Lodash. Before using a Lodash function, check if a native alternative exists (e.g., Array.prototype.map, Array.prototype.filter, Array.prototype.reduce, Object.assign, spread syntax, etc.). Sometimes, the native approach is sufficiently clear and performant.
  • Read the Documentation: The official Lodash documentation (https://lodash.com/docs/) is excellent. It provides detailed explanations, examples, and performance notes for each function.

Conclusion:

Lodash is a powerful and versatile library that can significantly improve the quality and efficiency of your JavaScript code. By understanding its core concepts and utilizing its functions appropriately, you can write cleaner, more maintainable, and often more performant applications. This guide provides a solid foundation, but remember to explore the extensive Lodash documentation to fully leverage its capabilities.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top