DanLevy.net

Quiz: ¿Conoces JavaScript moderno?

¡Demuestra tu dominio de JavaScript!

¿Conoces la diferencia entre ES2015 y ES2022?

1. 

ES2020

¿Cuál es el valor de result?

console.log(null ?? 100);

El operador de coalescencia nula (??) devuelve el operando del lado derecho (b) si el operando del lado izquierdo (a) es null o undefined. En este caso, a es null, por lo que result es 100.

El operador ?? solo usa el valor de respaldo para null o undefined.

2. 

ES2020

¿Cuál será la salida del siguiente código?

const value = false;
const defaultVal = 42;
console.log(value ?? defaultVal);

El operador de coalescencia nula (??) trata los valores falsy como false como valores válidos. Dado que value es false, se considera un valor válido y se devuelve.

false no es null ni undefined. No confundas ?? con el operador ||.

3. 

Encadenamiento Opcional

¿Cuál es la salida del siguiente código?

const obj = { foo: null };
const result = obj.foo?.bar;
console.log(result);

El operador de encadenamiento opcional (?.) detiene la evaluación si el lado izquierdo es null o undefined. Como obj.foo es null, obj.foo?.bar evalúa a undefined.

El encadenamiento opcional se detiene al encontrar null o undefined antes de acceder a la propiedad siguiente.

4. 

BigInt

¿Cuál es la salida del siguiente código?

const a = 42n;
const result = a * 2n;
console.log(result);

Los valores BigInt se crean añadiendo n a un número. No puedes mezclar BigInt con números normales en operaciones aritméticas. Aquí, ambos valores son BigInt, así que la multiplicación funciona, resultando en 84n.

Observa el sufijo n en ambos operandos: comparten el mismo tipo numérico.

5. 

Importación Dinámica

¿Qué muestra esto?

const modulePromise = import('./myModule.js');
console.log(typeof modulePromise);

La función import() devuelve una Promise que se resuelve al objeto del módulo. Como las instancias de Promise son objetos, typeof modulePromise muestra 'object'.

La importación es asíncrona. Distingue el objeto que devuelve inmediatamente del módulo que entrega después.

6. 

Promise.allSettled

¿Cuál será el resultado del siguiente código?

const promises = [
  Promise.resolve('success'),
  Promise.reject('error')
];
Promise.allSettled(promises).then(results => {
  console.log(results[0].status + ': ' + results[0].value);
});

Promise.allSettled devuelve un array de objetos que describen el resultado de cada promesa. La primera promesa está fulfilled con el valor 'success', por lo que la instrucción de registro imprimirá fulfilled: success.

El índice cero corresponde a la primera promesa de entrada. Conserva literalmente su estado y su valor al formar la salida.

7. 

String.matchAll

¿Qué devuelve str.matchAll()?

const str = 'foo1bar2baz3';
const matches = str.matchAll(/\d/g);

String.matchAll devuelve un iterador de coincidencias, no un arreglo. Este iterador puede usarse para obtener todos los grupos coincidentes de una cadena.

matchAll permite consumir coincidencias una a una; no entrega directamente un array.

8. 

Import Meta

¿Qué representa import.meta.url?

console.log(import.meta.url);

import.meta es un objeto que contiene metadatos sobre el módulo actual. La propiedad import.meta.url representa la URL del módulo actual, lo que permite obtener información sobre dónde se está ejecutando el script.

import.meta describe el módulo en el que aparece, no el lugar que lo importó.

9. 

Asignación lógica

¿Cuál es el valor de a después de la asignación lógica?

let a = null;
a ||= 10;
console.log(a);

La asignación lógica OR (||=) asigna el valor de la derecha si el valor de la izquierda es falsy (null, undefined, 0, false, etc.). Como a es null, se le asigna el valor 10.

La asignación ||= se activa con valores falsy, incluido null.

10. 

Asignación Nula Lógica

¿Cuál es el valor de b después de la asignación nullish?

let b = null;
b ??= 10;
console.log(b);

La asignación de coalescencia nula (??=) asigna el valor de la derecha si el valor de la izquierda es null o undefined. Como b es null, se le asigna el valor 10.

La asignación ??= solo se activa para null o undefined.

11. 

WeakRef

¿Qué proporciona WeakRef?

const obj = { data: 'important' };
const ref = new WeakRef(obj);
console.log(ref.deref());

WeakRef proporciona una referencia débil a un objeto, lo que permite que el objeto sea recolectado por el garbage collector si no existen otras referencias. Como obj sigue estando fuertemente referenciado aquí, deref() devuelve el objeto original. Si el objetivo hubiera sido reclamado, deref() devolvería undefined.

En este ejemplo el objeto aún tiene una referencia fuerte; la referencia débil puede recuperarlo.

Loading comments...