JavaScript es un lenguaje que muchos desarrolladores utilizan a diario, pero existen numerosas joyas ocultas dentro de su ecosistema con las que incluso los desarrolladores experimentados pueden no estar familiarizados. Este artículo explora algunos conceptos de JavaScript menos conocidos que pueden mejorar significativamente sus habilidades de programación. Cubriremos conceptos como Proxies, Símbolos, Generadores y más, demostrando cada uno con ejemplos y resolviendo problemas para ilustrar su poder.

Al final, tendrás una comprensión más profunda de JavaScript y sabrás cuándo (y cuándo no) usar estas funciones avanzadas.

1. Representantes

¿Qué son los proxy?

Un proxy en JavaScript le permite interceptar y personalizar operaciones fundamentales como búsquedas de propiedades, asignaciones e invocaciones de funciones.

Problema: Imagina que estás creando un sistema donde los usuarios tienen objetos que rastrean sus acciones. En lugar de modificar cada parte de tu aplicación para rastrear el acceso a la propiedad, puedes usar un proxy para interceptar y registrar estas acciones.

Ejemplo:

const user = {
  name: "Alice",
  age: 25
};

const handler = {
  get(target, prop) {
    console.log(`Property '${prop}' was accessed`);
    return prop in target ? target[prop] : `Property ${prop} doesn't exist`;
  },
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Logs: Property 'name' was accessed, Returns: Alice
console.log(userProxy.address); // Logs: Property 'address' was accessed, Returns: Property address doesn't exist

Ventajas:

• Te permite manejar e interceptar casi cualquier interacción con un objeto.
• Excelente para registro, validación y comportamiento dinámico.

Contras:

• Puede generar una sobrecarga de rendimiento si se usa en exceso.
• Más difícil de depurar debido a la capa de abstracción entre la lógica y el comportamiento del objeto.

2. Símbolos

¿Qué son los símbolos?

Los símbolos son un nuevo tipo primitivo introducido en ES6. Proporcionan claves únicas para las propiedades de los objetos, lo que las hace útiles cuando necesita evitar colisiones de nombres de propiedades.

Problema: Supongamos que está trabajando en un objeto que se integra con código de terceros y desea agregar propiedades personalizadas sin sobrescribir sus claves.

Ejemplo:

const uniqueId = Symbol('id');
const user = {
  [uniqueId]: 123,
  name: "Alice"
};

console.log(user[uniqueId]); // 123
console.log(Object.keys(user)); // ['name'] - Symbol key is hidden from iteration

Ventajas:

• Los símbolos son únicos, incluso si comparten la misma descripción.
• Evita la sobrescritura accidental de propiedades, lo que las hace ideales para su uso en bibliotecas o diseño de API.

Contras:

• Los símbolos no son enumerables, lo que puede hacer que la depuración o la iteración sean un poco más complicadas.
• Puede reducir la legibilidad del código si se usa en exceso.

3. Funciones del generador

¿Qué son los generadores?

Los generadores son funciones que se pueden pausar y reanudar, lo que los hace útiles para gestionar flujos asíncronos o producir datos bajo demanda.

Problema: Supongamos que desea generar una secuencia de números de Fibonacci. En lugar de generar la secuencia completa por adelantado, puedes crear un generador que genere valores uno por uno, lo que permite una evaluación diferida.

Ejemplo:

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a   b];
  }
}

const fib = fibonacci();

console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2

Ventajas:

• Eficiente para generar secuencias donde solo necesitas unos pocos valores a la vez.
• Permite flujos asíncronos más limpios cuando se usa con rendimiento.

Contras:

• No se usan con tanta frecuencia como Promises o async/await, por lo que tienen una curva de aprendizaje más pronunciada.
• Puede generar código complejo si se usa en exceso.

4. Literales de plantilla etiquetados

¿Qué son los literales de plantilla etiquetados?

