JavaScript Katana

Tutorial de Underscore.js: Simplifique Operações de Arrays e Objetos em JavaScript

Bibliotecas Externas e Gerenciamento de Módulos
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introdução

JavaScript é uma linguagem de programação essencial para o desenvolvimento web, mas trabalhar com arrays e objetos pode facilmente tornar o código complexo. Em particular, tarefas como filtragem e transformação de dados costumam exigir uma sintaxe mais limpa e eficiente.

É aí que entra a biblioteca JavaScript Underscore.js. Ao usar esta biblioteca, até mesmo operações de dados complexas podem ser escritas de forma simples e legível.

Por que o Underscore.js se destaca

  1. Código mais conciso
  • Operações que frequentemente se tornam verbosas em JavaScript puro podem ser expressas em apenas algumas linhas com o Underscore.js.
  1. Um conjunto rico de funções convenientes
  • Ele fornece muitos recursos, incluindo operações com arrays, manipulação de objetos e controle de funções.
  1. Leve e flexível
  • Como você pode usar apenas o que precisa, o impacto no desempenho pode ser mantido ao mínimo.

O que você aprenderá neste artigo

  • Como configurar o Underscore.js
  • Funções principais e exemplos práticos
  • Casos de uso reais que ajudam no desenvolvimento

2. O que é o Underscore.js?

Visão geral do Underscore.js

Underscore.js é uma biblioteca leve que facilita a manipulação de dados em JavaScript. Ela oferece uma ampla gama de funções convenientes projetadas principalmente para simplificar operações em arrays e objetos, e costuma ser descrita como um conjunto de utilitários JavaScript.

Os recursos padrão do JavaScript são poderosos, mas o código pode ficar extenso e a legibilidade pode sofrer. Usar o Underscore.js ajuda a resolver esses problemas, permitindo que você escreva código mais simples e fácil de manter.

Principais recursos

  1. Uma grande variedade de funções utilitárias
  • Ela fornece muitas funções, incluindo operações com arrays, operações com objetos e controle de funções.
  1. Código simples e legível
  • Comparado aos padrões tradicionais de JavaScript puro, reduz o boilerplate e melhora a legibilidade.
  1. Sem dependências
  • Como não depende de outras bibliotecas, pode ser usado de forma flexível em diversos ambientes.
  1. Leve e rápido
  • Seu tamanho pequeno e baixa sobrecarga o tornam adequado até mesmo para aplicações web modernas.

Underscore.js vs. Lodash

Uma biblioteca frequentemente comparada é o Lodash. O Lodash se baseia no Underscore.js e expande sua funcionalidade, com diferenças como as seguintes.

AspectUnderscore.jsLodash
FunctionalityIncludes many core utility functionsOffers an even broader feature set
Modular usagePartially supportedFully modularized
PerformanceFastFast and further optimized

Qual escolher depende dos requisitos do seu projeto, mas se você deseja uma biblioteca simples e leve, o Underscore.js é uma escolha forte.

Como o Underscore.js pode ajudar?

O Underscore.js é especialmente útil em situações como estas.

  1. Manipulação de dados em arrays
  • Permite código conciso para operações como filtragem e mapeamento.
  1. Manipulação de objetos
  • Você pode facilmente obter chaves/valores e mesclar elementos, entre outras tarefas.
  1. Controle de funções
  • Facilita a implementação de controles como “executar apenas uma vez” ou execução atrasada.
  1. Aproveitamento de helpers utilitários
  • Também pode ser usado para ordenação, randomização e até mesmo como um mecanismo de templating simples.

3. Instalação

Nesta seção, percorreremos passos concretos para adicionar o Underscore.js ao seu projeto. Você aprenderá tanto a abordagem via CDN quanto como instalá‑lo localmente baixando os arquivos.

1. Usando um CDN

Um CDN (Content Delivery Network) é uma forma prática de usar uma biblioteca simplesmente vinculando a um arquivo hospedado na internet. Você pode usar o Underscore.js adicionando o código a seguir dentro da tag <head> ou ao final da tag <body> no seu arquivo HTML.

Exemplo: Adicionando a um arquivo HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Underscore.jsの導入</title>
  <!-- Underscore.jsのCDNリンク -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Underscore.jsのテスト</h1>
  <script>
    // 動作確認コード
    const data = [1, 2, 3, 4, 5];
    const evenNumbers = _.filter(data, function(num) {
      return num % 2 === 0;
    });
    console.log(evenNumbers); // [2, 4]
  </script>
