Melhorando a manutenção da sua aplicação com 5 métodos Lodash
O que é Lodash?
O Lodash é uma biblioteca JavaScript que disponibiliza muitas funções utilitárias para tarefas com matrizes, números, objetos, strings, usando um paradigma de programação funcional, ele se baseia na antiga biblioteca underscore.js. Se você nunca ouviu falar ou usou o Lodash, aqui vai uma apresentação dessa biblioteca, cheia de exemplos bem parecidos a problemas comuns que enfrentamos diariamente no desenvolvimento de um projeto JavaScript.
Nesse post vou mostrar como o Lodash pode ser ótimo para iteração de arrays, objetos e strings, manipulação e teste de valores. Como o Lodash possui várias funções utilitárias embutidas, a codificação em JavaScript fica mais fácil e limpa. Em vez de escrever funções comuns, repetidamente, a tarefa pode ser realizada com apenas uma linha de código.
Em seguida vamos entender como e quando usá-lo, e aplicá-lo com exemplos práticos.
Como usar?
É possível instalar o Lodash de três formas, via browser, npm ou node.js.
No browser:
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
Usando npm:
$ npm i --save lodash
Via Node.js:
// Carregar o Lodash inteiro.
var _ = require('lodash');
// Carregar só as funções principais.
var _ = require('lodash/core');
// Carregar só as funções feitas para programação funcional.
var fp = require('lodash/fp');
// Carregar por categorias.
var array = require('lodash/array');
var object = require('lodash/fp/object');
// Carregar funções específicas, para projetos que usam webpack, browserify, etc.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');
É muito simples fazer a instalação e usá-lo, mas, antes da prática, precisamos entender quando usar essas funções utilitárias e identificar que, talvez, uma função nativa seja tão útil e clara quanto o Lodash.
Quando usar Lodash ou função nativa javascript?
Lodash é uma boa ferramenta se você tiver algoritmos mais complexos. Ele é mais legível e mantém a padronização do código. O Lodash pode ser muito útil pois tem funções para muitas soluções que não são tão fáceis de implementar no ES6 nativo.
A padronização de código ajuda muito na colaboração entre equipes, principalmente em uma linguagem que tem tantas formas de se fazer a mesma coisa. Abaixo temos exemplos de iteração sobre um objeto no ES6, com várias abordagens:
for (let key in obj) { console.log(obj[key]) }
for (let key of Object.keys(obj)) { console.log(obj[key]) }
Object.keys(obj).forEach((key) => { console.log(obj[key]) })
Com o Lodash, há um _.forEach unificado, para array e objeto:
_.forEach(obj, (value, key) => { console.log(value) })
Para tarefas simples, é recomendado o ES6. Abaixo temos exemplos simples dos casos nos quais usar funções nativas pode ser mais fácil:
_.map([1, 2, 3], (i) => i + 1)
_.reduce([1, 2, 3], (sum, i) => sum + i, 0)
_.filter([1, 2, 3], (i) => i > 1)
_.forEach([1, 2, 3], (i) => { console.log(i) })
// becomes
[1, 2, 3].map((i) => i + 1)
[1, 2, 3].reduce((sum, i) => sum + i, 0)
[1, 2, 3].filter((i) => i > 1)
[1, 2, 3].forEach((i) => { console.log(i) })
Após entender como instalar e quando usar o Lodash, vamos praticar usando algumas funções úteis. Essa é uma forma de começar a pensar de uma maneira mais funcional.
5 exemplos úteis de Lodash
xor/xorBy
O método _.xor() compara duas listas e retorna a diferença entre elas, ou seja, retorna todos os elementos que são diferentes entre as duas listas. Isso é muito útil para tirar um elemento repetido ou adicionar um elemento que é único em uma lista. O exemplo abaixo mostra um cenário comum, imagine que temos uma lista de produtos com id, nome e cor e queremos filtrar essa lista por produtos na cor vermelha. Vamos usar uma lista vazia e a função xor para salvar o filtro ativo:
<script>
let selectedFilters = [];
function toggleFilter(filter){
selectedFilters = _.xor(selectedFilters, [filter]);
console.log(selectedFilters)
}
</script>
<input type="checkbox" onClick={toggleFilter('red')}> red</input>
Para cenários mais complexos, como comparar objetos, é recomendável usar o método .xorBy() que, assim como o .xor() , também retorna a diferença entre listas. Exceto que o _.xorBy aceita um terceiro parâmetro, que cria o critério pela qual eles são comparados.
filter
O método Lodash _.filter() permite que você encontre vários itens do mesmo tipo em uma coleção. O retorno desse método é uma lista de resultados.
const productList = [
{ name: 'pencil', isRequired: true },
{ name: 'book', isRequired: true },
{ name: 'map', isRequired: false }
];
const requiredProducts = _.filter(productList, product => { return product.isRequired; });
console.log(requiredProducts);
// Output
// [{ name: 'pencil', isRequired: true }, { name: 'book', isRequired: true }]
find
O método _.find() itera sobre os elementos de uma coleção e retorna o primeiro elemento para o qual o predicado retorna verdadeiro.
const productList = [
{ name: 'backpack', amount: 1 },
{ name: 'paint', amount: 7 },
{ name: 'book', amount: 10 },
{ name: 'scissors', amount: 5 },
{ name: 'glue', amount: 3 },
{ name: 'pencil', amount: 8 },
{ name: 'eraser', amount: 3 },
];
const pencil = _.find(productList, {name: 'pencil'});
console.log(pencil);
const greaterAmount = _.find(productList, (product) => { return product.amount > 5 });
console.log(greaterAmount);
// Output
// {"name": "pencil", "amount": 8}
// {"name": "paint", "amount": 7}
orderBy
O método _.orderBy() permite que as ordens de classificação das iterações sejam classificadas. Se as ordens não forem especificadas, todos os valores serão classificados em ordem crescente, caso contrário, os valores são retornados em uma ordem de “desc” para decrescente ou “asc” para crescente.
const productList = [
{ 'name': 'pencil', 'price': 20 },
{ 'name': 'book', 'price': 45 },
{ 'name': 'paint', 'price': 15 },
{ 'name': 'eraser', 'price': 8 }
];
const orderedProducts = _.orderBy(productList, ['price'], ['asc']);
console.log(orderedProducts);
// Output
// [{"name": "eraser", "price": 8}, {"name": "paint", "price": 15}, {"name": "pencil", "price": 20}, {"name": "book", "price": 45}]
debounce
O método _.debounce invocará uma função após um determinado período de tempo desde a última vez em que foi invocada.
const search = (() => {
console.log('Searching...');
})
const inputSearch = document.getElementById('search');
// search function debounced after 2 seconds
inputSearch.addEventListener('keyup', _.debounce(search, 2000));
Neste exemplo, a função search será invocada após 2 segundos. Assim teremos um tempo para que o usuário termine de digitar e então se faça a busca. Essa função pode servir para uma chamada ajax por exemplo.
Conclusão
Espero que esse post tenha sido um bom incentivo para você começar a pensar em Lodash como uma possibilidade para o seu projeto. Vimos como instalá-lo, praticamos e compreendemos como e por que usar essa biblioteca. No fim das contas, concluímos que ele pode ser uma ferramenta muito útil quando sabemos avaliar os cenários adequados, uma vez que é uma boa forma de economizar tempo e, principalmente, obter clareza lógica, deixando um código limpo e funcional.
Gostaria de pontuar algo interessante sobre esse post? Entre em contato com a gente!
