Quiz: Do You Know Modern JavaScript?

console.log(null ?? 100);

Check the exact JavaScript operator semantics. The tempting answer is often what older syntax would have done, not what this feature does.

The null coalescing operator (??) returns the right-hand side operand (b) if the left-hand side (a) is null or undefined. In this case, a is null, so result is 100.

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

Check the exact JavaScript operator semantics. The tempting answer is often what older syntax would have done, not what this feature does.

The null coalescing operator (??) treats falsey values like false as valid values. Since value is false, it is considered a valid value and returned.

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

Check the exact JavaScript operator semantics. The tempting answer is often what older syntax would have done, not what this feature does.

The optional chaining operator (?.) stops the evaluation if the left-hand side is null or undefined. Since obj.foo is null, obj.foo?.bar evaluates to undefined.

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

Check the exact JavaScript operator semantics. The tempting answer is often what older syntax would have done, not what this feature does.

BigInt values are created by appending n to a number. You cannot mix BigInt with regular numbers in arithmetic operations. Here, both values are BigInt, so the multiplication works, resulting in 84n.

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

Check the exact JavaScript operator semantics. The tempting answer is often what older syntax would have done, not what this feature does.

The import() function returns a Promise that resolves to the module object. Because Promise instances are objects, typeof modulePromise logs 'object'.

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

Check the exact JavaScript operator semantics. The tempting answer is often what older syntax would have done, not what this feature does.

Promise.allSettled returns an array of objects describing the outcome of each promise. The first promise is fulfilled with the value 'success', so the log statement will print fulfilled: success.

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

Check the exact JavaScript operator semantics. The tempting answer is often what older syntax would have done, not what this feature does.

String.matchAll returns an iterator of matches, not an array. This iterator can be used to get all the matching groups from a string.

console.log(import.meta.url);

Check the exact JavaScript operator semantics. The tempting answer is often what older syntax would have done, not what this feature does.

import.meta is an object that contains metadata about the current module. The import.meta.url property represents the URL of the current module, which can be used to get information about where the script is running.

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

Check the exact JavaScript operator semantics. The tempting answer is often what older syntax would have done, not what this feature does.

The logical OR assignment (||=) assigns the right-hand value if the left-hand value is falsy (null, undefined, 0, false, etc.). Since a is null, it is assigned the value 10.

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

Check the exact JavaScript operator semantics. The tempting answer is often what older syntax would have done, not what this feature does.

The nullish coalescing assignment (??=) assigns the right-hand value if the left-hand value is null or undefined. Since b is null, it is assigned the value 10.

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

Check the exact JavaScript operator semantics. The tempting answer is often what older syntax would have done, not what this feature does.

WeakRef provides a weak reference to an object, which allows the object to be garbage collected if no other references exist. Since obj is still strongly referenced here, deref() returns the original object. If the target had been reclaimed, deref() would return undefined.