Javascript · Question Set

Closures and Asynchronous JavaScript – Javascript interview questions

Closures and Asynchronous JavaScript interview questions for placements and exams.

Subject: JavascriptDifficulty: Mixed14 questions in this set

Set overview

Questions

Included in this set

Subject

Javascript

Explore more sets

Difficulty

Mixed

Level of this set

Javascript – Closures and Asynchronous JavaScript questions (14)

Go through each question and its explanation. Use this set as a focused practice pack for Javascript.

Back to Javascript subject page

1. What is a callback function in JavaScript?

Difficulty: EasyType: MCQTopic: Async Basics

A callback function is a function passed as an argument to another function, to be executed later. Callbacks are used for asynchronous operations like reading files, making API calls, or handling events. The function receiving the callback decides when to execute it. Callbacks are fundamental to JavaScript's asynchronous programming model. Modern JavaScript often uses Promises and async await instead of callbacks to avoid callback hell.

Example code

// Simple callback example
function greet(name, callback) {
  console.log('Hello ' + name);
  callback();
}

function sayBye() {
  console.log('Goodbye!');
}

greet('John', sayBye);
// Output:
// Hello John
// Goodbye!

// Array methods use callbacks
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(num) {
  console.log(num * 2);
});

// Asynchronous callback
setTimeout(function() {
  console.log('This runs after 2 seconds');
}, 2000);

// Event listener callback
button.addEventListener('click', function() {
  console.log('Button clicked!');
});

// Callback with parameters
function processData(data, successCallback, errorCallback) {
  if (data) {
    successCallback(data);
  } else {
    errorCallback('No data');
  }
}

processData('Hello', 
  function(result) { console.log('Success:', result); },
  function(error) { console.log('Error:', error); }
);

2. What does the async keyword do?

Difficulty: MediumType: MCQTopic: Async Await

The async keyword before a function makes it always return a Promise. If the function returns a value, that value is automatically wrapped in a resolved Promise. If the function throws an error, it returns a rejected Promise. Inside an async function, you can use the await keyword to pause execution until a Promise resolves. Async await provides cleaner syntax for working with Promises compared to then and catch chains.

Example code

// Async function always returns Promise
async function greet() {
  return 'Hello';
}

greet().then(result => {
  console.log(result); // 'Hello'
});

// Same as:
function greetPromise() {
  return Promise.resolve('Hello');
}

// Using await
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

// Error handling with try catch
async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Error:', error);
  }
}

// Multiple awaits
async function getMultipleData() {
  const user = await fetchUser();
  const posts = await fetchPosts(user.id);
  const comments = await fetchComments(posts[0].id);
  return {user, posts, comments};
}

// Parallel execution
async function getDataParallel() {
  const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments()
  ]);
  return {user, posts, comments};
}

3. What does Promise.all() do?

Difficulty: MediumType: MCQTopic: Promises

Promise all takes an array of promises and returns a single promise. It waits for all promises to resolve successfully. If all succeed, it returns an array of all results. If any promise rejects, Promise all immediately rejects with that error. Use Promise all when you need all operations to complete and the order matters. It runs promises in parallel, not sequentially, making it faster than awaiting promises one by one.

Example code

// Promise.all() - all must succeed
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results); // [1, 2, 3]
  });

// If any fails, all fails
const p1 = Promise.resolve(1);
const p2 = Promise.reject('Error!');
const p3 = Promise.resolve(3);

Promise.all([p1, p2, p3])
  .then(results => console.log(results))
  .catch(error => console.log(error)); // 'Error!'

// Practical example - fetching multiple APIs
async function getAllData() {
  try {
    const [users, posts, comments] = await Promise.all([
      fetch('/api/users').then(r => r.json()),
      fetch('/api/posts').then(r => r.json()),
      fetch('/api/comments').then(r => r.json())
    ]);
    console.log({users, posts, comments});
  } catch (error) {
    console.log('One of the requests failed:', error);
  }
}

// Promise.race() - first to finish wins
Promise.race([promise1, promise2, promise3])
  .then(result => console.log(result)); // 1 (first to resolve)

// Promise.allSettled() - wait for all, get all results
Promise.allSettled([p1, p2, p3])
  .then(results => console.log(results));
// [{status: 'fulfilled', value: 1},
//  {status: 'rejected', reason: 'Error!'},
//  {status: 'fulfilled', value: 3}]

// Promise.any() - first successful promise
Promise.any([p2, p1, p3])
  .then(result => console.log(result)); // 1 (first fulfilled)

4. How do you handle errors in async await?

Difficulty: MediumType: MCQTopic: Error Handling

In async await, you handle errors using try catch blocks. Wrap the await statements inside a try block. If any promise rejects, execution jumps to the catch block. You can also use catch on the promise returned by the async function. Finally block runs regardless of success or failure, useful for cleanup. Proper error handling prevents your application from crashing and provides better user experience.

Example code

// Using try catch
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Error:', error.message);
  } finally {
    console.log('Cleanup code runs always');
  }
}

// Multiple awaits with error handling
async function getUser(id) {
  try {
    const user = await fetchUser(id);
    const posts = await fetchPosts(user.id);
    const comments = await fetchComments(posts[0].id);
    return {user, posts, comments};
  } catch (error) {
    console.log('Failed to get user data:', error);
    return null;
  }
}

