Tableless

Busca Menu

Lodash ou Underscore? Talvez, nenhum!

Seja o primeiro a comentar por

Durante os últimos anos, bibliotecas como Underscore e lodash, encontraram seu espaço no cinto de utilidades de muitos programadores JavaScript.

Embora essas bibliotecas ajudem a escrever e até facilitar a sua vida em partes do seu código, não necessariamente, esse código, fica simples ou de fácil entendimento. Quem estiver lendo ou mantendo o código será obrigado a, além de conhecer a linguagem e sua biblioteca padrão, também conhecer a biblioteca de utilitários que está sendo usada.

Bibliotecas vem e vão, e todo mundo tem sua favorita. Qual é a ordem de argumentos para essa função map()? De qual biblioteca que essa função vem? Underscore (o eterno favorito), lodash (o versátil e mais rápido irmão mais novo), Ramda (o primo que tem uma abordagem mais funcional, que tem todos os argumentos começando do lado direito), ou qualquer abstração legal que você encontrar hoje em dia?

Se você estiver em um time, quais bibliotecas favoritas você escolheria? E se eu te disser, que você pode escolher a biblioteca padrão do JavaScript?

Quando você escreve código usando a biblioteca padrão de funções, você está tornando ele mais fácil para usar, entender e manter futuramente (aliás, pode ser você essa pessoa, daqui uns meses, quem sabe?).

Tudo bem, pode ser que você tenha que digitar um pouco mais para atingir a mesma funcionalidade, mas, desde quando, a velocidade que escrevemos código, é o gargalo para criar e manter um bom software? 😉

É mais fácil de recuperar uma não-abstração do que uma abstração errada – Sebastian Markbåge

É muito mais fácil refatorar código verboso com poucas abstrações, do que códigos resumidos com uma abstração errada. Quando você começa a ver os padrões no seu código, repetidos por toda a parte, é hora de abstrair, você tem uma idéia de qual abstração correta você deve fazer, e provavelmente, vai acabar criando uma que valha a pena, mesmo contando com toda a sobrecarga que toda abstração adiciona.

JavaScript está evoluindo, e as novas edições, ES2015 e ES2016 (antes conhecidas como ES6 e ES7) trazem novas possibilidades, e ferramentas como Babel, deixam isso ainda mais fácil de se usar hoje em dia. Com isso em mãos, essas bibliotecas de funções utilitárias ficam obsoletas.

Ótimos recursos para aprender mais sobre as novas funções, a página em inglês, Learn ES2015 no site do Babel e o livro, em inglês, Understanding ECMAScript 6, escrito pelo Nicholas C. Zakas. Aprender e utilizar todos os poderosos recursos do JavaScript te dá uma segurança futura, pois elas terão vida mais longa do que a biblioteca do momento.

Mas não estou dizendo que não há espaço para bibliotecas de utilitários. Eu só estou dizendo que muitas das funções que eram essenciais para nós sermos produtivos quando escrevíamos ES3, podem ser escritas nativamente usando os recursos padrões do JavaScript.

Talvez você não precise de lodash ou Underscore.

Exemplos

Esses exemplos demonstram funcionalidades do ES5.1, ES2015 e ES2016, ficaram tão simples que você não precisa de uma biblioteca externa mais.

O que eu preciso para usá-los hoje em dia?

ES5 é suportado atualmente em todos os navegadores e no Node.js. Exemplos usando ES2015 e ES2016, podem ser compilados para ES5 usando Babel. É muito simples integrar o Babel no seu sistema, quase todas as ferramentas de automação hoje em dia, tem uma integração oficial. Se você precisar dar suporte para navegadores antigos (IE8), você pode utilizar a biblioteca es-shim, que traz quase todos os polyffils para ES5.

Arrays

Iteração

Underscore

_.each(array, fn)

ES5.1

array.forEach(fn)

Map

Underscore

_.map(array, fn)

ES5.1

array.map(fn)

Usar uma função para acumular o valor de um array (da esquerda para a direita)

Underscore

_.reduce(array, fn, init)

ES5.1

array.reduce(fn, init)

Usar uma função para acumular o valor de um array (da direita para a esquerda)

