JavaScript Katana

Tutorial de Underscore.js: Simplifica las operaciones de arrays y objetos en JavaScript

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

1. Introducción

JavaScript es un lenguaje de programación esencial para el desarrollo web, pero trabajar con arrays y objetos puede complicar rápidamente el código. En particular, tareas como el filtrado y la transformación de datos a menudo requieren una sintaxis más limpia y eficiente.

Ahí es donde entra la biblioteca de JavaScript Underscore.js. Al usar esta biblioteca, incluso las operaciones de datos complejas pueden escribirse de forma simple y legible.

Por qué Underscore.js destaca

  1. Código más conciso
  • Operaciones que a menudo se vuelven verbosas en JavaScript puro pueden expresarse en solo unas pocas líneas con Underscore.js.
  1. Un conjunto rico de funciones convenientes
  • Proporciona muchas características, incluidas operaciones con arrays, manejo de objetos y control de funciones.
  1. Ligero y flexible
  • Como solo utilizas lo que necesitas, el impacto en el rendimiento puede mantenerse al mínimo.

Qué aprenderás en este artículo

  • Cómo configurar Underscore.js
  • Funciones principales y ejemplos prácticos
  • Casos de uso reales que facilitan el desarrollo

2. ¿Qué es Underscore.js?

Visión general de Underscore.js

Underscore.js es una biblioteca ligera que facilita la manipulación de datos en JavaScript. Ofrece una amplia gama de funciones convenientes diseñadas principalmente para simplificar operaciones con arrays y objetos, y a menudo se describe como un kit de herramientas de utilidad para JavaScript.

Las características estándar de JavaScript son potentes, pero el código puede volverse extenso y la legibilidad puede verse afectada. Usar Underscore.js ayuda a abordar estos problemas, permitiéndote escribir código más simple y mantenible.

Características clave

  1. Una gran variedad de funciones de utilidad
  • Proporciona muchas funciones, incluidas operaciones con arrays, operaciones con objetos y control de funciones.
  1. Código simple y legible
  • En comparación con los patrones tradicionales de JavaScript puro, reduce el código repetitivo y mejora la legibilidad.
  1. Sin dependencias
  • Al no depender de otras bibliotecas, puedes usarla de forma flexible en muchos entornos.
  1. Ligera y rápida
  • Su pequeño tamaño y bajo consumo de recursos la hacen adecuada incluso para aplicaciones web modernas.

Underscore.js vs. Lodash

Una biblioteca comparada frecuentemente es Lodash. Lodash se basa en Underscore.js y amplía su funcionalidad, con diferencias como las siguientes.

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

Cuál elijas depende de los requisitos de tu proyecto, pero si buscas una biblioteca simple y ligera, Underscore.js es una opción sólida.

¿Cómo puede ayudar Underscore.js?

Underscore.js es especialmente útil en situaciones como estas.

  1. Manipulación de datos en arrays
  • Permite escribir código conciso para operaciones como filtrado y mapeo.
  1. Manipulación de objetos
  • Puedes obtener fácilmente claves/valores y combinar elementos, entre otras tareas.
  1. Control de funciones
  • Facilita la implementación de controles como “ejecutar solo una vez” o ejecución retardada.
  1. Aprovechamiento de utilidades auxiliares
  • También puedes usarla para ordenar, aleatorizar e incluso como un motor de plantillas sencillo.

3. Instalación

En esta sección, recorreremos los pasos concretos para añadir Underscore.js a tu proyecto. Aprenderás tanto el enfoque mediante CDN como la instalación local descargando los archivos.

1. Usando un CDN

Un CDN (Red de Distribución de Contenidos) es una forma cómoda de usar una biblioteca simplemente enlazando a un archivo alojado en internet. Puedes usar Underscore.js añadiendo el siguiente código dentro de la etiqueta <head> o al final de la etiqueta <body> en tu archivo HTML.

Ejemplo: Añadiendo a un archivo 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>

Al abrir este archivo en un navegador, puedes confirmar que solo se muestran números pares en la consola de Herramientas de desarrollo.

2. Instalación con npm o yarn

Usando npm o yarn, también puedes utilizar Underscore.js en un entorno local o en un proyecto Node.js.

Instalar con npm

npm install underscore

Instalar con yarn

yarn add underscore

Ejemplo de importación en un archivo 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. Descargar el archivo y usarlo localmente

  1. Ve al sitio web oficial (underscorejs.org).
  2. Descarga el archivo JavaScript más reciente de la sección “Download”.
  3. Coloca el archivo descargado en una carpeta adecuada dentro de tu proyecto (p. ej., js/).
  4. Enlázalo en tu archivo HTML usando una etiqueta <script>.
    <script src="js/underscore-min.js"></script>

4. Cuando se usa un empaquetador de módulos

Si utilizas un empaquetador de módulos como Webpack o Parcel, también puedes integrar Underscore.js fácilmente.