// Using .catch() on async function
fetchData().catch(error => {
  console.log('Caught:', error);
});

// Handling specific errors
async function getData() {
  try {
    const response = await fetch('/api/data');
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    if (error.name === 'TypeError') {
      console.log('Network error');
    } else {
      console.log('Other error:', error);
    }
    throw error; // Re-throw if needed
  }
}

// Without try catch (not recommended)
async function badExample() {
  const data = await fetch('/api/data'); // Unhandled rejection!
  return data;
}

5. What are the three states of a Promise?

Difficulty: MediumType: MCQTopic: Promises

A Promise has three states: Pending is the initial state. The operation has started but not completed yet. Fulfilled means the operation completed successfully. The promise has a resolved value. Rejected means the operation failed. The promise has a rejection reason or error. Once a promise is fulfilled or rejected, it stays in that state forever. It cannot change again. Promises are used to handle asynchronous operations in a cleaner way than callbacks.

Example code

// Creating a Promise
const myPromise = new Promise((resolve, reject) => {
  const success = true;
  
  if (success) {
    resolve('Operation successful!'); // Fulfilled
  } else {
    reject('Operation failed!'); // Rejected
  }
});

// Using the Promise
myPromise
  .then(result => {
    console.log(result); // 'Operation successful!'
  })
  .catch(error => {
    console.log(error);
  });

// Real example - simulating API call
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = {name: 'John', age: 30};
      resolve(data); // Fulfilled after 1 second
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.log('Error:', error);
  });

// Chaining promises
fetchData()
  .then(data => {
    console.log('First then:', data);
    return data.name;
  })
  .then(name => {
    console.log('Second then:', name);
  })
  .catch(error => {
    console.log('Error:', error);
  })
  .finally(() => {
    console.log('Always runs');
  });

6. What is the output order? console.log('1'); setTimeout(() => console.log('2'), 0); Promise.resolve().then(() => console.log('3')); console.log('4');

Difficulty: HardType: MCQTopic: Event Loop

The output is 1, 4, 3, 2 because of how the event loop works. JavaScript executes synchronous code first. So 1 and 4 print immediately. Promises are microtasks and have higher priority than setTimeout which is a macrotask. Microtasks run after the current script but before macrotasks. So 3 prints before 2. Understanding the event loop, microtasks, and macrotasks is crucial for advanced JavaScript. This is a very common and important interview question.

Example code

console.log('1');  // Synchronous - runs immediately

setTimeout(() => console.log('2'), 0); // Macrotask - queued

Promise.resolve().then(() => console.log('3')); // Microtask - queued

console.log('4');  // Synchronous - runs immediately

// Execution order:
// 1. Run all synchronous code: 1, 4
// 2. Run microtasks: 3
// 3. Run macrotasks: 2
// Output: 1, 4, 3, 2

// More complex example
console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
  Promise.resolve().then(() => console.log('Promise in timeout'));
}, 0);

Promise.resolve()
  .then(() => {
    console.log('Promise 1');
    return Promise.resolve();
  })
  .then(() => console.log('Promise 2'));

setTimeout(() => console.log('Timeout 2'), 0);

console.log('End');

// Output:
// Start
// End
// Promise 1
// Promise 2
// Timeout 1
// Promise in timeout
// Timeout 2

// Event Loop Summary:
// 1. Synchronous code runs first
// 2. Microtasks (Promises, queueMicrotask)
// 3. Macrotasks (setTimeout, setInterval, I/O)

7. What will this code output? function outer() { let count = 0; return function inner() { count++; return count; }; } const counter = outer(); console.log(counter()); console.log(counter());

Difficulty: HardType: MCQTopic: JS Closures

The output is 1 then 2 because of closures. A closure is when an inner function has access to variables from its outer function, even after the outer function has finished executing. When outer is called, it creates a count variable and returns the inner function. The inner function remembers the count variable from its parent scope. Each time counter is called, it increments the same count variable and returns it. The count persists between calls because the closure keeps it alive. This is one of the most important concepts in JavaScript and appears in almost every interview.

Example code

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const counter = outer();
console.log(counter()); // 1 (count is now 1)
console.log(counter()); // 2 (count is now 2)
console.log(counter()); // 3 (count is now 3)

// Each call to outer creates new closure
const counter2 = outer();
console.log(counter2()); // 1 (new count variable)

// Real world example - private variable
function createBankAccount(initialBalance) {
  let balance = initialBalance; // Private variable
  
  return {
    deposit: function(amount) {
      balance += amount;
      return balance;
    },
    withdraw: function(amount) {
      if (amount <= balance) {
        balance -= amount;
        return balance;
      }
      return 'Insufficient funds';
    },
    getBalance: function() {
      return balance;
    }
  };
}

const account = createBankAccount(100);
console.log(account.deposit(50));  // 150
console.log(account.withdraw(30)); // 120
// console.log(account.balance); // undefined (private!)

8. What will this code output? for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); }

Difficulty: MediumType: MCQTopic: Async Basics

The output is 3, 3, 3 because of how var and closures work with setTimeout. Var has function scope, not block scope. All three setTimeout callbacks share the same i variable. The loop completes immediately, setting i to 3. Then the callbacks execute and all see i as 3. This is a classic interview question testing understanding of scope, closures, and the event loop. To fix it, use let instead of var, which creates a new i for each iteration with block scope.

