-
Notifications
You must be signed in to change notification settings - Fork 174
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create Rule “optimise-js-with-lodash/rule” (#6223)
* 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
Showing
1 changed file
with
85 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
::: |