JavaScript is a versatile language, and technical interviews often test your understanding of core concepts rather than syntax syntax. Here are the top 10 JavaScript interview questions with detailed explanations and code snippets to help you ace your next interview.
1. What is the difference between let, const, and var?
var is function-scoped, can be redeclared, and is hoisted to the top of its scope. let and const are block-scoped (scoped to the nearest curly braces {}), cannot be redeclared, and are subject to the Temporal Dead Zone (TDZ). Furthermore, const variables cannot be reassigned once declared, though objects and arrays declared with const can still be mutated.
2. Explain Closures in JavaScript.
A closure is the combination of a function bundled together with references to its surrounding state (the lexical environment). In other words, a closure gives an inner function access to the outer function's scope even after the outer function has returned.
function outer() {
let count = 0;
return function inner() {
count++;
return count;
};
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 23. What is hoisting?
Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope. Variable declarations (using var) and function declarations are hoisted. However, variable initializations are not hoisted. Variables declared with let and const are hoisted but not initialized, resulting in a ReferenceError if accessed before their declaration (TDZ).
4. Explain prototype-based inheritance.
Every JavaScript object has an internal property called [[Prototype]], which points to another object. When a property or method is accessed on an object, JavaScript checks if it exists on that object. If not, it looks up the prototype chain until it finds it or reaches null.
5. What is the event loop?
The event loop is a mechanism that allows JavaScript to perform non-blocking, asynchronous operations despite being single-threaded. It monitors the call stack and the task queue (macro and micro queues), pushing tasks from the queues onto the stack when the stack is empty.
6. What is the difference between == and ===?
== (loose equality) compares two values for equality after performing type coercion. === (strict equality) compares both the value and the type, returning false if they are different.
7. Explain promises and async/await.
A promise is an object representing the eventual completion (or failure) of an asynchronous operation. async/await is a syntactic sugar built on top of promises, making asynchronous code look and behave more like synchronous code, improving readability.
8. What is the "this" keyword?
The value of this is determined by how a function is called (runtime binding). In the global scope, it refers to the global object. In a method, it refers to the owner object. In arrow functions, this is lexically bound, meaning it retains the value of the enclosing lexical context.
9. How do you implement debouncing?
Debouncing limits the rate at which a function gets executed. It ensures that a function is called only after a certain amount of time has elapsed since the last time it was invoked.
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}10. What are higher-order functions?
A higher-order function is a function that takes one or more functions as arguments, or returns a function as its result. Common examples include map(), filter(), and reduce().