Example code

// Problem with var
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Output: 3, 3, 3

// Why? The loop runs:
// i = 0, schedule callback
// i = 1, schedule callback
// i = 2, schedule callback
// i = 3, loop ends
// Now callbacks run and all see i = 3

// Solution 1: Use let (block scope)
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Output: 0, 1, 2

// Solution 2: IIFE (Immediately Invoked Function Expression)
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(() => console.log(j), 0);
  })(i);
}
// Output: 0, 1, 2

// Solution 3: Pass parameter to setTimeout
for (var i = 0; i < 3; i++) {
  setTimeout((num) => console.log(num), 0, i);
}
// Output: 0, 1, 2

// Understanding the event loop
console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');
// Output: Start, End, Promise, Timeout
// (Microtasks run before macrotasks)

9. What are higher-order functions? Provide examples and explain why they are useful.

Difficulty: MediumType: SubjectiveTopic: Functional JS

A higher-order function is a function that either takes one or more functions as arguments, or returns a function, or both. Taking functions as arguments: Array methods like map, filter, reduce, forEach are higher-order functions. Event listeners take callback functions. setTimeout and setInterval take functions. Custom functions can accept functions to make them reusable. Returning functions: Create specialized functions from generic ones. Implement currying and partial application. Build function factories. Create closures for data privacy. Why they are useful: Code reuse by passing different behaviors. Abstraction of common patterns. Functional programming style. More flexible and composable code. Easier to test and maintain. Common higher-order function patterns: Map for transforming arrays. Filter for selecting elements. Reduce for aggregating data. Compose for combining functions. Memoize for caching. Throttle and debounce for rate limiting. Benefits: DRY principle, do not repeat yourself. Declarative rather than imperative code. Easier to reason about. Better separation of concerns. Higher-order functions are fundamental to functional programming and modern JavaScript. They enable powerful patterns and cleaner code. Understanding them is essential for advanced JavaScript development.

Example code

// Array methods are higher-order functions
const numbers = [1, 2, 3, 4, 5];

// map - takes function, returns new array
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter - takes function, returns filtered array
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// reduce - takes function, returns single value
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// Creating higher-order function
function repeat(times, action) {
  for (let i = 0; i < times; i++) {
    action(i);
  }
}

repeat(3, console.log); // 0, 1, 2

// Returning a function
function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

// Practical example - once function
function once(fn) {
  let called = false;
  let result;
  
  return function(...args) {
    if (!called) {
      called = true;
      result = fn(...args);
    }
    return result;
  };
}

const initialize = once(() => {
  console.log('Initialized!');
  return 'Ready';
});

console.log(initialize()); // 'Initialized!' 'Ready'
console.log(initialize()); // 'Ready' (no log)

// Compose functions
function compose(...fns) {
  return function(value) {
    return fns.reduceRight((acc, fn) => fn(acc), value);
  };
}

const add5 = n => n + 5;
const multiply3 = n => n * 3;
const subtract2 = n => n - 2;

const calculate = compose(subtract2, multiply3, add5);
console.log(calculate(10)); // ((10 + 5) * 3) - 2 = 43

// Debounce (higher-order function)
function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

const search = debounce((query) => {
  console.log('Searching:', query);
}, 500);

// Memoization
function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (key in cache) return cache[key];
    const result = fn(...args);
    cache[key] = result;
    return result;
  };
}

10. What is a closure? Explain with examples and common use cases.

Difficulty: HardType: SubjectiveTopic: JS Closures

Closure is created when an inner function remembers variables from its outer function scope even after the outer function has finished executing. How closures work: When you return a function from another function, the returned function carries its lexical environment with it. Variables from the outer function remain accessible to the inner function. The outer function's variables are kept alive in memory as long as the inner function exists. Common use cases: Data privacy and encapsulation. Creating private variables that cannot be accessed from outside. Factory functions that generate customized functions. Event handlers that need to remember state. Memoization for caching function results. Module pattern for organizing code. Important points: Closures can cause memory leaks if not managed properly. All inner functions share the same outer variables. Understanding closures is essential for advanced JavaScript. Closures are one of the most important and frequently asked interview topics in JavaScript.

Example code

// Basic closure example
function outer() {
  let count = 0; // Private variable
  
  return function inner() {
    count++; // Accesses outer variable
    return count;
  };
}

const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
// count is kept alive by closure

// Data privacy
function createPerson(name) {
  let age = 0; // Private
  
  return {
    getName: function() {
      return name;
    },
    getAge: function() {
      return age;
    },
    birthday: function() {
      age++;
    }
  };
}

const person = createPerson('John');
console.log(person.getName()); // 'John'
console.log(person.getAge());  // 0
person.birthday();
console.log(person.getAge());  // 1
// console.log(person.age); // undefined (private!)

// Function factory
function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

// Event handler with closure
function setupButtons() {
  for (let i = 0; i < 3; i++) {
    const button = document.createElement('button');
    button.textContent = 'Button ' + i;
    
    button.addEventListener('click', function() {
      console.log('Button ' + i + ' clicked');
      // i is remembered by closure
    });
  }
}

// Memoization
function memoize(fn) {
  const cache = {}; // Private cache
  
  return function(...args) {
    const key = JSON.stringify(args);
    if (key in cache) {
      console.log('From cache');
      return cache[key];
    }
    const result = fn(...args);
    cache[key] = result;
    return result;
  };
}

