JavaScript Interview Essentials: 20 Core Concepts
This guide explains the 20 core JavaScript concepts you need to explain clearly in an interview, from closures and the event loop to promises and prototypal inheritance. Each concept is broken down with a plain-language definition, a simple code example, and the key details interviewers look for.
Why These 20 Concepts Matter
JavaScript interviews at most companies focus on a surprisingly consistent set of topics. These 20 concepts appear again and again because they test whether you understand how the language actually works under the hood, not just whether you can write code that happens to run. They cover the three pillars of modern JavaScript: execution model (event loop, hoisting, scope), asynchronous programming (callbacks, promises, async/await), and object-oriented patterns (prototypes, classes, closures).
Mastering these also helps you debug real-world issues. For example, understanding the event loop explains why a setTimeout callback runs after the rest of your code, and knowing closures helps you avoid accidental variable sharing in loops. Interviewers ask about these concepts because they are the building blocks of everything else you will do on the job.
Core Execution and Scope Concepts
1. Hoisting – Variable and function declarations are moved to the top of their scope during compilation. var declarations are hoisted and initialized to undefined; let and const are hoisted but not initialized, causing a temporal dead zone. Function declarations are fully hoisted, so you can call them before they appear in the code.
2. Closures – A closure is a function that retains access to its lexical scope even after the outer function has returned. This is how you create private variables and factory functions. Example:
function counter() {
let count = 0;
return function() { return ++count; };
}
const inc = counter();
inc(); // 1
inc(); // 23. Scope – JavaScript has global, function, and block scope. var is function-scoped; let and const are block-scoped. Understanding scope prevents unexpected variable collisions and helps you reason about where a variable is accessible.
4. The Event Loop – JavaScript is single-threaded, but the event loop allows non-blocking I/O. The call stack executes synchronous code; async callbacks are placed in the task queue (or microtask queue for promises) and are processed only when the stack is empty. This explains why setTimeout(fn, 0) runs after the current synchronous code.
5. The this Keyword – this is determined by how a function is called, not where it is defined. In a regular function, this refers to the global object (or undefined in strict mode). In a method, it refers to the object. Arrow functions inherit this from the surrounding scope.
6. Prototypal Inheritance – Every object has an internal prototype link to another object. When you access a property, JavaScript walks the prototype chain until it finds it or reaches null. This is how objects share behavior without classes.
Asynchronous Programming Concepts
7. Callbacks – A callback is a function passed as an argument to another function to be executed later. They are the foundation of async programming, but nested callbacks can lead to “callback hell.�
8. Promises – A promise represents a value that may be available now, later, or never. It has three states: pending, fulfilled, and rejected. Promises chain with .then() and handle errors with .catch(), making async code more readable than callbacks.
9. Async/Await – Syntactic sugar over promises. An async function always returns a promise; await pauses execution until the promise settles. This makes async code look synchronous, but you must handle errors with try/catch.
10. Microtasks vs. Macrotasks – Promises (microtasks) are processed before the next macrotask (like setTimeout). This ordering is crucial for predicting output in complex async scenarios.
Data Structures and Type Concepts
11. let, const, and var – var is function-scoped and hoisted; let and const are block-scoped. const prevents reassignment, but not mutation of objects. Interviewers often ask which to use: prefer const by default, let when you need to reassign, and avoid var in modern code.
12. Type Coercion – JavaScript automatically converts types in certain operations, e.g., '5' - 1 is 4 because the minus operator forces numeric conversion, while '5' + 1 is '51' because plus concatenates strings. Understanding coercion helps avoid bugs and explains why == is often discouraged in favor of ===.
13. == vs === – === checks both value and type; == performs type coercion. For example, 0 == false is true, but 0 === false is false. Always use === unless you have a specific reason.
14. Array Methods – map, filter, reduce, and forEach are essential. map transforms each element, filter selects elements that pass a test, reduce accumulates a single value, and forEach just iterates. Knowing when to use each shows you write declarative code.
Functions and Object Concepts
15. Arrow Functions – Arrow functions have a shorter syntax and do not have their own this, arguments, or super. They are ideal for callbacks where you want to preserve the outer this.
16. Spread and Rest Operators – The spread operator (...) expands an array or object into individual elements; the rest parameter collects multiple arguments into an array. Both are used for copying, merging, and function arguments.
17. Destructuring – Extract values from arrays or properties from objects into variables. Example: const { name, age } = person;. This simplifies code and is common in React and Node.js.
18. Classes – Introduced in ES6, classes are syntactic sugar over prototypes. They use constructor, super, and static methods. Under the hood, they still use prototypal inheritance.
Common Mistakes and Misconceptions
19. Misunderstanding this – A common mistake is assuming this inside a callback refers to the object that defined the method. In a regular function, it refers to the global object. Fix: use an arrow function or bind().
20. Blocking the Event Loop – Placing a heavy synchronous task (like a large loop) in the main thread blocks all other operations. This is why you should offload heavy work to Web Workers or split it into async chunks.
Another misconception is that const makes objects immutable. It only prevents reassignment; you can still modify properties. Use Object.freeze() for true immutability, but note it is shallow.
How to Prepare for the Interview
Practice explaining each concept out loud without looking at code. Interviewers often ask “What is a closure?� and then follow with “Give me an example.� Be ready to write code on a whiteboard or in an online editor. Focus on the “why� – for example, why the event loop exists (to handle async operations without blocking).
Also, be prepared to compare concepts: == vs ===, let vs var, promise vs callback. These comparisons show you understand trade-offs. Finally, run through common coding challenges like debouncing, throttling, or implementing a simple promise – they test several concepts at once.
Frequently Asked Questions
Q: What is the difference between null and undefined?
Both represent “no value,� but undefined means a variable has been declared but not assigned, while null is an intentional assignment of “no value.� typeof null is 'object' (a historical bug), and typeof undefined is 'undefined'.
Q: How do I explain closures to an interviewer?
Start with a simple definition: a function that remembers its lexical scope even when called outside that scope. Then give a counter example and explain that the inner function has access to count because of the closure. Mention that closures are used for data privacy and function factories.
Q: Why does setTimeout(fn, 0) not run immediately?
Because the event loop processes the call stack first. The callback is placed in the task queue and only runs after the current synchronous code finishes. This is why setTimeout(fn, 0) is often used to defer execution until the stack clears.
Q: What is the event loop in simple terms?
It is a mechanism that lets JavaScript perform non-blocking operations by offloading tasks to the browser or Node.js. When the call stack is empty, the loop picks up callbacks from the task queues and executes them. This is what allows async code to run without freezing the page.
Q: Should I use == or ===?
Always use === unless you explicitly need type coercion. === avoids unexpected conversions, making code more predictable and less buggy. Many linting rules enforce this.
Q: How can I practice these concepts?
Write small programs that use each concept, and explain them to a friend or rubber duck. Use online coding platforms for challenges. Also, read code from open-source projects to see how professionals use these patterns.
Related
Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.