[ad_1]

How to properly include specific features of the popular lodash library in your JavaScript web project without having to import the entire library.

Posted in: JavascriptCoding

Lodash is a very popular JavaScript library that offers many useful functions for working with strings, arrays, and objects in your web projects.

Some of Lodash’s features are now natively supported in modern JavaScript, but the library still adds value and saves you time.

For example, if you want to generate a random number between 1 and 10, _.random(1, 10) The function is a good way to do it, similar to the RANDBETWEEN Google Sheets feature. He _.shuffle() The feature can help you quickly mix a number of values.

The right way to include Lodash

If your JavaScript project requires Lodash, you can include the library in your code in 4 different ways.

1. Import the entire lodash library

import _ from "lodash";

const capitalizeFirstName = (name) => {
  const result = _.capitalize(name);
  console.log(response);
};

2. Import with alias with name

import { capitalize } from "lodash";

const capitalizeFirstName = (name) => {
  const result = capitalize(name);
  console.log(response);
};

3. Import specific methods by path

import capitalize from "lodash/capitalize";

const capitalizeFirstName = (name) => {
  const result = capitalize(name);
  console.log(response);
};

4. Use lodash packages by method

import capitalize from "lodash.capitalize";

const capitalizeFirstName = (name) => {
  const result = capitalize(name);
  console.log(response);
};

Which import method would result in the lowest package size?

Option no. 1 will include the entire lodash library in your outgoing package and is not recommended. The second option will also import the entire library and should be avoided.

Method no. 4 of importing lodash packages by method will result in the lowest package size, but it is not recommended because this approach will become obsolete in future versions of lodash.

Approach number 3 is recommended as it will only import the specific Lodash methods you need and will also reduce the package size.

Additional tip: memorization with Lodash

The Lodash library includes a method of memorization called _.memoize() which is useful for expensive function cache.

import memoize from "lodoash/memoize";

const expensiveFunction = (input) => {
  return input * input;
};

const memoizedFunction = memoize(expensiveFunction);

console.log(memoizedFunction(5)); 
console.log(memoizedFunction(5)); 

However, there is a big memory limitation with Lodash: it will only use the first parameter of the function as a cache key and ignore the rest. Let me explain.

const add = (a, b) => {
  return a + b;
};

const memoizedAdd = _.memoize(add);
console.log(memoizedAdd(1, 2)); 
console.log(memoizedAdd(1, 3)); 

As you may have noticed, the second parameter of the function is ignored and therefore the result is incorrect as it returned the value of the cache based on the first parameter.

Memoization with multiple parameters

To resolve this issue, you can use an alternative memory library such as fast-memoize or you can add a resolution function to the memorization method as shown below.

const multiply = (a, b) => {
  return a * b;
};

const resolver = (...args) => {
  return JSON.stringify(args);
};

const memoizedMultiply = _.memoize(multiply, resolver);

console.log(memoizedMultiply(1, 2)); 
console.log(memoizedMultiply(1, 3)); 
console.log(memoizedMultiply(1, 2)); 

Leave a Reply

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