Dan Levy

Quiz: Do You Know Modern JavaScript?

Prove your esteemed JavaScript skillz!

Do you know your ES2015 from ES2022?

1. 

ES2020

What is the value of result?

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.

2. 

ES2020

What will be the output of the following code?

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.

3. 

Optional Chaining

What is the output of the following code?

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.

4. 

BigInt

What is the output of the following code?

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.

5. 

Dynamic Import

What does this log?

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'.

6. 

Promise.allSettled

What will be the result of the following code?

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.

7. 

String.matchAll

What does str.matchAll() return?

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.

8. 

Import Meta

What does import.meta.url represent?

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.

9. 

Logical Assignment

What is the value of a after the logical assignment?

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.

10. 

Logical Nullish Assignment

What is the value of b after the nullish assignment?

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.

11. 

WeakRef

What does WeakRef provide?

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.

Loading comments...