Ejemplo: configuración de Webpack

  1. Instálalo con npm.
    npm install underscore
  1. Importa el módulo en tu archivo JavaScript.
    import _ from 'underscore';
  1. Empaqueta según sea necesario y úsalo en tu proyecto.

Solución de problemas

1. Si ves “Uncaught ReferenceError: _ is not defined”

  • Es posible que Underscore.js no se haya cargado correctamente. Verifica tu enlace CDN o la ruta de importación.

2. Si aparecen errores después de instalar con npm

  • Actualiza Node.js y npm a sus versiones más recientes.

4. Uso básico

En esta sección, presentaremos algunas de las funciones principales de Underscore.js junto con ejemplos prácticos. Estas funciones son extremadamente útiles para trabajar de forma eficiente con arreglos y objetos.

1. Recorrer arreglos – _.each()

_.each() es una función utilizada para iterar sobre arreglos u objetos.

Ejemplo

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

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

Salida:

1  
2  
3  
4  
5

Puntos clave:

  • Funciona no solo con arreglos, sino también con objetos.
  • La función de devolución de llamada recibe el elemento, su índice y la colección completa.

2. Mapear arreglos – _.map()

_.map() aplica una función a cada elemento de un arreglo y devuelve un nuevo arreglo.

Ejemplo

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

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

console.log(doubled);

Salida:

[2, 4, 6, 8, 10]

3. Encontrar el primer elemento que coincida – _.find()

_.find() devuelve el primer elemento que cumple una condición dada.

Ejemplo

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);

Salida:

3

4. Filtrar todos los elementos que coincidan – _.filter()

_.filter() extrae todos los elementos que cumplen una condición y los devuelve en un nuevo arreglo.

Ejemplo

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

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

console.log(evens);

Salida:

[2, 4]

5. Mezclar los elementos de un arreglo – _.shuffle()

_.shuffle() reorganiza aleatoriamente los elementos de un arreglo.

Ejemplo

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

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

console.log(shuffled);

Salida: (ejemplo)

[3, 5, 1, 4, 2]

6. Eliminación de elementos duplicados – _.uniq()

_.uniq() elimina los valores duplicados de un arreglo.

Ejemplo

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

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

console.log(uniqueNumbers);

Salida:

[1, 2, 3, 4, 5]

Resumen

Hasta ahora, hemos cubierto las funciones básicas de Underscore.js junto con ejemplos prácticos.

  • _.each() para iterar sobre los elementos
  • _.map() para crear nuevos arreglos
  • _.find() y _.filter() para extraer los elementos coincidentes
  • _.shuffle() para aleatorizar los elementos
  • _.uniq() para eliminar duplicados

5. Uso avanzado

En esta sección, exploraremos funciones más avanzadas de Underscore.js y casos de uso prácticos. Estas características permiten una manipulación y análisis de datos más sofisticados.

1. Ordenar arreglos – _.sortBy()

_.sortBy() ordena los elementos del arreglo según una clave o condición especificada.

Ejemplo

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);

Salida:

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

2. Agrupar arreglos – _.groupBy()

_.groupBy() agrupa los elementos del arreglo según una clave o condición especificada.

Ejemplo

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);

Salida:

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

3. Agregar datos – _.countBy()

_.countBy() es una función conveniente para agregar datos.

Ejemplo

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

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

console.log(counts);

Salida:

{
  a: 2,
  b: 2
}

Resumen

En esta sección, cubrimos un uso más avanzado de Underscore.js.

  • _.sortBy() para ordenar arreglos
  • _.groupBy() y _.countBy() para categorizar y agregar datos

6. Operaciones con objetos

En esta sección, presentaremos funciones útiles para trabajar con objetos en Underscore.js. Estas funciones ayudan a manejar de forma eficiente las propiedades y valores de los objetos.

1. Recuperar claves y valores de objetos

Obtener claves – _.keys()

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

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

Salida:

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

Obtener valores – _.values()

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

Salida:

['Alice', 25, 'Tokyo']

2. Clonar objetos – _.clone()

_.clone() crea una copia superficial de un 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

Resumen

En esta sección, explicamos cómo trabajar con objetos usando Underscore.js.

7. Operaciones con funciones

En esta sección, explicaremos cómo trabajar eficazmente con funciones usando Underscore.js. Estas características son útiles para controlar la ejecución y mejorar el rendimiento.

1. Vincular funciones – _.bind()

_.bind() vincula un objeto específico a this cuando se ejecuta una función.

Ejemplo

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. Ejecución diferida – _.delay()

_.delay() retrasa la ejecución de una función un tiempo especificado.

Ejemplo

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

Salida: (después de 2 segundos)

Displayed after 2 seconds

3. Ejecutar solo una vez – _.once()

_.once() garantiza que una función se ejecute solo una vez. Las llamadas posteriores se ignoran.

Ejemplo

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

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

4. Memoización – _.memoize()

_.memoize() almacena en caché el resultado de una función y omite el recálculo cuando se llama nuevamente con los mismos argumentos.

Ejemplo

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. Regulación de la ejecución de funciones – _.throttle()

