El mundo del desarrollo vive en una constante innovación. Si eres de los desarrolladores que están al día seguramente conocerás las novedades de Javascript, pero si no es así, te presentamos algunas que debes tener en cuenta y que desde 2021 puedes usar de manera estable en la mayoría de los navegadores.
Optional chaining
El optional chaining o encadenamiento opcional ? sirve para acceder a valores profundos de los objetos sin tener que comprobar si esas propiedades realmente existen en los objetos y, por supuesto, sin producir errores.
const miObjeto = {} // Objeto vacío
miObjeto.unaPropiedad // ❌ Produce un error
miObjeto?.unaPropiedad // ✔️ Devuelve undefined y no produce un error
Numeric separators
El separador numérico _ permite usar guiones bajos como separadores en literales numéricos para hacerlos más legibles.
const numeroLargo = 10000000 // ❌ Difícil de leer
const numeroLargoLegible = 10_000_000 // ✔️ Fácil de leer
console.log(numeroLargoLegible) // 10000000
Logical nullish assignment
El operador de asignación lógica nula ??= solo asigna un valor a una variable su está no está previamente definida.
let colorPrimario = 'blanco';
let colorSecundario;
colorPrimario ??= 'negro';
colorSecundario ??= 'negro';
console.log(colorPrimario, colorSecundario); // 'blanco', 'negro'
Logical assignment OR
El operador de asignación lógica or ||= solo asigna un valor a una variable si es 'falsy', o sea aquellos que cuando se encuentran en un contexto de booleano se convierten a 'false': 0, -0, 0n, "", '', ``, null, undefined, NaN
const movie = {
title: 'Star Wars: Episode IV – A New Hope',
runningTime: ''
};
movie.title ||= 'No title';
console.log(movie.title); // 'Star Wars: Episode IV – A New Hope'
movie.runningTime ||= '2h 1m';
console.log(movie.runningTime); // '2h 1m'
replaceAll
El método replace() solo reemplaza la primera coincidencia en el string indicado. Para reemplazar todas las coicidencias se debe hacer uso de una expresión regular. Sin embargo el método replaceAll() devuelve un string con todas las coincidencias reemplazadas sin tener que hacer uso de ninguna ayuda adicional.
const text = 'alto-ancho-largo';
console.log(text.replace('-', ' ')); // 'alto ancho-largo'
console.log(text.replaceAll('-', ' ')); // 'alto ancho largo'