JScript Katana

Guía completa de Underscore.js: ejemplos prácticos y funciones clave en JavaScript

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

1. Introducción

JavaScript es un lenguaje de programación esencial en el desarrollo web, pero la manipulación de arreglos y objetos puede volverse fácilmente compleja. En especial, en procesos como el filtrado y la transformación de datos, se requiere una escritura más clara y eficiente. Aquí es donde resulta útil la librería de JavaScript llamada Underscore.js. Con esta librería, es posible simplificar la escritura de operaciones de datos que de otra manera serían complicadas.

Ventajas de Underscore.js

  1. Simplificación del código
  • Con JavaScript tradicional, ciertos procesos tienden a ser redundantes; con Underscore.js se pueden escribir en pocas líneas.
  1. Gran variedad de funciones útiles
  • Ofrece funciones para manipulación de arreglos, manejo de objetos, control de funciones y mucho más.
  1. Ligera y flexible
  • Permite usar directamente las funciones necesarias, minimizando el impacto en el rendimiento.

Lo que aprenderás en este artículo

  • Cómo instalar y configurar Underscore.js
  • Funciones básicas y ejemplos prácticos
  • Casos de uso reales en proyectos de desarrollo

2. ¿Qué es Underscore.js?

Descripción general de Underscore.js

Underscore.js es una librería ligera que facilita la manipulación de datos en JavaScript. Está equipada con numerosas funciones que simplifican el trabajo con arreglos y objetos, por lo que también se le conoce como un kit de utilidades para JavaScript. Aunque JavaScript nativamente permite operaciones potentes, en ocasiones el código puede ser largo o difícil de leer. Con Underscore.js, estos problemas se resuelven, logrando un código más simple y fácil de mantener.

Características principales

  1. Amplia colección de funciones utilitarias
  • Incluye funciones para manipulación de arreglos, manejo de objetos y control de funciones.
  1. Código claro y legible
  • En comparación con JavaScript puro, el código se reduce y mejora la legibilidad.
  1. Sin dependencias
  • No depende de otras librerías, lo que facilita su integración.
  1. Ligera y rápida
  • Su tamaño reducido minimiza el impacto en el rendimiento, ideal para aplicaciones web modernas.

Comparación entre Underscore.js y Lodash

Una librería frecuentemente comparada con Underscore.js es Lodash. Lodash se basa en Underscore.js pero extiende sus funcionalidades. Algunas diferencias son:
CaracterísticaUnderscore.jsLodash
FuncionalidadIncluye funciones utilitarias básicasFunciones ampliadas y optimizadas
Soporte para modularizaciónParcialCompatibilidad completa
RendimientoRápidoMás rápido y optimizado
La elección entre ambos depende de los requisitos del proyecto. Si necesitas una librería ligera y simple, Underscore.js es una excelente opción.

¿Cómo puede ayudarte Underscore.js?

Underscore.js es especialmente útil en los siguientes casos:
  1. Manipulación de datos en arreglos
  • Permite realizar operaciones como filtrado y mapeo de forma sencilla.
  1. Manejo de objetos
  • Obtención de claves y valores, combinación de propiedades y más.
  1. Control de funciones
  • Implementación de ejecuciones únicas, retrasadas o controladas de forma sencilla.
  1. Uso de funciones utilitarias
  • Clasificación de datos, aleatorización e incluso funciones de plantillas.

3. Métodos de instalación

En esta sección explicaremos los pasos para integrar Underscore.js en tu proyecto. Puedes usar un CDN o descargar los archivos directamente.

1. Uso de CDN

Un CDN (Content Delivery Network) permite enlazar librerías alojadas en internet de forma sencilla. Basta con agregar el siguiente código dentro de la etiqueta <head> o al final del <body> de tu archivo HTML:

Ejemplo: Agregar a un archivo HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Instalación de Underscore.js</title>
  <!-- Enlace CDN de Underscore.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Prueba de Underscore.js</h1>
  <script>
    // Código de prueba
    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 el navegador, verás únicamente los números pares en la consola de herramientas para desarrolladores.

2. Instalación con npm o yarn

También puedes instalar Underscore.js en tu entorno local o en proyectos Node.js.

Instalación con npm

npm install underscore

Instalación 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. Uso mediante descarga directa

  1. Accede al sitio oficial (underscorejs.org).
  2. Descarga la última versión desde la sección “Download”.
  3. Coloca el archivo en una carpeta de tu proyecto, por ejemplo js/.
  4. Enlázalo con una etiqueta <script> en tu HTML.
<script src="js/underscore-min.js"></script>

4. Uso con empaquetadores de módulos

