Async JavaScript and DOM Interview Questions With Answers
Async and the DOM are core JS interview topics. Here are the common questions and how to answer them.
Async JavaScript and DOM Interview Questions With Answers
Async JavaScript and the DOM are core interview topics, especially for frontend roles. Here are the common questions and how to answer them.
What is a promise and how do its states work?
A promise represents the eventual result of an async operation. It has three states: pending (initial), fulfilled (success), rejected (failure). Once settled, it cannot change.
What is the difference between Promise.all and Promise.allSettled?
Promise.all rejects if any promise rejects. Promise.allSettled waits for all and gives each result with a status, never rejecting. Use all when all must succeed, allSettled when you want all results regardless.
What is async/await and how does it differ from promises?
async/await is syntax for promises that lets you write async code that looks synchronous. await pauses the function until the promise settles. It is still promises under the hood, just cleaner syntax for handling them.
How does the event loop handle async?
The call stack runs sync code. Async callbacks go to the microtask queue (promises) or the macrotask queue (setTimeout, events). When the stack is clear, the event loop processes microtasks, then one macrotask, and repeats.
What is event delegation?
Event delegation uses one listener on a parent to handle events from many children, using event bubbling and the event target. It is efficient for large or dynamic lists and is a common DOM interview topic.
What is event bubbling and capturing?
Bubbling is events firing from the target up to the root. Capturing is the opposite, from root down to target. You can listen in either phase. Bubbling is the default and is what event delegation uses.
The Takeaway
Async and the DOM are core frontend JS topics. Know promise states, Promise.all vs allSettled, async/await vs promises, how the event loop handles async, event delegation, and event bubbling vs capturing.
Promise.all rejects if any promise rejects, so all must succeed. Promise.allSettled waits for all and gives each result with a status, never rejecting. Use all when all must succeed, allSettled when you want all results regardless.
Syntax for promises that lets you write async code that looks synchronous. await pauses the function until the promise settles, and async marks a function as returning a promise. It is still promises under the hood, just cleaner syntax.
The call stack runs sync code. Async callbacks go to the microtask queue (promises) or the macrotask queue (setTimeout, events). When the stack is clear, the event loop processes all microtasks, then one macrotask, and repeats.
Using one listener on a parent to handle events from many children, through event bubbling and the event target. It is efficient for large or dynamic lists, since you do not attach a listener to every child, and it is a common DOM interview topic.
Bubbling fires events from the target up to the root. Capturing is the opposite, from root down to target. You can listen in either phase. Bubbling is the default and is what event delegation uses to handle child events on a parent.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.