const expensiveOperation = memoize((n) => {
  console.log('Computing...');
  return n * n;
});

console.log(expensiveOperation(5)); // Computing... 25
console.log(expensiveOperation(5)); // From cache 25

11. Explain async await in JavaScript. How does it make asynchronous code easier to write?

Difficulty: MediumType: SubjectiveTopic: Async Await

Async await is a modern syntax for handling asynchronous operations in JavaScript, built on top of Promises. The async keyword: Declare a function as async to make it always return a Promise. If the function returns a value, it is wrapped in a resolved Promise. If it throws an error, it returns a rejected Promise. The await keyword: Can only be used inside async functions. Pauses execution until the Promise resolves. Returns the resolved value. If Promise rejects, throws an error. How it makes code easier: Looks like synchronous code, easier to read. No need for then chains. Can use try catch for error handling. Can use regular loops and conditionals. Easier to debug than Promise chains. Error handling: Use try catch blocks around await statements. Can catch errors from multiple awaits in one catch block. Finally block for cleanup code. Parallel execution: Awaiting in sequence is slower. Use Promise all for parallel execution. Destructure results from Promise all.

Example code

// Basic async await
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

// Calling async function
fetchData()
  .then(data => console.log(data))
  .catch(error => console.log(error));

// Or with await (inside another async function)
async function main() {
  const data = await fetchData();
  console.log(data);
}

// Error handling with try catch
async function getUserData(id) {
  try {
    const user = await fetchUser(id);
    const posts = await fetchPosts(user.id);
    const comments = await fetchComments(posts[0].id);
    return {user, posts, comments};
  } catch (error) {
    console.log('Error:', error.message);
    return null;
  } finally {
    console.log('Cleanup');
  }
}

// Sequential vs Parallel

// Sequential (slow - takes 6 seconds)
async function sequential() {
  const user = await fetchUser();    // 2 seconds
  const posts = await fetchPosts();  // 2 seconds
  const comments = await fetchComments(); // 2 seconds
  return {user, posts, comments};
}

// Parallel (fast - takes 2 seconds)
async function parallel() {
  const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments()
  ]);
  return {user, posts, comments};
}

// Using async await with loops
async function processItems(items) {
  for (const item of items) {
    await processItem(item); // Sequential
  }
}

// Parallel processing with Promise.all
async function processItemsParallel(items) {
  await Promise.all(
    items.map(item => processItem(item))
  );
}

// Compare with Promises
// Promise way:
fetchUser()
  .then(user => fetchPosts(user.id))
  .then(posts => console.log(posts))
  .catch(error => console.log(error));

// Async await way:
async function getAndLogPosts() {
  try {
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    console.log(posts);
  } catch (error) {
    console.log(error);
  }
}

12. What is a higher-order function?

Difficulty: MediumType: MCQTopic: Functional JS

A higher-order function is a function that either takes one or more functions as arguments, or returns a function as its result. Array methods like map, filter, and reduce are higher-order functions because they take callback functions as arguments. Higher-order functions enable functional programming patterns and code reuse. They are fundamental to JavaScript and used extensively in modern frameworks. Understanding higher-order functions shows mastery of JavaScript functions and callbacks. Examples: map, filter, reduce, forEach, setTimeout, and functions that return other functions.

Example code

// Takes function as argument
function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, console.log);
// Output: 0, 1, 2

// Returns a function
function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

// Array methods are higher-order functions
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);

// Practical example - once function
function once(fn) {
  let called = false;
  return function(...args) {
    if (!called) {
      called = true;
      return fn(...args);
    }
  };
}

const initialize = once(() => {
  console.log('Initialized!');
});

initialize(); // 'Initialized!'
initialize(); // (nothing happens)
initialize(); // (nothing happens)

13. Explain the JavaScript event loop. How do microtasks and macrotasks differ?

Difficulty: HardType: SUBJECTIVETopic: Event Loop

The JavaScript event loop is the system that allows JavaScript to handle asynchronous operations even though it runs on a single thread. JavaScript first runs all synchronous code on the call stack. When asynchronous work finishes—like timers, network requests, or Promises—their callbacks don’t run immediately. Instead, they’re placed into different queues. The event loop constantly checks: “Is the call stack empty?” When it is, it pulls tasks from these queues and executes them. JavaScript has two important types of async tasks: 1. Microtasks (higher priority): These include Promise .then() callbacks, queueMicrotask(), and MutationObserver. Microtasks run right after the current synchronous code finishes, and the event loop will empty the entire microtask queue before moving on. 2. Macrotasks (lower priority): These include setTimeout, setInterval, DOM events, and I/O callbacks. The event loop processes one macrotask per cycle, and after each macrotask, it immediately runs all pending microtasks again. Why the difference matters: Because microtasks always run before the next macrotask, a Promise callback will run before a setTimeout(..., 0) every time.

Example code

// Event loop example
console.log('1'); // Synchronous

setTimeout(() => console.log('2'), 0); // Macrotask

Promise.resolve().then(() => console.log('3')); // Microtask

console.log('4'); // Synchronous

// Output: 1, 4, 3, 2
// Explanation:
// 1. Sync code: 1, 4
// 2. Microtasks: 3
// 3. Macrotasks: 2

// Complex example
console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
  Promise.resolve().then(() => console.log('Promise in timeout'));
}, 0);