Herramientas como Webpack o Parcel también permiten integrarlo fácilmente.

Ejemplo con Webpack

  1. Instala con npm:
npm install underscore
  1. Importa en tu archivo JavaScript:
import _ from 'underscore';
  1. Usa la librería según sea necesario y compila el proyecto.

Solución de problemas

1. Error: «Uncaught ReferenceError: _ is not defined»
  • Verifica que el archivo de Underscore.js se haya cargado correctamente desde el CDN o la ruta local.
2. Errores tras instalar con npm
  • Asegúrate de tener las versiones más recientes de Node.js y npm.

4. Uso básico

En esta sección veremos las funciones más utilizadas de Underscore.js con ejemplos prácticos para trabajar con arreglos y objetos.

1. Iteración de arreglos – _.each()

_.each() permite recorrer arreglos u objetos.

Ejemplo

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

// Mostrar cada elemento en consola
_.each(numbers, function(num) {
  console.log(num);
});
Resultado:
1  
2  
3  
4  
5
Puntos clave:
  • Funciona con arreglos y también con objetos.
  • La función callback recibe el valor, el índice y la colección completa.

2. Mapeo de 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];

// Multiplicar cada elemento por 2
const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);
Resultado:
[2, 4, 6, 8, 10]

3. Buscar el primer elemento que cumpla una condición – _.find()

_.find() devuelve el primer elemento que cumpla con una condición.

Ejemplo

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

// Buscar el primer número mayor o igual a 3
const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);
Resultado:
3

4. Filtrar todos los elementos que cumplan una condición – _.filter()

_.filter() crea un nuevo arreglo con todos los elementos que cumplen la condición.

Ejemplo

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

// Obtener solo los números pares
const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);
Resultado:
[2, 4]

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

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

Ejemplo

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

// Reorganizar aleatoriamente
const shuffled = _.shuffle(numbers);

console.log(shuffled);
Resultado: (ejemplo)
[3, 5, 1, 4, 2]

6. Eliminar duplicados de un arreglo – _.uniq()

_.uniq() elimina los elementos duplicados.

Ejemplo

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

// Eliminar duplicados
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);
Resultado:
[1, 2, 3, 4, 5]

Resumen

Hasta aquí hemos visto las funciones básicas de Underscore.js:
  • _.each() para iterar elementos
  • _.map() para crear nuevos arreglos
  • _.find() y _.filter() para búsquedas
  • _.shuffle() para mezclar elementos
  • _.uniq() para eliminar duplicados

5. Uso avanzado

En esta sección exploraremos funciones más potentes de Underscore.js para análisis y manipulación avanzada de datos.

1. Ordenar arreglos – _.sortBy()

_.sortBy() ordena los elementos de un arreglo en base a una clave o condición.

Ejemplo

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

// Ordenar por edad
const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);
Resultado:
[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. Agrupar elementos – _.groupBy()

_.groupBy() clasifica los elementos de un arreglo en grupos según una condición.

Ejemplo

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

// Agrupar por parte entera
const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);
Resultado:
{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. Contar elementos – _.countBy()

_.countBy() permite realizar un conteo de elementos según una condición.

Ejemplo

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

// Contar según la primera letra
const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);
Resultado:
{
  a: 2,
  b: 2
}

Resumen

En esta sección aprendiste a usar funciones avanzadas:
  • _.sortBy() para ordenar datos
  • _.groupBy() y _.countBy() para agrupar y contar

6. Manipulación de objetos

Ahora veremos funciones de Underscore.js que simplifican el manejo de propiedades y valores en objetos.

1. Obtener claves y valores de un objeto

Obtener claves – _.keys()

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

const keys = _.keys(person);
console.log(keys);
Resultado:
['name', 'age', 'city']

Obtener valores – _.values()

const values = _.values(person);
console.log(values);
Resultado:
['Alice', 25, 'Tokyo']

2. Clonar un objeto – _.clone()

_.clone() crea una copia superficial de un objeto.
const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

clone.age = 30; // Modificamos el clon
console.log(original.age); // 25
console.log(clone.age);    // 30

Resumen

En esta sección aprendiste:
  • Usar _.keys() y _.values() para obtener claves y valores
  • Crear copias con _.clone()

7. Manipulación de funciones

Underscore.js también ofrece utilidades para controlar la ejecución de funciones, optimizar rendimiento y mejorar la legibilidad del código.

1. Vincular funciones – _.bind()

_.bind() asigna un objeto específico como this al ejecutar una función.

Ejemplo

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

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

console.log(boundGreet('Hola')); // Hola, mi nombre es Alice

2. Ejecutar con retraso – _.delay()

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

Ejemplo