Las plantillas etiquetadas le permiten procesar literales de plantilla con una función, lo que las hace increíblemente poderosas para crear DSL (lenguajes específicos de dominio) como bibliotecas CSS-in-JS.

Problema: Necesita crear un sistema de plantillas que procese la entrada del usuario y la desinfecte para evitar ataques XSS.

Ejemplo:

function safeHTML(strings, ...values) {
  return strings.reduce((acc, str, i) => acc   str   (values[i] ? escapeHTML(values[i]) : ''), '');
}

function escapeHTML(str) {
  return str.replace(/&/g, "&").replace(/, "<").replace(/>/g, ">");
}

const userInput = "";
const output = safeHTML`User said: ${userInput}`;
console.log(output); // User said: <script>alert('XSS')</script>

Ventajas:

• Permite un control preciso sobre la interpolación de cadenas.
• Excelente para crear bibliotecas que requieren análisis o transformación de cadenas (por ejemplo, CSS, consultas SQL).

Contras:

• No suele ser necesario a menos que trabajes con bibliotecas específicas o crees la tuya propia.
• Puede ser difícil de entender y depurar para los principiantes.

5. Mapas débiles y conjuntos débiles

¿Qué son WeakMaps y WeakSets?

WeakMaps son colecciones de pares clave-valor donde las claves tienen referencias débiles. Esto significa que si no existen otras referencias a la clave, la entrada se recolecta como basura.

Problema: Estás creando un sistema de almacenamiento en caché y quieres asegurarte de que una vez que los objetos ya no sean necesarios, se recolecten automáticamente como basura para liberar memoria.

Ejemplo:

let user = { name: "Alice" };
const weakCache = new WeakMap();

weakCache.set(user, "Cached data");

console.log(weakCache.get(user)); // Cached data

user = null; // The entry in weakCache will be garbage collected

Ventajas:

• Recolección automática de basura de entradas, evitando pérdidas de memoria.
• Ideal para almacenamiento en caché donde la duración de los objetos es incierta.

Contras:

• Los WeakMaps no son enumerables, lo que dificulta la iteración sobre ellos.
• Limitado únicamente a objetos como claves.

6. Currying

¿Qué es el curry?

Currying transforma una función que toma múltiples argumentos en una secuencia de funciones en las que cada una toma un solo argumento. Es una técnica de programación funcional que puede aumentar la flexibilidad del código.

Problema: Digamos que tienes una función que aplica un descuento basado en un porcentaje. Quieres reutilizar esta función con diferentes porcentajes en toda tu aplicación.

Ejemplo:

const applyDiscount = (discount) => (price) => price - price * (discount / 100);

const tenPercentOff = applyDiscount(10);
const twentyPercentOff = applyDiscount(20);

console.log(tenPercentOff(100)); // 90
console.log(twentyPercentOff(100)); // 80

Ventajas:

• Puede hacer que las funciones sean más reutilizables aplicando argumentos previamente.
• Le permite crear fácilmente aplicaciones parciales.

Contras:

• No es intuitivo para desarrolladores que no están familiarizados con la programación funcional.
• Puede generar código demasiado complejo si se usa en exceso.

Conclusión

Cada uno de estos conceptos avanzados de JavaScript (proxies, símbolos, generadores, literales de plantilla etiquetados, WeakMaps y Currying) ofrece capacidades únicas para resolver problemas específicos de maneras más eficientes, escalables o elegantes. Sin embargo, conllevan compensaciones, como una mayor complejidad o posibles problemas de rendimiento.

La conclusión clave es comprender cuándo y dónde utilizar estos conceptos. El hecho de que existan no significa que debas utilizarlos en todos los proyectos. En su lugar, incorpórelos cuando proporcionen beneficios claros, como mejorar la legibilidad, el rendimiento o la flexibilidad del código.

Al explorar estas técnicas avanzadas, podrás abordar problemas más sofisticados y escribir JavaScript más potente.