</body>
</html>

Quando você abrir este arquivo em um navegador, você pode confirmar que apenas números pares são exibidos no console das Ferramentas do Desenvolvedor.

2. Instalando com npm ou yarn

Usando npm ou yarn, você também pode usar o Underscore.js em um ambiente local ou em um projeto Node.js.

Instalar com npm

npm install underscore

Instalar com yarn

yarn add underscore

Exemplo de Importação em um Arquivo JavaScript

import _ from 'underscore';

const data = [10, 20, 30, 40];
const result = _.map(data, (num) => num * 2);
console.log(result); // [20, 40, 60, 80]

3. Baixando o Arquivo e Usando Localmente

  1. Vá para o site oficial ( underscorejs.org ).
  2. Baixe o arquivo JavaScript mais recente da seção “Download”.
  3. Coloque o arquivo baixado em uma pasta apropriada dentro do seu projeto (por exemplo, js/ ).
  4. Vincule-o no seu arquivo HTML usando uma tag script.
    <script src="js/underscore-min.js"></script>

4. Ao Usar um Empacotador de Módulos

Se você usar um empacotador de módulos como Webpack ou Parcel, você também pode integrar o Underscore.js facilmente.

Exemplo: Configuração do Webpack

  1. Instale-o com npm.
    npm install underscore
  1. Importe-o no seu arquivo JavaScript.
    import _ from 'underscore';
  1. Empacote-o conforme necessário e use-o no seu projeto.

Solução de Problemas

1. Se você vir “Uncaught ReferenceError: _ is not defined”

  • O Underscore.js pode não ter sido carregado corretamente. Verifique duas vezes o link do CDN ou o caminho de importação.

2. Se erros ocorrerem após a instalação com npm

  • Atualize o Node.js e o npm para as versões mais recentes.

4. Uso Básico

Nesta seção, introduziremos algumas das funções principais do Underscore.js junto com exemplos práticos. Essas funções são extremamente úteis para trabalhar eficientemente com arrays e objetos.

1. Iterando Sobre Arrays – _.each()

_.each() é uma função usada para iterar sobre arrays ou objetos.

Exemplo

const numbers = [1, 2, 3, 4, 5];

// Output each element to the console
_.each(numbers, function(num) {
  console.log(num);
});

Saída:

1  
2  
3  
4  
5

Pontos Principais:

  • Funciona não apenas com arrays, mas também com objetos.
  • O callback recebe o elemento, seu índice e a coleção inteira.

2. Mapeando Arrays – _.map()

_.map() aplica uma função a cada elemento de um array e retorna um novo array.

Exemplo

const numbers = [1, 2, 3, 4, 5];

// Double each element
const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);

Saída:

[2, 4, 6, 8, 10]

3. Encontrando o Primeiro Elemento Correspondente – _.find()

_.find() retorna o primeiro elemento que corresponde a uma condição dada.

Exemplo

const numbers = [1, 2, 3, 4, 5];

// Find the first element greater than or equal to 3
const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);

Saída:

3

4. Filtrando Todos os Elementos Correspondentes – _.filter()

_.filter() extrai todos os elementos que correspondem a uma condição e os retorna como um novo array.

Exemplo

const numbers = [1, 2, 3, 4, 5];

// Extract only even numbers
const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);

Saída:

[2, 4]

5. Embaralhando Elementos do Array – _.shuffle()

_.shuffle() reorganiza aleatoriamente os elementos de um array.

Exemplo

const numbers = [1, 2, 3, 4, 5];

// Randomly shuffle the array
const shuffled = _.shuffle(numbers);

console.log(shuffled);

Saída: (exemplo)

[3, 5, 1, 4, 2]

6. Removendo Elementos Duplicados – _.uniq()

_.uniq() remove valores duplicados de um array.

Exemplo

const numbers = [1, 2, 2, 3, 4, 4, 5];

// Remove duplicate elements
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);

Saída:

[1, 2, 3, 4, 5]

Resumo

Até agora, cobrimos as funções básicas do Underscore.js junto com exemplos práticos.

  • _.each() para iterar sobre elementos
  • _.map() para criar novos arrays
  • _.find() e _.filter() para extrair elementos correspondentes
  • _.shuffle() para randomizar elementos
  • _.uniq() para remover duplicatas

5. Uso Avançado