_.throttle() limita la frecuencia con la que una función puede ejecutarse.

Ejemplo

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

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

Resumen

En esta sección, exploramos utilidades relacionadas con funciones en Underscore.js.

  • _.bind() para fijar el contexto this
  • _.delay() para ejecución retardada
  • _.once() para ejecución única
  • _.memoize() para almacenar resultados en caché
  • _.throttle() para optimizar la frecuencia de ejecución

8. Funciones de utilidad

En esta sección, presentaremos funciones de utilidad convenientes que proporciona Underscore.js. Estas funciones son útiles en muchas situaciones, incluyendo el manejo de datos, generación aleatoria y plantillas.

1. Generación de números aleatorios – _.random()

_.random() genera un número entero o de punto flotante aleatorio dentro de un rango especificado.

Ejemplo

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

2. Verificación de valores vacíos – _.isEmpty()

_.isEmpty() verifica si un arreglo, objeto o cadena está vacío.

Ejemplo

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

3. Creación de plantillas – _.template()

_.template() se usa para crear plantillas de texto.

Ejemplo

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

Salida:

Hello, Alice!

Resumen

En esta sección, cubrimos funciones de utilidad en Underscore.js.

  • _.random() para generar números aleatorios
  • _.isEmpty() para verificar el estado de los datos
  • _.template() para plantillas simples

9. Conclusión

En este artículo, cubrimos Underscore.js desde su uso básico hasta técnicas más avanzadas. Esta biblioteca es extremadamente útil para simplificar la manipulación de datos en JavaScript y escribir código eficiente y mantenible.

Puntos clave

  1. Uso básico – Aprendimos funciones esenciales para la manipulación de arreglos y objetos.
  2. Uso avanzado – Exploramos agrupamiento, ordenamiento y agregación.
  3. Utilidades de funciones – Cubrimos control de ejecución y memoización.
  4. Ayudas de utilidad – Introdujimos generación aleatoria y plantillas.

Reflexiones finales

Underscore.js es una herramienta poderosa que hace que el desarrollo en JavaScript sea más eficiente y accesible. Utiliza este artículo como referencia y trata de aplicarlo en tus propios proyectos. La práctica continua te ayudará a mejorar aún más tus habilidades.

Preguntas Frecuentes (FAQ)

Q1: ¿Underscore.js es gratuito?

R: Sí. Underscore.js se publica bajo la licencia MIT y puede usarse sin costo, incluso en proyectos comerciales.

Q2: ¿Cuál es la diferencia entre Underscore.js y Lodash?

R: Underscore.js es una biblioteca de utilidades simple y ligera. Lodash se basa en Underscore.js añadiendo funcionalidades adicionales, optimizaciones de rendimiento y una mayor modularidad. Elige según los requisitos de tu proyecto.

Q3: ¿Underscore.js es innecesario con JavaScript moderno (ES6+)?

R: ES6+ ofrece muchas características nativas para operaciones con arrays y objetos, pero Underscore.js sigue siendo útil para la compatibilidad entre navegadores y una sintaxis concisa, especialmente en proyectos heredados.

Q4: ¿Qué tipos de proyectos son adecuados para Underscore.js?

R: Funciona bien en proyectos pequeños o medianos y en aplicaciones donde la simplicidad del código es importante. Es especialmente útil cuando necesitas utilidades ligeras sin dependencias pesadas.

Q5: ¿Cómo puedo instalar Underscore.js?

R: Puedes instalarlo usando cualquiera de los siguientes métodos.

  1. Agregar vía CDN:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
  1. Instalar con npm:
    npm install underscore
  1. Instalar con yarn:
    yarn add underscore

Elige el método que mejor se adapte a tu entorno.

Q6: ¿Dónde puedo encontrar la documentación oficial?

R: Puedes encontrarla en el sitio web oficial:
Sitio oficial de Underscore.js

Q7: ¿Underscore.js puede usarse en proyectos a gran escala?

R: Sí, puede. Sin embargo, para proyectos grandes, a menudo se recomienda Lodash debido a su estructura modular y optimizaciones adicionales. Underscore.js sigue siendo ideal para casos de uso ligeros.

Q8: ¿Existen alternativas para el control de ejecución de funciones?

R: Sí. JavaScript moderno ofrece alternativas como setTimeout(), setInterval(), Promise y async/await. No obstante, funciones de Underscore.js como _.throttle() y _.debounce() permiten implementaciones más limpias y concisas.

Q9: ¿Hay alguna advertencia al usar Underscore.js?

R:

  1. Evita dependencias innecesarias cuando las funciones nativas de JavaScript son suficientes.
  2. Mantén las versiones actualizadas para minimizar riesgos de seguridad.
  3. Considera migrar a Lodash según la escala del proyecto.

Q10: ¿Se recomienda Underscore.js como motor de plantillas?

R: _.template() es conveniente para casos de uso simples, pero para necesidades de plantillas más avanzadas se recomiendan bibliotecas dedicadas como Handlebars.js o EJS.

広告