Underscore

_.reduceRight(array, fn, init)

ES5.1

array.reduceRight(fn, init)

Testar se todos os elementos de um array passam em uma operação

Underscore

_.every(array, fn)

ES5.1

array.every(fn)

Testar se um dos elementos de um array passam em uma operação

Underscore

_.some(array, fn)

ES5.1

array.some(fn)

Achar um valor em um array

Underscore

_.find(array, fn)

ES2015

array.find(fn)

Pegar uma propriedade de cada elemento do array

Underscore

_.pluck(array, prop)

ES2015

array.map(value => value[prop])

Verificar se o array contém o elemento

Underscore

_.includes(array, el)

ES2016

array.includes(el)

Convertendo um objeto array-like em array

Underscore

_.toArray(arguments)

ES2015

[...arguments]

Criando uma cópia do array e removendo todos os valores falsos

Underscore

_.compact(array)

ES5.1

array.filter(Boolean)

ES2015

array.filter(x => !!x)

Criando uma cópia do array e removendo itens duplicados

Underscore

_.uniq(array)

ES2015

[...new Set(array)]

Achando o index de um valor no array

Underscore

_.indexOf(array, val)

ES5.1

array.indexOf(val)

Achar o index de um valor no array baseado em uma operação

Underscore

_.findIndex([4, 6, 7, 12], numPrimo);

ES2015

[4, 6, 7, 12].findIndex(numPrimo);

Criar um array com N números, começando do X

Underscore

_.range(x, x + n)

ES2015

Array.from(Array(n), (v, k) => k + x)

Objetos

Nomes de todas as propriedades enumeráveis do próprio objeto

Underscore

_.keys(object)

ES5.1

Object.keys(object)

Número de chaves em um objeto

Underscore

_.size(object)

ES5.1

Object.keys(object).length

Nome de todas as propriedades enumeráveis em array

Underscore

_.allKeys(object)

ES2015

[...Reflect.enumerate(object)]

Valores

Underscore

_.values(object)

ES2015

Object.keys(object).map(key => object[key])

Criar um novo objeto passando o prototype e propriedades

Underscore

_.create(proto, prop)

ES2015

Object.assign(Object.create(proto), prop)

Criar um novo objeto a partir da mescla de suas propriedades

Underscore

_.assign({}, source, { a: false })

ES2015

Object.assign({}, source, { a: false })

ES2016

{ ...source, a: false }

Clonando um objeto e suas propriedades (cópia não recursiva de propriedades)

Underscore

_.extendOwn({}, object)

ES2016

{ ...object }

Verificando se o dado objeto é um array

Underscore

_.isArray(object)

ES5.1

Array.isArray(object)

Verificando se o objeto é um número finito

Underscore

_.isNumber(object) && _.isFinite(object)

ES2015

Number.isFinite(object)

Funções

Vinculando funções a novos escopos (ou binding)

Underscore

foo(_.bind(function () {
  this.bar();
}, this));
foo(_.bind(object.fun, object));

ES2015

foo(() => { this.bar(); });
foo(object.fun.bind(object));

ES2016

foo(() => { this.bar(); });
foo(::object.fun);

Utilidades

Funções de identidade

Underscore

_.identity

ES2015

value => value

Uma função que retorna um valor

Underscore

_.constant(value)

ES2015

() => value

Funções vazias

Underscore

_.noop

ES2015

() => {}

Pegar o valor to tempo em milisegundos

Underscore

_.now()

ES5.1

Date.now()

Template

Underscore

var greeting = _.template("hello <%= name %>");
greeting({ name: 'moe' });

ES2015

const greeting = ({ name }) => `hello ${name}`;
greeting({ name: 'moe' });

Resumindo

Cada um dos exemplos demonstra as possibilidades que os novos padrões do JavaScript traz para nosso código do dia-a-dia. Re-aprenda o JavaScript de hoje!

Se interessou pelo assunto? Quer ver mais posts desse tipo? Alguma sugestão?

Deixe sua opinião aqui nos comentários ou mande um ping no twitter.

Artigo traduzido e adaptado de You Might Not Need Underscore escrito por Ville Immonen

Publicado no dia