7 trucos avanzados de JavaScript que todo desarrollador debería conocer / Sudo Null IT News

JavaScript continúa evolucionando, brindando a los desarrolladores herramientas cada vez más poderosas para escribir código limpio, rápido y eficiente.

Sin embargo, con tantas funciones y tecnologías, es fácil pasar por alto las más potentes. Ya sea que su objetivo sea mejorar la productividad o hacer que su código sea más fácil de mantener, estas técnicas avanzadas le brindarán una gran ventaja.

Veamos 7 técnicas avanzadas de JavaScript que te ayudarán a llevar tus habilidades al siguiente nivel.

1. Los cierres harán que tu código sea más limpio

Cierres es una de las funciones más poderosas y a menudo incomprendidas de JavaScript. Con su ayuda, puedes crear funciones con variables privadas, lo que hace que tu código sea más estructurado y seguro.

¿Qué es el cierre? Esto es cuando una función “recuerda” su alcance incluso después de haber terminado de ejecutarse. Este enfoque es útil si necesita almacenar el estado dentro de una función sin recurrir a variables globales.

// Example of a closure
function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}


const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Casos de uso: los cierres son ideales para almacenar el estado en controladores de eventos, crear variables privadas o escribir funciones de orden superior.

2. La desestructuración simplificará su código.

Desestructurando es una característica útil de ES6 que le permite extraer valores de matrices u objetos y asignarlos a variables de una manera más concisa y clara. Esto simplifica el código y lo hace más fácil de leer y mantener.

// Object destructuring
const person = { name: 'Alice', age: 30 };
const { name, age } = person;


console.log(name); // 'Alice'
console.log(age);  // 30


// Array destructuring
const numbers = (1, 2, 3);
const (first, second) = numbers;


console.log(first);  // 1
console.log(second); // 2

Ejemplos de uso: la desestructuración es especialmente útil cuando se trabaja con API u objetos complejos, cuando necesita extraer solo los datos necesarios.

3. Antirrebote y limitación: cómo optimizar el rendimiento

Al manejar eventos de usuario como desplazamiento o cambio de tamaño de ventana, activar funciones con frecuencia para cada acción del usuario puede ralentizar enormemente su aplicación. Antirrebote y limitación son dos métodos que ayudan a regular la frecuencia de ejecución de funciones.

Antirrebote – esto ocurre cuando una función se activa solo después de que se haya completado la acción del usuario y haya pasado un cierto tiempo sin nuevos eventos.

estrangulamiento — la función se ejecuta no más de una vez en un período de tiempo específico.

// Debounce function
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}


// Throttle function
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

Estas técnicas son excelentes para optimizar el rendimiento al escribir en una barra de búsqueda, manejar eventos de desplazamiento o cambiar el tamaño de una ventana.

4. El curry aumenta la flexibilidad

Zurra es una técnica que convierte una función con múltiples argumentos en una cadena de funciones, cada una de las cuales toma un argumento.

Esto flexibiliza las funciones y permite su aplicación parcial.

// Basic curry function
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...nextArgs) {
        return curried.apply(this, args.concat(nextArgs));
      };
    }
  };
}


// Usage
const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);


console.log(curriedAdd(1)(2)(3)); // 6

El curry es especialmente útil al crear funciones complejas que se pueden usar con datos semiacabados, como en programación funcional o componentes de React.

5. Proxy intercepta las acciones de los objetos.

Proxy le permite interceptar y cambiar el comportamiento de los objetos, como acceder a propiedades, cambiarlas o llamar a funciones. Esto es útil para validar datos, registrar o crear sistemas reactivos.

const person = {
  name: 'John',
  age: 25
};


const handler = {
  get: function(target, property) {
    console.log(`Getting property ${property}`);
    return property in target ? target(property) : 'Property not found';
  },
  set: function(target, property, value) {
    if (property === 'age' && value < 0) {
      console.error('Age cannot be negative');
    } else {
      target(property) = value;
    }
  }
};


const proxyPerson = new Proxy(person, handler);
console.log(proxyPerson.name); // Logs "Getting property name" and outputs "John"
proxyPerson.age = -5; // Logs "Age cannot be negative"

El proxy se utiliza a menudo para la validación de datos, en marcos reactivos como Vue.js, y para rastrear el acceso a información confidencial.

6. Cómo funcionan el bucle de eventos y JavaScript asincrónico

JavaScript es un lenguaje de subproceso único, lo que significa que solo puede realizar una tarea a la vez. Sin embargo, su bucle de eventos permite que las operaciones asincrónicas se ejecuten de manera eficiente sin bloquear el hilo principal.

Comprender el bucle de eventos es esencial para escribir código asincrónico eficiente, especialmente si está trabajando con setTimeoutPromesas o async/await.

console.log('Start');


setTimeout(() => {
  console.log('Inside setTimeout');
}, 0);


Promise.resolve().then(() => {
  console.log('Inside Promise');
});


console.log('End');
// Output: 
// Start
// End
// Inside Promise
// Inside setTimeout

Conocer el bucle de eventos es fundamental a la hora de crear aplicaciones del mundo real, procesar solicitudes de API y gestionar tareas asincrónicas.

7. Memorización para mejorar el rendimiento

Memorización es una forma de almacenar en caché los resultados de funciones que consumen muchos recursos y devolverlos desde la caché cuando se llaman repetidamente con los mismos argumentos. Esto acelera significativamente las funciones que a menudo se llaman con los mismos datos de entrada.

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}


// Usage
const slowFunction = (num) => {
  console.log('Long computation...');
  return num * 2;
};


const memoizedFunction = memoize(slowFunction);
console.log(memoizedFunction(5)); // Long computation... 10
console.log(memoizedFunction(5)); // 10 (from cache)

La memorización es especialmente útil para optimizar cálculos complejos en aplicaciones con uso intensivo de datos, como ordenar matrices o realizar operaciones matemáticas.

Al dominar estas técnicas avanzadas de JavaScript, podrá escribir código más limpio, más rápido y más potente. Estas técnicas lo ayudarán a mejorar el rendimiento, aumentar la legibilidad y crear aplicaciones escalables, llevando sus habilidades de JavaScript al siguiente nivel.