Trucos

Template Literals

Explicación: Usa comillas invertidas (`) para insertar variables directamente en las cadenas.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let name = "Marta"; let greeting = `Hola, ${name}!`;
let name = "Marta"; let greeting = `Hola, ${name}!`;
let name = "Marta"; let greeting = `Hola, ${name}!`;

Desestructuración

Explicación: Extrae valores de objetos o matrices fácilmente.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const person = { name: "Ana", age: 25 };
const { name, age } = person; // name = "Ana", age = 25
const person = { name: "Ana", age: 25 }; const { name, age } = person; // name = "Ana", age = 25
const person = { name: "Ana", age: 25 };
const { name, age } = person; // name = "Ana", age = 25

Operador de Propagación (...)

Explicación: Copia o combina objetos y arrays.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const sum = (a, b) => a + b;
const sum = (a, b) => a + b;
const sum = (a, b) => a + b;

Array.map

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

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2, 4, 6]
const nums = [1, 2, 3]; const doubled = nums.map(n => n * 2); // [2, 4, 6]
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const nums = [1, 2, 3, 4];
const evens = nums.filter(n => n % 2 === 0); // [2, 4]
const nums = [1, 2, 3, 4]; const evens = nums.filter(n => n % 2 === 0); // [2, 4]
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const nums = [1, 2, 3, 4];
const sum = nums.reduce((total, n) => total + n, 0); // 10
const nums = [1, 2, 3, 4]; const sum = nums.reduce((total, n) => total + n, 0); // 10
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const nums = [1, 2, 3, 4];
const firstEven = nums.find(n => n % 2 === 0); // 2
const nums = [1, 2, 3, 4]; const firstEven = nums.find(n => n % 2 === 0); // 2
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const nums = [1, 2, 3, 4];
const allEven = nums.every(n => n % 2 === 0); // false
const someEven = nums.some(n => n % 2 === 0); // true
const nums = [1, 2, 3, 4]; const allEven = nums.every(n => n % 2 === 0); // false const someEven = nums.some(n => n % 2 === 0); // true
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const nums = [1, 2, 3];
const hasTwo = nums.includes(2); // true
const nums = [1, 2, 3]; const hasTwo = nums.includes(2); // true
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
};
fetchData();
const fetchData = async () => { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); }; fetchData();
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const user = { name: 'Pedro', address: { city: 'Madrid' } };
const city = user?.address?.city; // 'Madrid'
const user = { name: 'Pedro', address: { city: 'Madrid' } }; const city = user?.address?.city; // 'Madrid'
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const name = null;
const greeting = `Hola, ${name ?? 'desconocido'}!`; // 'Hola, desconocido!'
const name = null; const greeting = `Hola, ${name ?? 'desconocido'}!`; // 'Hola, desconocido!'
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const result = [1, 2, 3, 4]
.filter(n => n % 2 === 0)
.map(n => n * 2)
.reduce((total, n) => total + n, 0); // 12
const result = [1, 2, 3, 4] .filter(n => n % 2 === 0) .map(n => n * 2) .reduce((total, n) => total + n, 0); // 12
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const obj = { a: 1, b: 2 };
const entries = Object.entries(obj); // [['a', 1], ['b', 2]]
const newObj = Object.fromEntries(entries); // { a: 1, b: 2 }
const obj = { a: 1, b: 2 }; const entries = Object.entries(obj); // [['a', 1], ['b', 2]] const newObj = Object.fromEntries(entries); // { a: 1, b: 2 }
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const greet = (name = 'desconocido') => `Hola, ${name}!`;
greet(); // 'Hola, desconocido!'
const greet = (name = 'desconocido') => `Hola, ${name}!`; greet(); // 'Hola, desconocido!'
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const printUser = ({ name, age }) => {
console.log(`Nombre: ${name}, Edad: ${age}`);
};
const user = { name: 'Lucas', age: 30 };
printUser(user); // Nombre: Lucas, Edad: 30
const printUser = ({ name, age }) => { console.log(`Nombre: ${name}, Edad: ${age}`); }; const user = { name: 'Lucas', age: 30 }; printUser(user); // Nombre: Lucas, Edad: 30
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const multiply = a => b => a * b;
const double = multiply(2);
double(3); // 6
const multiply = a => b => a * b; const double = multiply(2); double(3); // 6
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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
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
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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 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 fetchData = () => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve('Datos cargados');
  }, 2000);
 });
};

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

Debouncing

Explicación: Agrupa múltiples llamadas de función en un tiempo corto en una sola llamada.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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 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 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);

Throttling

Explicación: Limita la frecuencia con la que se ejecuta una función.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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 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 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);

Array.flat

Explicación: Aplana arrays anidados.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const nestedArray = [1, [2, [3, [4]]]];
const flatArray = nestedArray.flat(2); // [1, 2, 3, [4]]
const nestedArray = [1, [2, [3, [4]]]]; const flatArray = nestedArray.flat(2); // [1, 2, 3, [4]]
const nestedArray = [1, [2, [3, [4]]]];
const flatArray = nestedArray.flat(2); // [1, 2, 3, [4]]

Array.flatMap

Explicación: Mapea cada elemento usando una función de mapeo y luego aplana el resultado.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const arr = [1, 2, 3];
const flatMapped = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]
const arr = [1, 2, 3]; const flatMapped = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]
const arr = [1, 2, 3];
const flatMapped = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

Dynamic Property Names

Explicación: Usa variables como nombres de propiedades.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const propName = 'age';
const user = { name: 'Ana', [propName]: 30 };
console.log(user); // { name: 'Ana', age: 30 }
const propName = 'age'; const user = { name: 'Ana', [propName]: 30 }; console.log(user); // { name: 'Ana', age: 30 }
const propName = 'age';
const user = { name: 'Ana', [propName]: 30 };
console.log(user); // { name: 'Ana', age: 30 }

Optional Chaining with Functions:Explicación: Llama a funciones sólo si existen.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const user = {
name: 'Pedro',
greet: () => console.log('Hola')
};
user.greet?.(); // 'Hola'
user.nonExistentMethod?.(); // No error
const user = { name: 'Pedro', greet: () => console.log('Hola') }; user.greet?.(); // 'Hola' user.nonExistentMethod?.(); // No error
const user = {
 name: 'Pedro',
 greet: () => console.log('Hola')
};

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

Intl.DateTimeFormat

Explicación: Formatea fechas de manera internacionalizada.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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 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 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)

Intl.NumberFormat

Explicación: Formatea números de manera internacionalizada.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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 number = 1234567.89; const formatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }); console.log(formatter.format(number)); // '1.234.567,89 €'
const number = 1234567.89;
const formatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
});
console.log(formatter.format(number)); // '1.234.567,89 €'

Array.from

Explicación: Crea arrays a partir de objetos parecidos a arrays.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const str = 'Hola';
const arr = Array.from(str); // ['H', 'o', 'l', 'a']
const str = 'Hola'; const arr = Array.from(str); // ['H', 'o', 'l', 'a']
const str = 'Hola';
const arr = Array.from(str); // ['H', 'o', 'l', 'a']

Array.of

Explicación: Crea arrays a partir de un número variable de argumentos.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const arr = Array.of(1, 2, 3); // [1, 2, 3]
const arr = Array.of(1, 2, 3); // [1, 2, 3]
const arr = Array.of(1, 2, 3); // [1, 2, 3]

Shallow Copy with Object.assign

Explicación: Crea una copia superficial de un objeto.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
const original = { a: 1, b: 2 }; const copy = Object.assign({}, original);
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);

Dynamic ImportsExplicación: Importa módulos bajo demanda.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const loadModule = async () => {
const module = await import('./path/to/module.js');
module.default();
};loadModule();
const loadModule = async () => { const module = await import('./path/to/module.js'); module.default(); };loadModule();
const loadModule = async () => {
const module = await import('./path/to/module.js');
module.default();
};loadModule();

Logical Assignment Operators

Explicación: Asigna un valor a una variable sólo si la variable es null o undefined.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let a = null;
a ??= 10; // a será 10 porque inicialmente es null
let a = null; a ??= 10; // a será 10 porque inicialmente es null
let a = null;
a ??= 10; // a será 10 porque inicialmente es null

Object.freeze

Explicación: Evita modificaciones a un objeto.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // No cambiará
const obj = { a: 1 }; Object.freeze(obj); obj.a = 2; // No cambiará
const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // No cambiará

Object.seal

Explicación: Evita agregar o eliminar propiedades de un objeto, pero permite modificar las existentes.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const obj = { a: 1 };
Object.seal(obj);
obj.a = 2; // Cambiará
obj.b = 3; // No se agregará
const obj = { a: 1 }; Object.seal(obj); obj.a = 2; // Cambiará obj.b = 3; // No se agregará
const obj = { a: 1 };

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

Event Delegation

Explicación: Usa un solo manejador de eventos para múltiples elementos.

Ejemplo:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
document.getElementById('parent').addEventListener('click', (event) => {
if (event.target && event.target.matches('button.child')) {
console.log('Botón hijo clickeado');
}
});
document.getElementById('parent').addEventListener('click', (event) => { if (event.target && event.target.matches('button.child')) { console.log('Botón hijo clickeado'); } });
document.getElementById('parent').addEventListener('click', (event) => {
 if (event.target && event.target.matches('button.child')) {
  console.log('Botón hijo clickeado');
 }
});

Editar en modo libre una página web

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
document.designMode='on'
document.designMode='on'
document.designMode='on'

 

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.