Nesta seção, exploraremos funções mais avançadas do Underscore.js e casos de uso práticos. Esses recursos permitem manipulação e análise de dados mais sofisticadas.

1. Ordenando Arrays – _.sortBy()

_.sortBy() ordena os elementos de um array com base em uma chave ou condição especificada.

Exemplo

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];

// Sort by age
const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);

Saída:

[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. Agrupando Arrays – _.groupBy()

_.groupBy() agrupa os elementos de um array com base em uma chave ou condição especificada.

Exemplo

const numbers = [1.1, 2.3, 2.4, 3.5, 4.7];

// Group by integer part
const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);

Saída:

{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. Agregando Dados – _.countBy()

_.countBy() é uma função conveniente para agregar dados.

Exemplo

const words = ['apple', 'banana', 'apricot', 'blueberry'];

// Count by first letter
const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);

Saída:

{
  a: 2,
  b: 2
}

Resumo

Nesta seção, cobrimos o uso mais avançado do Underscore.js.

  • _.sortBy() para ordenar arrays
  • _.groupBy() e _.countBy() para categorizar e agregar dados

6. Operações com Objetos

Nesta seção, apresentaremos funções úteis para trabalhar com objetos no Underscore.js. Essas funções ajudam a manipular propriedades e valores de objetos de forma eficiente.

1. Recuperando Chaves e Valores de Objetos

Obter Chaves – _.keys()

const person = { name: 'Alice', age: 25, city: 'Tokyo' };

const keys = _.keys(person);
console.log(keys);

Saída:

['name', 'age', 'city']

Obter Valores – _.values()

const values = _.values(person);
console.log(values);

Saída:

['Alice', 25, 'Tokyo']

2. Clonando Objetos – _.clone()

_.clone() cria uma cópia superficial de um objeto.

const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

clone.age = 30; // Modify the clone
console.log(original.age); // 25
console.log(clone.age);    // 30

Resumo

Nesta seção, explicamos como trabalhar com objetos usando Underscore.js.

7. Operações com Funções

Nesta seção, explicaremos como trabalhar efetivamente com funções usando Underscore.js. Esses recursos são úteis para controlar a execução e melhorar o desempenho.

1. Vinculando Funções – _.bind()

_.bind() vincula um objeto específico ao this quando uma função é executada.

Exemplo

const person = {
  name: 'Alice',
  greet: function(greeting) {
    return `${greeting}, my name is ${this.name}`;
  }
};

const boundGreet = _.bind(person.greet, person);

console.log(boundGreet('Hello')); // Hello, my name is Alice

2. Execução atrasada – _.delay()

_.delay() atrasa a execução de uma função por um período de tempo especificado.

Exemplo

_.delay(function(message) {
  console.log(message);
}, 2000, 'Displayed after 2 seconds');

Saída: (após 2 segundos)

Displayed after 2 seconds

3. Executar apenas uma vez – _.once()

_.once() garante que uma função seja executada apenas uma vez. Chamadas subsequentes são ignoradas.

Exemplo

const initialize = _.once(function() {
  console.log('Initialization complete');
});

initialize(); // Executed
initialize(); // Ignored

4. Memoização – _.memoize()

_.memoize() armazena em cache o resultado de uma função e evita recalcular quando chamada novamente com os mesmos argumentos.

Exemplo

const factorial = _.memoize(function(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
});

console.log(factorial(5)); // Calculated
console.log(factorial(5)); // Retrieved from cache

5. Limitar a frequência de execução – _.throttle()

_.throttle() limita a frequência com que uma função pode ser executada.

Exemplo

const log = _.throttle(function() {
  console.log('Processing...');
}, 2000);

// Simulate continuous events
setInterval(log, 500); // Executes only once every 2 seconds

Resumo

Nesta seção, exploramos utilitários relacionados a funções no Underscore.js.

  • _.bind() para fixar o contexto this
  • _.delay() para execução atrasada
  • _.once() para execução única
  • _.memoize() para cache de resultados
  • _.throttle() para otimizar a frequência de execução

8. Funções utilitárias

Nesta seção, apresentaremos funções utilitárias convenientes fornecidas pelo Underscore.js. Essas funções são úteis em diversas situações, incluindo manipulação de dados, geração aleatória e templating.

1. Gerar números aleatórios – _.random()

_.random() gera um número inteiro ou de ponto flutuante aleatório dentro de um intervalo especificado.