Promise.resolve()
  .then(() => {
    console.log('Promise 1');
    setTimeout(() => console.log('Timeout in promise'), 0);
  })
  .then(() => console.log('Promise 2'));

setTimeout(() => console.log('Timeout 2'), 0);

console.log('End');

// Output:
// Start
// End
// Promise 1
// Promise 2
// Timeout 1
// Promise in timeout
// Timeout in promise
// Timeout 2

// Why Promises before setTimeout?
async function test() {
  console.log('A');
  
  setTimeout(() => console.log('B'), 0);
  
  await Promise.resolve();
  console.log('C');
  
  setTimeout(() => console.log('D'), 0);
}

test();
console.log('E');

// Output: A, E, C, B, D

// Microtask queue vs Macrotask queue
queueMicrotask(() => console.log('Microtask'));
setTimeout(() => console.log('Macrotask'), 0);

// Microtask runs first

// Event loop phases:
// 1. Execute all synchronous code
// 2. Process all microtasks
// 3. Render (in browser)
// 4. Process one macrotask
// 5. Repeat from step 2

14. Explain Promises in JavaScript. How do they work and why are they better than callbacks?

Difficulty: MediumType: SubjectiveTopic: Promises

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Promises have three states: Pending is the initial state. The operation has not completed yet. Fulfilled means the operation completed successfully. The promise has a value. Rejected means the operation failed. The promise has a reason for failure. How Promises work: You create a Promise with the new Promise constructor. Pass a function that receives resolve and reject callbacks. Call resolve with the result when operation succeeds. Call reject with the error when operation fails. Use .then to handle success and .catch to handle errors. Why Promises are better than callbacks: Cleaner syntax without deep nesting. Can chain multiple operations easily. Better error handling with catch. Can use Promise all for parallel operations. Returns a value that can be passed around. Avoid callback hell. Promise methods: Then for handling success. Catch for handling errors. Finally for cleanup code. Promise all for waiting on multiple promises. Promise race for first completed promise. Promise allSettled for all results regardless of success or failure. Promises are fundamental to modern JavaScript and understanding them is essential for working with async code.

Example code

// Creating a Promise
const myPromise = new Promise((resolve, reject) => {
  // Asynchronous operation
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('Success!'); // Fulfilled
    } else {
      reject('Failed!'); // Rejected
    }
  }, 1000);
});

// Using the Promise
myPromise
  .then(result => {
    console.log(result); // 'Success!'
  })
  .catch(error => {
    console.log(error);
  })
  .finally(() => {
    console.log('Cleanup');
  });

// Chaining Promises
fetchUser()
  .then(user => {
    console.log('Got user:', user);
    return fetchPosts(user.id);
  })
  .then(posts => {
    console.log('Got posts:', posts);
    return fetchComments(posts[0].id);
  })
  .then(comments => {
    console.log('Got comments:', comments);
  })
  .catch(error => {
    console.log('Error in chain:', error);
  });

// Promise.all() - parallel operations
Promise.all([
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/comments')
])
  .then(([users, posts, comments]) => {
    console.log('All data loaded');
  })
  .catch(error => {
    console.log('One failed:', error);
  });

// Converting callback to Promise
function readFilePromise(filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, 'utf8', (error, data) => {
      if (error) {
        reject(error);
      } else {
        resolve(data);
      }
    });
  });
}

// Callback hell vs Promises
// Callback hell:
getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      console.log(c);
    });
  });
});

// With Promises:
getData()
  .then(a => getMoreData(a))
  .then(b => getEvenMoreData(b))
  .then(c => console.log(c));

More sets in Javascript

JavaScript Fundamentals(15+ Questions)
Operators and Functions(15+ Questions)
Arrays and Loops(15+ Questions)
Functions - Part 1(13+ Questions)
JavaScript Core Interview Essentials(13+ Questions)
Objects & Prototypes(12+ Questions)
Objects and this Keyword(15+ Questions)
Strings and Template Literals(15+ Questions)
Prototypes and Inheritance(14+ Questions)
ES6+ Advanced Features(12+ Questions)
Performance Optimization and Advanced Techniques(10+ Questions)
Call, Apply, Bind and Advanced Functions(14+ Questions)
DOM Manipulation and Events(12+ Questions)

Explore related subjects

HTML CSS Typescript SQL & Databases React Node Js

Continue your preparation

For complete preparation, combine this set with full subject-wise practice for Javascript. You can also explore other subjects and sets from the links below.

Quick navigation:Javascript subject page•All subjects

// Simple callback example function greet(name, callback) { console.log('Hello ' + name); callback(); } function sayBye() { console.log('Goodbye!'); } greet('John', sayBye); // Output: // Hello John // Goodbye! // Array methods use callbacks const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(num) { console.log(num * 2); }); // Asynchronous callback setTimeout(function() { console.log('This runs after 2 seconds'); }, 2000); // Event listener callback button.addEventListener('click', function() { console.log('Button clicked!'); }); // Callback with parameters function processData(data, successCallback, errorCallback) { if (data) { successCallback(data); } else { errorCallback('No data'); } } processData('Hello', function(result) { console.log('Success:', result); }, function(error) { console.log('Error:', error); } );

