Quiz: Do You Know Modern JavaScript?
Prove your esteemed JavaScript skillz!
Do you know your ES2015 from ES2022?
- Prove your JavaScript skillz! 🚀
- No login or signup required. ✨
- Multiple choice. 🤖 … How difficult can it be, eh?
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.
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.
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.
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.
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'.
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.
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.
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.
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.
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.
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.