Web Development - HTML, CSS &… on Telegram: “let count = 0; const interval = setInterval(() =…”

let count = 0;

const interval = setInterval(() => {
    count++;
    console.log(count);
    if (count === 5) {
        clearInterval(interval);
    }
}, 1000);

Output:

1

2

3

4

5

After 5, the interval is stopped.

78. What is callback hell?

Callback hell occurs when multiple asynchronous operations are nested inside one another, making code difficult to read and maintain.

Example:

getUser(user => {
    getOrders(user, orders => {
        getPayment(orders, payment => {
            processPayment(payment, result => {
                console.log(result);
            });
        });
    });
});

This creates deeply nested code.

Problems:

❌ Difficult to read

❌ Difficult to debug

❌ Difficult to maintain

❌ Error handling becomes complicated

79. How do you avoid callback hell?

Several approaches can make asynchronous code cleaner.

1. Use Promises

getUser()
    .then(getOrders)
    .then(getPayment)
    .then(processPayment)
    .catch(handleError);

2. Use async/await

async function process() {
    try {
        const user = await getUser();
        const orders = await getOrders(user);
        const payment = await getPayment(orders);
        await processPayment(payment);
    } catch (error) {
        console.log(error);
    }
}

3. Break large functions into smaller functions

Instead of putting everything into one deeply nested callback, separate responsibilities into reusable functions.

Interview Tip:

For modern JavaScript, Promises and async/await are the most common solutions.

80. What are microtasks and macrotasks?

This is an important advanced JavaScript interview topic.

The JavaScript runtime has different queues for asynchronous work.

Microtasks

Examples include:

• Promise callbacks

• queueMicrotask()

• MutationObserver callbacks in browsers

Macrotasks / Tasks

Common examples include:

• setTimeout()

• setInterval()

• Some browser events

Example:

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
    console.log("Promise");
});

console.log("End");

Output:

Start

End

Promise

Timeout

Why?

After the synchronous code finishes, the runtime processes available microtasks before moving to the next task.

So:

Synchronous code
       ↓
Microtasks
       ↓
Next task / macrotask

❤️ Double Tap For Part 9