// Async function always returns Promise async function greet() { return 'Hello'; } greet().then(result => { console.log(result); // 'Hello' }); // Same as: function greetPromise() { return Promise.resolve('Hello'); } // Using await async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; } // Error handling with try catch async function getData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.log('Error:', error); } } // Multiple awaits async function getMultipleData() { const user = await fetchUser(); const posts = await fetchPosts(user.id); const comments = await fetchComments(posts[0].id); return {user, posts, comments}; } // Parallel execution async function getDataParallel() { const [user, posts, comments] = await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ]); return {user, posts, comments}; }

// Promise.all() - all must succeed const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then(results => { console.log(results); // [1, 2, 3] }); // If any fails, all fails const p1 = Promise.resolve(1); const p2 = Promise.reject('Error!'); const p3 = Promise.resolve(3); Promise.all([p1, p2, p3]) .then(results => console.log(results)) .catch(error => console.log(error)); // 'Error!' // Practical example - fetching multiple APIs async function getAllData() { try { const [users, posts, comments] = await Promise.all([ fetch('/api/users').then(r => r.json()), fetch('/api/posts').then(r => r.json()), fetch('/api/comments').then(r => r.json()) ]); console.log({users, posts, comments}); } catch (error) { console.log('One of the requests failed:', error); } } // Promise.race() - first to finish wins Promise.race([promise1, promise2, promise3]) .then(result => console.log(result)); // 1 (first to resolve) // Promise.allSettled() - wait for all, get all results Promise.allSettled([p1, p2, p3]) .then(results => console.log(results)); // [{status: 'fulfilled', value: 1}, // {status: 'rejected', reason: 'Error!'}, // {status: 'fulfilled', value: 3}] // Promise.any() - first successful promise Promise.any([p2, p1, p3]) .then(result => console.log(result)); // 1 (first fulfilled)

// Using try catch async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.log('Error:', error.message); } finally { console.log('Cleanup code runs always'); } } // Multiple awaits with error handling async function getUser(id) { try { const user = await fetchUser(id); const posts = await fetchPosts(user.id); const comments = await fetchComments(posts[0].id); return {user, posts, comments}; } catch (error) { console.log('Failed to get user data:', error); return null; } } // Using .catch() on async function fetchData().catch(error => { console.log('Caught:', error); }); // Handling specific errors async function getData() { try { const response = await fetch('/api/data'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); return data; } catch (error) { if (error.name === 'TypeError') { console.log('Network error'); } else { console.log('Other error:', error); } throw error; // Re-throw if needed } } // Without try catch (not recommended) async function badExample() { const data = await fetch('/api/data'); // Unhandled rejection! return data; }

// Creating a Promise const myPromise = new Promise((resolve, reject) => { const success = true; if (success) { resolve('Operation successful!'); // Fulfilled } else { reject('Operation failed!'); // Rejected } }); // Using the Promise myPromise .then(result => { console.log(result); // 'Operation successful!' }) .catch(error => { console.log(error); }); // Real example - simulating API call function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { const data = {name: 'John', age: 30}; resolve(data); // Fulfilled after 1 second }, 1000); }); } fetchData() .then(data => { console.log('Data received:', data); }) .catch(error => { console.log('Error:', error); }); // Chaining promises fetchData() .then(data => { console.log('First then:', data); return data.name; }) .then(name => { console.log('Second then:', name); }) .catch(error => { console.log('Error:', error); }) .finally(() => { console.log('Always runs'); });

console.log('1'); // Synchronous - runs immediately setTimeout(() => console.log('2'), 0); // Macrotask - queued Promise.resolve().then(() => console.log('3')); // Microtask - queued console.log('4'); // Synchronous - runs immediately // Execution order: // 1. Run all synchronous code: 1, 4 // 2. Run microtasks: 3 // 3. Run macrotasks: 2 // Output: 1, 4, 3, 2 // More complex example console.log('Start'); setTimeout(() => { console.log('Timeout 1'); Promise.resolve().then(() => console.log('Promise in timeout')); }, 0); Promise.resolve() .then(() => { console.log('Promise 1'); return Promise.resolve(); }) .then(() => console.log('Promise 2')); setTimeout(() => console.log('Timeout 2'), 0); console.log('End'); // Output: // Start // End // Promise 1 // Promise 2 // Timeout 1 // Promise in timeout // Timeout 2 // Event Loop Summary: // 1. Synchronous code runs first // 2. Microtasks (Promises, queueMicrotask) // 3. Macrotasks (setTimeout, setInterval, I/O)

// Problem with var for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); } // Output: 3, 3, 3 // Why? The loop runs: // i = 0, schedule callback // i = 1, schedule callback // i = 2, schedule callback // i = 3, loop ends // Now callbacks run and all see i = 3 // Solution 1: Use let (block scope) for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); } // Output: 0, 1, 2 // Solution 2: IIFE (Immediately Invoked Function Expression) for (var i = 0; i < 3; i++) { (function(j) { setTimeout(() => console.log(j), 0); })(i); } // Output: 0, 1, 2 // Solution 3: Pass parameter to setTimeout for (var i = 0; i < 3; i++) { setTimeout((num) => console.log(num), 0, i); } // Output: 0, 1, 2 // Understanding the event loop console.log('Start'); setTimeout(() => console.log('Timeout'), 0); Promise.resolve().then(() => console.log('Promise')); console.log('End'); // Output: Start, End, Promise, Timeout // (Microtasks run before macrotasks)

