Skip to content

Commit

Permalink
Create Rule “optimise-js-with-lodash/rule” (#6223)
Browse files Browse the repository at this point in the history
* Create Rule “optimise-js-with-lodash/rule”

* Update Rule “optimise-js-with-lodash/rule”

* Update rules/optimise-js-with-lodash/rule.md

* Update Rule “optimise-js-with-lodash/rule”

* Update Rule “optimise-js-with-lodash/rule”

* Apply suggestions from code review
  • Loading branch information
JackDevAU authored Aug 3, 2023
1 parent ab95b24 commit c881dd9
Showing 1 changed file with 85 additions and 0 deletions.
85 changes: 85 additions & 0 deletions rules/optimise-js-with-lodash/rule.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
---
type: rule
title: Do you optimise your JavaScript code with Lodash wisely and efficiently?
uri: optimise-js-with-lodash
authors:
- title: Jack Pettit
url: https://www.ssw.com.au/people/jack-pettit/
created: 2023-08-01T23:51:13.657Z
guid: 14157333-05fd-492d-a443-6eeb389a654a
---
Do you want to make your JavaScript code more efficient and easier to read? Lodash might be the utility library you need. But like any tool, knowing when and how to use it is crucial for the maintainability and performance of your project.

JavaScript is a powerful language, but it can sometimes be tricky to write clean, efficient code. This is where Lodash shines. Lodash is a JavaScript utility library providing handy methods for manipulating and combining arrays, objects, numbers, strings, among other data types.

<!--endintro-->

::: info
For optimal bundle size and tree-shaking capabilities in modern JavaScript applications, we recommend using [lodash-es](https://www.npmjs.com/package/lodash-es) over the standard lodash library.
:::

## The why and when to use lodash

Lodash simplifies JavaScript by easing the work with arrays, numbers, objects, strings, and more. Its API is straightforward, with hundreds of functions at your disposal for tasks from object manipulation to array sorting, filtering, and more. Lodash can make your code concise, readable, and thus more maintainable.

Lodash should be used when its methods provide a clearer, more efficient way of achieving your goals than the equivalent native JavaScript methods. It can save significant time and reduce errors in your code. However, Lodash should not be used indiscriminately.

Always consider the trade-off between adding an extra dependency to your project and achieving your goal using native JavaScript methods.


### A simple misuse of Lodash

Here's an example where using Lodash's `_.map` method is unnecessary:

::: bad
```js
const arr = [1, 2, 3];
const newArr = _.map(arr, function(n) { return n * 3; });
console.log(newArr);
// output: [3, 6, 9]
```
Figure: using Lodash's _.map method
:::

::: good
```js
const arr = [1, 2, 3];
const newArr = arr.map(n => n * 3);
console.log(newArr);
// output: [3, 6, 9]
```
Figure: using the native JavaScript Array.map() method
:::

In the above example it is more efficient to use the native implementation and would not require adding the Lodash dependency. Which adds bloat to the


### A good use of Lodash

Consider an example where you have an array of objects, and you need to find an object with specific property values.

::: bad
```js
const user = users.find(user => user.age === 1 && user.active === true);
console.log(user);
// output: { 'user': 'pebbles', 'age': 1, 'active': true }
```
Figure: native JavaScript find method
:::

::: good
```js
import { find } from 'lodash-es';

const users = [
{ 'user': 'barney', 'age': 36, 'active': true },
{ 'user': 'fred', 'age': 40, 'active': false },
{ 'user': 'pebbles', 'age': 1, 'active': true }
];

const user = find(users, { 'age': 1, 'active': true });
console.log(user);
// output: { 'user': 'pebbles', 'age': 1, 'active': true }

Figure: Lodash's _.find method
:::

0 comments on commit c881dd9

Please sign in to comment.