Modern JavaScript (ES2024+): Modern Syntax, Async/Await & Event Loop
What You Will Master in This Tutorial
- Master safe property traversal with Optional Chaining and Nullish Coalescing.
- Understand deep object cloning with native structuredClone().
1. Nullish Coalescing and Optional Chaining
Before ES2020, developers used logical OR for defaults. Modern JavaScript solves this with ?? and ?.
const apiResponse = { user: { profile: { points: 0 } } };
const score = apiResponse.user?.profile?.points ?? 100;
console.log(score); // 0 (correctly preserved)Knowledge Check: Test Your Understanding
Frequently Asked Questions
Going deeper: modern JavaScript in practice
The features in this tutorial show up everywhere in production code once you start looking for them. Nullish coalescing and optional chaining replace defensive boilerplate, structuredClone removes a whole category of shared-reference bugs (and a lodash dependency), and async/await over the event loop is how every modern API call is written. In practice, fluency means knowing which tool matches the situation: ?? when 0 or an empty string is a real value, ?. when a path may legitimately be absent, and a real clone when the original object must not change. These are small operators with outsized effects on correctness, which is why interviewers and code reviewers keep coming back to them.
Common mistakes
- Using || for defaults. The logical OR treats 0, '', and false as missing, silently replacing valid values; that is exactly the bug ?? was created to fix.
- Optional chaining everywhere. Sprinkling ?. over every access hides genuine errors — a typo'd property returns undefined instead of failing where the mistake actually is.
- Mutating shared objects. Assigning an object copies the reference, not the data; without structuredClone, 'temporary' edits leak into the original state.
- Floating promises. Calling an async function without await or a .catch leaves rejections unhandled and makes execution order depend on timing instead of intent.
Frequently asked questions
What is the difference between || and ??
As the quiz on this page puts it: || falls back on any falsy value, while ?? only falls back when the value is null or undefined — so 0 and false survive with ??.
How do I deep clone an object without lodash?
Use the built-in structuredClone(obj), which this tutorial notes is now natively supported across all modern runtimes and browsers.
Does optional chaining slow my code down?
Not meaningfully. The checks it performs are the same ones you would write by hand with && chains, just expressed in a shorter, safer syntax.
What happens if I never handle a rejected promise?
The rejection goes unhandled: browsers log a warning and Node will terminate the process on unhandled rejections in modern configurations. In production code, every async call should end in an await inside a try/catch or a .catch handler, so failures surface as deliberate error states instead of silent timing bugs that only appear under load. Modern runtimes surface these failures loudly precisely because silent async errors are among the most expensive bugs to track down.