Trucos

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

Funciones Flecha

Explicación: Una forma más corta de escribir funciones.

Ejemplo:

const sum = (a, b) => a + b;

Array.map

Explicación: Aplica una función a cada elemento de un array.

Ejemplo:

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2, 4, 6]

Array.filter

Explicación: Filtra elementos de un array según una condición.

Ejemplo:

const nums = [1, 2, 3, 4];
const evens = nums.filter(n => n % 2 === 0); // [2, 4]

Array.reduce

Explicación: Reduce un array a un solo valor.

Ejemplo:

const nums = [1, 2, 3, 4];
const sum = nums.reduce((total, n) => total + n, 0); // 10

Array.find

Explicación: Encuentra el primer elemento que cumple una condición.

Ejemplo:

const nums = [1, 2, 3, 4];
const firstEven = nums.find(n => n % 2 === 0); // 2

Array.every y Array.some:

Explicación: Verifica si todos (every) o algunos (some) elementos cumplen una condición.

Ejemplo:

const nums = [1, 2, 3, 4];
const allEven = nums.every(n => n % 2 === 0); // false
const someEven = nums.some(n => n % 2 === 0); // true

Array.includes

Explicación: Verifica si un array contiene un valor.

Ejemplo:

const nums = [1, 2, 3];
const hasTwo = nums.includes(2); // true

Uso de async y await

Explicación: Maneja funciones asíncronas de manera más sencilla.

Ejemplo:

const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
};
fetchData();

Operador de Encadenamiento Opcional (?.)

Explicación: Accede a propiedades profundamente anidadas sin errores si alguna es undefined.

Ejemplo:

const user = { name: 'Pedro', address: { city: 'Madrid' } };
const city = user?.address?.city; // 'Madrid'

Operador Nullish Coalescing (??)

Explicación: Proporciona un valor predeterminado solo si el valor es null o undefined.

Ejemplo:

const name = null;
const greeting = `Hola, ${name ?? 'desconocido'}!`; // 'Hola, desconocido!'

Encadenamiento de Métodos

Explicación: Realiza múltiples operaciones en una sola línea.

Ejemplo:

const result = [1, 2, 3, 4]
.filter(n => n % 2 === 0)
.map(n => n * 2)
.reduce((total, n) => total + n, 0); // 12

Object.entries y Object.fromEntries

Explicación: Convierte un objeto en una matriz de pares clave-valor y viceversa.

Ejemplo:

const obj = { a: 1, b: 2 };
const entries = Object.entries(obj); // [['a', 1], ['b', 2]]
const newObj = Object.fromEntries(entries); // { a: 1, b: 2 }

Parámetros por Defecto:Explicación: Establece valores predeterminados para los parámetros de una función.

Ejemplo:

const greet = (name = 'desconocido') => `Hola, ${name}!`;
greet(); // 'Hola, desconocido!'

Destructuración en Parámetros de Función

Explicación: Extrae propiedades directamente en los parámetros de la función.

Ejemplo:

const printUser = ({ name, age }) => {
console.log(`Nombre: ${name}, Edad: ${age}`);
};
const user = { name: 'Lucas', age: 30 };
printUser(user); // Nombre: Lucas, Edad: 30

Currying

Explicación: Divide una función que toma múltiples argumentos en una serie de funciones que toman un solo argumento.

Ejemplo:

const multiply = a => b => a * b;
const double = multiply(2);
double(3); // 6

Memoización

Explicación: Almacena resultados de funciones para evitar cálculos repetitivos.

Ejemplo:

const memoize = fn => {
 const cache = {};
 return (...args) => {
  const key = JSON.stringify(args);
  if (!cache[key]) {
   cache[key] = fn(...args);
 }
  return cache[key];
 };
};

const factorial = memoize(n => {
 if (n === 0) return 1;
  return n * factorial(n - 1);
});

factorial(5); // 120

Promises

Explicación: Maneja operaciones asíncronas.

Ejemplo:

const fetchData = () => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('Datos cargados');
  }, 2000);
 });
};

fetchData().then(data => console.log(data)); // 'Datos cargados' después de 2 segundos

const debounce = (func, delay) => {
 let debounceTimer;
 return function(...args) {
  const context = this;
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => func.apply(context, args), delay);
 };
};

const log = debounce(() => console.log('Hello'), 1000);
window.addEventListener('resize', log);

const throttle = (func, limit) => {

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

const log = throttle(() => console.log('Hello'), 1000);
window.addEventListener('resize', log);

const nestedArray = [1, [2, [3, [4]]]];
const flatArray = nestedArray.flat(2); // [1, 2, 3, [4]]

const arr = [1, 2, 3];
const flatMapped = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

const propName = 'age';
const user = { name: 'Ana', [propName]: 30 };
console.log(user); // { name: 'Ana', age: 30 }

const user = {
 name: 'Pedro',
 greet: () => console.log('Hola')
};

user.greet?.(); // 'Hola'
user.nonExistentMethod?.(); // No error

const date = new Date();
const formatter = new Intl.DateTimeFormat('es-ES', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
console.log(formatter.format(date)); // '2 de junio de 2024' (por ejemplo)

const number = 1234567.89;
const formatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
});
console.log(formatter.format(number)); // '1.234.567,89 €'

const str = 'Hola';
const arr = Array.from(str); // ['H', 'o', 'l', 'a']

const arr = Array.of(1, 2, 3); // [1, 2, 3]

const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);

const loadModule = async () => {
const module = await import('./path/to/module.js');
module.default();
};loadModule();

let a = null;
a ??= 10; // a será 10 porque inicialmente es null

const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // No cambiará

const obj = { a: 1 };

Object.seal(obj);
obj.a = 2; // Cambiará
obj.b = 3; // No se agregará

document.getElementById('parent').addEventListener('click', (event) => {
 if (event.target && event.target.matches('button.child')) {
  console.log('Botón hijo clickeado');
 }
});

document.designMode='on'