Top 25 JavaScript Interview Questions (2025)
1. What are JavaScript ES6+ features that are widely used in modern development?
Modern startups leverage ES6+ features for better code readability and performance.
- Arrow Functions: `const add = (a, b) => a + b;`
- Template Literals: `Hello, ${name}!`
- Destructuring Assignment: `const { name, age } = user;`
- Spread & Rest Operator: `const newArray = [...oldArray, newItem];`
- Async/Await: `const data = await fetchData();`
- Optional Chaining: `user?.profile?.email`
- Nullish Coalescing Operator (`??`): `const val = input ?? 'default';`
2. What is the difference between `let`, `const`, and `var`?
| Feature | `var` | `let` | `const` |
|----------|------|------|------|
| Scope | Function-scoped | Block-scoped | Block-scoped |
| Hoisting | Hoisted with `undefined` | Hoisted without initialization | Hoisted without initialization |
| Reassignment | Allowed | Allowed | Not allowed |
| Redeclaration | Allowed | Not Allowed | Not Allowed |
Best Practice: Use `const` whenever possible, and `let` when reassignment is needed.
3. Explain event delegation and why it is useful.
Event Delegation is a technique where a parent element handles events for its child elements by using event
bubbling.
**Example:** Instead of adding event listeners to multiple buttons:
```js
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target.matches('.child-button')) {
console.log('Button Clicked!');
}
});
```
**Why useful?**
- Improves performance
- Reduces memory usage
- Simplifies dynamically added elements
4. What are Promises and how do they differ from Callbacks?
A **Promise** is an object representing the eventual completion of an asynchronous operation.
**Example:**
```js
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Data Fetched!'), 2000);
});
};
fetchData().then(console.log).catch(console.error);
```
| Feature | Callbacks | Promises |
|---------|----------|----------|
| Syntax | Nested (callback hell) | Chainable `.then()` |
| Error Handling | Hard to manage | Easier with `.catch()` |
| Readability | Complex & messy | Clean & structured |
5. What are async/await, and how do they simplify Promises?
Async/Await is syntactic sugar over Promises for better readability and error handling.
**Example:**
```js
async function fetchData() {
try {
const response = await fetch('https://api.example.com');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
```
**Why use async/await?**
- Avoids `.then()` nesting
- Reads like synchronous code
- Better error handling with `try/catch`