Javascript. 5 news that ES2021 will bring us

Discover the new features that Javascript will incorporate in the next revision of the language

Image for post
Image for post
Photo by Tudor Baciu on Unsplash

Logical assignments

let bar;
const foo = 'some value';
bar = bar || foo;
let bar;
bar ||= 'some value';
let foo = 'foo';
let bar = 'bar';
foo = foo && bar; // 'bar'
foo &&= bar; // 'bar'
let foo = null;
let bar = 'bar';
foo = foo ?? bar; // 'bar'foo ??= bar; // 'bar'

String.prototype.replaceAll

const p = 'These are foo, foo, and foo.';
p.replace('foo', 'bar'); // 'There are bar, foo, and foo.'
const p = 'These are foo, foo, and foo.';
p.replace(/foo/g, 'bar'); // 'There are bar, bar, and bar.'
const p = 'These are foo, foo, and foo.';
p.replaceAll('foo', 'bar'); // 'There are bar, bar, and bar.'

Promise.any

const promises = [new Promise((resolve, reject) => reject('Primera')),new Promise((resolve, reject) => reject('Segunda')),new Promise((resolve) => resolve('Tercera'))];Promise.any(promises).then(result => console.log(result)); // 'Tercera'
const promises = [new Promise((resolve, reject) => reject('Primera')),new Promise((resolve, reject) => reject('Segunda')),new Promise((resolve, reject) => reject('Tercera'))];Promise.any(promises).then(result => console.log(result)).catch(error => console.log(error)); // AggregateError: All promises were rejected

Numeric separators

const number = 1_000_000_00;
console.log(number); // 100000000

Intl.ListFormat

const people = ['Pepito', 'Fulanito', 'Menganito'];new Intl.ListFormat('es', { style: 'long', type: 'conjunction' }).format(people); 
// "Pepito, Fulanito y Menganito"
new Intl.ListFormat('es', { style: 'long', type: 'disjunction' }).format(people);
// "Pepito, Fulanito o Menganito"

WeakRef

function toggleUnderline(element) {
const weakElement = new WeakRef(element);
let intervalId = null;

function toggle() {
// Obtener el elemento de la Weak Reference
const el = weakElement.deref();
// Puede que ya no exista
if (el) {
const decoration = weakElement.style.textDecoration;
if (decoration === 'none') {
weakElement.style.textDecoration = 'underline';
} else {
weakElement.style.textDecoration = 'none';
} else {
clearInterval(intervalId);
}
}
intervalId = setInterval(toggle, 1000);
}
toggleUnderline(document.getElementById("animatedLink"));setTimeout(() => {
document.getElementById("animatedLink").remove();
}, 10000);

Final thoughts

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store