_.delay(function(message) {
  console.log(message);
}, 2000, 'Se muestra después de 2 segundos');
Resultado: (tras 2 segundos)
Se muestra después de 2 segundos

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

_.once() asegura que una función se ejecute únicamente la primera vez que se llama.

Ejemplo

const initialize = _.once(function() {
  console.log('Inicialización completada');
});

initialize(); // Se ejecuta
initialize(); // Ignorado

4. Memoización de funciones – _.memoize()

_.memoize() guarda en caché el resultado de una función para evitar cálculos repetidos con los mismos argumentos.

Ejemplo

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

console.log(factorial(5)); // Calculado
console.log(factorial(5)); // Usando caché

5. Controlar frecuencia de ejecución – _.throttle()

_.throttle() limita la frecuencia con la que una función puede ejecutarse en un periodo de tiempo.

Ejemplo

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

// Simulación de clics rápidos
setInterval(log, 500); // Solo se ejecuta cada 2 segundos

Resumen

En esta sección aprendiste a:
  • Usar _.bind() para fijar this
  • Retrasar funciones con _.delay()
  • Ejecutar una función una sola vez con _.once()
  • Optimizar rendimiento con _.memoize()
  • Controlar la frecuencia de ejecución con _.throttle()

8. Funciones utilitarias

Ahora veremos utilidades adicionales de Underscore.js que permiten generar valores aleatorios, verificar datos vacíos y crear plantillas de texto.

1. Generar números aleatorios – _.random()

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

Ejemplo

console.log(_.random(1, 10)); // Entero
console.log(_.random(1, 10, true)); // Con decimales

2. Verificar si un valor está vacío – _.isEmpty()

_.isEmpty() comprueba 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. Crear plantillas – _.template()

_.template() permite generar cadenas de texto dinámicas con valores variables.

Ejemplo

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

Resumen

En esta sección aprendiste:
  • Generar números aleatorios con _.random()
  • Comprobar datos vacíos con _.isEmpty()
  • Crear cadenas dinámicas con _.template()

9. Conclusión

Este artículo cubrió desde los conceptos básicos hasta funciones avanzadas de Underscore.js. Esta librería simplifica la manipulación de datos en JavaScript y ayuda a escribir código más eficiente y fácil de mantener.

Resumen del artículo

  1. Uso básico – funciones esenciales para arreglos y objetos
  2. Uso avanzado – clasificación, agrupación y conteo
  3. Manipulación de funciones – control de ejecución y optimización
  4. Funciones utilitarias – generación aleatoria y plantillas

Palabras finales

Underscore.js es una herramienta potente para hacer el desarrollo en JavaScript más eficiente y sencillo. Te animamos a aplicarla en tus proyectos y seguir practicando para mejorar tus habilidades.

Preguntas frecuentes (FAQ)

Q1: ¿Underscore.js es gratuito?

A: Sí, está disponible bajo licencia MIT y puede usarse incluso en proyectos comerciales.

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

A: Underscore.js es más simple y ligero. Lodash amplía sus funciones, mejora el rendimiento y soporta modularización completa. La elección depende de las necesidades del proyecto.

Q3: ¿Sigue siendo necesario con ES6+?

A: Aunque JavaScript moderno ofrece funciones nativas similares, Underscore.js sigue siendo útil por su compatibilidad entre navegadores y su sintaxis más compacta.

Q4: ¿En qué tipo de proyectos es recomendable?

A: Es ideal para proyectos pequeños o medianos, o cuando se busca simplificar código rápidamente.

Q5: ¿Cómo se instala?

A: Puede instalarse mediante:
  1. CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
  1. npm:
npm install underscore
  1. yarn:
yarn add underscore

Q6: ¿Dónde está la documentación oficial?

A: En el sitio oficial: Underscore.js

Q7: ¿Es recomendable para proyectos grandes?

A: Puede usarse, pero Lodash suele ser más eficiente en proyectos de gran escala.

Q8: ¿Existen otras formas de controlar funciones?

A: Sí, con setTimeout(), setInterval(), Promise y async/await. Sin embargo, _.throttle() y _.debounce() de Underscore.js simplifican estas tareas.

Q9: ¿Qué precauciones debo tener?

A:
  1. No depender innecesariamente de la librería si el mismo resultado puede lograrse con funciones nativas modernas.
  2. Usar siempre la última versión para evitar riesgos de seguridad.
  3. Considerar migrar a Lodash en proyectos más complejos.

Q10: ¿Se recomienda como motor de plantillas?

A: _.template() es útil para casos simples, pero para proyectos más avanzados se recomienda usar librerías dedicadas como Handlebars.js o EJS.
広告