// Array methods are higher-order functions const numbers = [1, 2, 3, 4, 5]; // map - takes function, returns new array const doubled = numbers.map(n => n * 2); console.log(doubled); // [2, 4, 6, 8, 10] // filter - takes function, returns filtered array const evens = numbers.filter(n => n % 2 === 0); console.log(evens); // [2, 4] // reduce - takes function, returns single value const sum = numbers.reduce((acc, n) => acc + n, 0); console.log(sum); // 15 // Creating higher-order function function repeat(times, action) { for (let i = 0; i < times; i++) { action(i); } } repeat(3, console.log); // 0, 1, 2 // Returning a function function multiplier(factor) { return function(number) { return number * factor; }; } const double = multiplier(2); const triple = multiplier(3); console.log(double(5)); // 10 console.log(triple(5)); // 15 // Practical example - once function function once(fn) { let called = false; let result; return function(...args) { if (!called) { called = true; result = fn(...args); } return result; }; } const initialize = once(() => { console.log('Initialized!'); return 'Ready'; }); console.log(initialize()); // 'Initialized!' 'Ready' console.log(initialize()); // 'Ready' (no log) // Compose functions function compose(...fns) { return function(value) { return fns.reduceRight((acc, fn) => fn(acc), value); }; } const add5 = n => n + 5; const multiply3 = n => n * 3; const subtract2 = n => n - 2; const calculate = compose(subtract2, multiply3, add5); console.log(calculate(10)); // ((10 + 5) * 3) - 2 = 43 // Debounce (higher-order function) function debounce(fn, delay) { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => fn(...args), delay); }; } const search = debounce((query) => { console.log('Searching:', query); }, 500); // Memoization function memoize(fn) { const cache = {}; return function(...args) { const key = JSON.stringify(args); if (key in cache) return cache[key]; const result = fn(...args); cache[key] = result; return result; }; }

// Basic closure example function outer() { let count = 0; // Private variable return function inner() { count++; // Accesses outer variable return count; }; } const counter = outer(); console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 3 // count is kept alive by closure // Data privacy function createPerson(name) { let age = 0; // Private return { getName: function() { return name; }, getAge: function() { return age; }, birthday: function() { age++; } }; } const person = createPerson('John'); console.log(person.getName()); // 'John' console.log(person.getAge()); // 0 person.birthday(); console.log(person.getAge()); // 1 // console.log(person.age); // undefined (private!) // Function factory function multiplier(factor) { return function(number) { return number * factor; }; } const double = multiplier(2); const triple = multiplier(3); console.log(double(5)); // 10 console.log(triple(5)); // 15 // Event handler with closure function setupButtons() { for (let i = 0; i < 3; i++) { const button = document.createElement('button'); button.textContent = 'Button ' + i; button.addEventListener('click', function() { console.log('Button ' + i + ' clicked'); // i is remembered by closure }); } } // Memoization function memoize(fn) { const cache = {}; // Private cache return function(...args) { const key = JSON.stringify(args); if (key in cache) { console.log('From cache'); return cache[key]; } const result = fn(...args); cache[key] = result; return result; }; } const expensiveOperation = memoize((n) => { console.log('Computing...'); return n * n; }); console.log(expensiveOperation(5)); // Computing... 25 console.log(expensiveOperation(5)); // From cache 25

// Basic async await async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; } // Calling async function fetchData() .then(data => console.log(data)) .catch(error => console.log(error)); // Or with await (inside another async function) async function main() { const data = await fetchData(); console.log(data); } // Error handling with try catch async function getUserData(id) { try { const user = await fetchUser(id); const posts = await fetchPosts(user.id); const comments = await fetchComments(posts[0].id); return {user, posts, comments}; } catch (error) { console.log('Error:', error.message); return null; } finally { console.log('Cleanup'); } } // Sequential vs Parallel // Sequential (slow - takes 6 seconds) async function sequential() { const user = await fetchUser(); // 2 seconds const posts = await fetchPosts(); // 2 seconds const comments = await fetchComments(); // 2 seconds return {user, posts, comments}; } // Parallel (fast - takes 2 seconds) async function parallel() { const [user, posts, comments] = await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ]); return {user, posts, comments}; } // Using async await with loops async function processItems(items) { for (const item of items) { await processItem(item); // Sequential } } // Parallel processing with Promise.all async function processItemsParallel(items) { await Promise.all( items.map(item => processItem(item)) ); } // Compare with Promises // Promise way: fetchUser() .then(user => fetchPosts(user.id)) .then(posts => console.log(posts)) .catch(error => console.log(error)); // Async await way: async function getAndLogPosts() { try { const user = await fetchUser(); const posts = await fetchPosts(user.id); console.log(posts); } catch (error) { console.log(error); } }

// Takes function as argument function repeat(n, action) { for (let i = 0; i < n; i++) { action(i); } } repeat(3, console.log); // Output: 0, 1, 2 // Returns a function function multiplier(factor) { return function(number) { return number * factor; }; } const double = multiplier(2); const triple = multiplier(3); console.log(double(5)); // 10 console.log(triple(5)); // 15 // Array methods are higher-order functions const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(n => n * 2); const evens = numbers.filter(n => n % 2 === 0); const sum = numbers.reduce((acc, n) => acc + n, 0); // Practical example - once function function once(fn) { let called = false; return function(...args) { if (!called) { called = true; return fn(...args); } }; } const initialize = once(() => { console.log('Initialized!'); }); initialize(); // 'Initialized!' initialize(); // (nothing happens) initialize(); // (nothing happens)