Exemplo

console.log(_.random(1, 10)); // Integer
console.log(_.random(1, 10, true)); // Floating-point

2. Verificar valores vazios – _.isEmpty()

_.isEmpty() verifica se um array, objeto ou string está vazio.

Exemplo

console.log(_.isEmpty([]));            // true
console.log(_.isEmpty({}));            // true
console.log(_.isEmpty(''));            // true
console.log(_.isEmpty([1, 2, 3]));     // false

3. Criar templates – _.template()

_.template() é usado para criar templates de strings.

Exemplo

const template = _.template('Hello, <%= name %>!');
console.log(template({ name: 'Alice' }));

Saída:

Hello, Alice!

Resumo

Nesta seção, abordamos funções utilitárias no Underscore.js.

  • _.random() para gerar números aleatórios
  • _.isEmpty() para verificar o estado dos dados
  • _.template() para templating simples

9. Conclusão

Neste artigo, cobrimos o Underscore.js desde o uso básico até técnicas mais avançadas. Esta biblioteca é extremamente útil para simplificar a manipulação de dados em JavaScript e escrever código eficiente e sustentável.

Principais aprendizados

  1. Uso básico – Aprendeu funções principais para manipulação de arrays e objetos.
  2. Uso avançado – Explorou agrupamento, ordenação e agregação.
  3. Utilitários de funções – Cobriu controle de execução e memoização.
  4. Auxiliares utilitários – Introduziu geração aleatória e templating.

Considerações finais

Underscore.js é uma ferramenta poderosa que torna o desenvolvimento em JavaScript mais eficiente e acessível. Use este artigo como referência e experimente aplicá-lo em seus próprios projetos. A prática contínua ajudará a aprimorar ainda mais suas habilidades.

Perguntas Frequentes (FAQ)

Q1: O Underscore.js é gratuito para uso?

R: Sim. O Underscore.js é distribuído sob a licença MIT e pode ser usado gratuitamente, inclusive em projetos comerciais.

Q2: Qual a diferença entre Underscore.js e Lodash?

R: O Underscore.js é uma biblioteca utilitária simples e leve. O Lodash se baseia no Underscore.js, adicionando recursos extras, otimizações de desempenho e uma modularização mais robusta. Escolha com base nos requisitos do seu projeto.

Q3: O Underscore.js é desnecessário com o JavaScript moderno (ES6+)?

R: O ES6+ oferece muitas funcionalidades nativas para operações com arrays e objetos, mas o Underscore.js ainda é útil para compatibilidade entre navegadores e sintaxe concisa, especialmente em projetos legados.

Q4: Que tipos de projetos são adequados para o Underscore.js?

R: Ele funciona bem em projetos pequenos a médios e em aplicações onde a simplicidade do código é importante. É particularmente útil quando você precisa de utilitários leves sem dependências pesadas.

Q5: Como posso instalar o Underscore.js?

R: Você pode instalá‑lo usando qualquer um dos métodos a seguir.

  1. Adicionar via CDN:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
  1. Instalar com npm:
    npm install underscore
  1. Instalar com yarn:
    yarn add underscore

Escolha o método que melhor se adapta ao seu ambiente.

Q6: Onde posso encontrar a documentação oficial?

R: Você pode encontrá‑la no site oficial:
Site Oficial do Underscore.js

Q7: O Underscore.js pode ser usado em projetos de grande escala?

R: Sim, pode. Contudo, para projetos grandes, o Lodash costuma ser recomendado devido à sua estrutura modular e otimizações adicionais. O Underscore.js continua ideal para casos de uso leves.

Q8: Existem alternativas para controle de execução de funções?

R: Sim. O JavaScript moderno oferece alternativas como setTimeout(), setInterval(), Promise e async/await. No entanto, funções do Underscore.js como _.throttle() e _.debounce() permitem implementações mais limpas e concisas.

Q9: Existem armadilhas ao usar o Underscore.js?

R:

  1. Evite dependências desnecessárias quando os recursos nativos do JavaScript são suficientes.
  2. Mantenha as versões atualizadas para minimizar riscos de segurança.
  3. Considere migrar para o Lodash dependendo da escala do projeto.

Q10: O Underscore.js é recomendado como motor de templates?

R: _.template() é conveniente para casos de uso simples, mas para necessidades de templating mais avançadas, bibliotecas dedicadas como Handlebars.js ou EJS são recomendadas.

広告