// Event loop example console.log('1'); // Synchronous setTimeout(() => console.log('2'), 0); // Macrotask Promise.resolve().then(() => console.log('3')); // Microtask console.log('4'); // Synchronous // Output: 1, 4, 3, 2 // Explanation: // 1. Sync code: 1, 4 // 2. Microtasks: 3 // 3. Macrotasks: 2 // Complex example console.log('Start'); setTimeout(() => { console.log('Timeout 1'); Promise.resolve().then(() => console.log('Promise in timeout')); }, 0); Promise.resolve() .then(() => { console.log('Promise 1'); setTimeout(() => console.log('Timeout in promise'), 0); }) .then(() => console.log('Promise 2')); setTimeout(() => console.log('Timeout 2'), 0); console.log('End'); // Output: // Start // End // Promise 1 // Promise 2 // Timeout 1 // Promise in timeout // Timeout in promise // Timeout 2 // Why Promises before setTimeout? async function test() { console.log('A'); setTimeout(() => console.log('B'), 0); await Promise.resolve(); console.log('C'); setTimeout(() => console.log('D'), 0); } test(); console.log('E'); // Output: A, E, C, B, D // Microtask queue vs Macrotask queue queueMicrotask(() => console.log('Microtask')); setTimeout(() => console.log('Macrotask'), 0); // Microtask runs first // Event loop phases: // 1. Execute all synchronous code // 2. Process all microtasks // 3. Render (in browser) // 4. Process one macrotask // 5. Repeat from step 2

// Creating a Promise const myPromise = new Promise((resolve, reject) => { // Asynchronous operation setTimeout(() => { const success = true; if (success) { resolve('Success!'); // Fulfilled } else { reject('Failed!'); // Rejected } }, 1000); }); // Using the Promise myPromise .then(result => { console.log(result); // 'Success!' }) .catch(error => { console.log(error); }) .finally(() => { console.log('Cleanup'); }); // Chaining Promises fetchUser() .then(user => { console.log('Got user:', user); return fetchPosts(user.id); }) .then(posts => { console.log('Got posts:', posts); return fetchComments(posts[0].id); }) .then(comments => { console.log('Got comments:', comments); }) .catch(error => { console.log('Error in chain:', error); }); // Promise.all() - parallel operations Promise.all([ fetch('/api/users'), fetch('/api/posts'), fetch('/api/comments') ]) .then(([users, posts, comments]) => { console.log('All data loaded'); }) .catch(error => { console.log('One failed:', error); }); // Converting callback to Promise function readFilePromise(filename) { return new Promise((resolve, reject) => { fs.readFile(filename, 'utf8', (error, data) => { if (error) { reject(error); } else { resolve(data); } }); }); } // Callback hell vs Promises // Callback hell: getData(function(a) { getMoreData(a, function(b) { getEvenMoreData(b, function(c) { console.log(c); }); }); }); // With Promises: getData() .then(a => getMoreData(a)) .then(b => getEvenMoreData(b)) .then(c => console.log(c));

Closures and Asynchronous JavaScript – Javascript interview questions

Set overview

1. What is a callback function in JavaScript?

2. What does the async keyword do?

3. What does Promise.all() do?

4. How do you handle errors in async await?

5. What are the three states of a Promise?

6. What is the output order? console.log('1'); setTimeout(() => console.log('2'), 0); Promise.resolve().then(() => console.log('3')); console.log('4');

7. What will this code output? function outer() { let count = 0; return function inner() { count++; return count; }; } const counter = outer(); console.log(counter()); console.log(counter());

8. What will this code output? for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); }

9. What are higher-order functions? Provide examples and explain why they are useful.

10. What is a closure? Explain with examples and common use cases.

11. Explain async await in JavaScript. How does it make asynchronous code easier to write?

12. What is a higher-order function?

13. Explain the JavaScript event loop. How do microtasks and macrotasks differ?

14. Explain Promises in JavaScript. How do they work and why are they better than callbacks?

More sets in Javascript

Explore related subjects

Continue your preparation

Master Interviews Anywhere, Anytime

Closures and Asynchronous JavaScript – Javascript interview questions

Set overview

1. What is a callback function in JavaScript?

2. What does the async keyword do?

3. What does Promise.all() do?

4. How do you handle errors in async await?

5. What are the three states of a Promise?

6. What is the output order? console.log('1'); setTimeout(() => console.log('2'), 0); Promise.resolve().then(() => console.log('3')); console.log('4');

7. What will this code output? function outer() { let count = 0; return function inner() { count++; return count; }; } const counter = outer(); console.log(counter()); console.log(counter());

8. What will this code output? for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); }

9. What are higher-order functions? Provide examples and explain why they are useful.

10. What is a closure? Explain with examples and common use cases.

11. Explain async await in JavaScript. How does it make asynchronous code easier to write?

12. What is a higher-order function?

13. Explain the JavaScript event loop. How do microtasks and macrotasks differ?

14. Explain Promises in JavaScript. How do they work and why are they better than callbacks?

More sets in Javascript

Explore related subjects

Continue your preparation

Master Interviews
Anywhere, Anytime