JavaScript Interview Topics and Common Questions

JavaScript is one of the most widely used programming languages for web development. Whether you’re preparing for a job interview or just looking to brush up on your skills, understanding JavaScript concepts is key. In this guide, we’ll cover some of the most common JavaScript interview topics and questions, providing concise explanations and examples to help you prepare.

Core JavaScript Concepts

1. Closures

A closure is a function that retains access to its outer function’s scope, even after the outer function has finished execution. Closures are a fundamental concept in JavaScript.

Example:

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

const counter = outer();
console.log(counter()); // Output: 1

Here, the inner function is a closure that has access to the count variable from the outer function, even after outer has finished running.

2. Hoisting

Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the compilation phase. However, how they’re hoisted varies based on whether you use var, let, or const.

• var declarations are hoisted and initialized with undefined.
• let and const are hoisted, but are not initialized, leading to a “temporal dead zone” where you cannot access the variables before they are declared.
• Function declarations are fully hoisted, but function expressions are not.

Example:

console.log(x); // undefined (due to var x)
console.log(y); // ReferenceError (due to let y)

3. Equality Operators (== vs ===)

The == operator checks equality after performing type coercion, while the === operator checks both value and type without type conversion. Using === is generally recommended to avoid unexpected results.

Example:

5 == "5";  // true (type coercion)
5 === "5"; // false (different types)

DOM and Event Handling

4. Event Bubbling and Capturing

Events in JavaScript can propagate in two ways: bubbling and capturing.

• Bubbling: The event starts at the target element and bubbles up to the root element (default behavior).
• Capturing: The event starts at the root element and propagates down to the target element. You can enable this by setting the third argument in addEventListener to true.

Example:

element.addEventListener("click", handler, true); // Capturing phase

5. Event Delegation

Event delegation is a technique where you attach a single event listener to a parent element to handle events for multiple child elements. This is more efficient than attaching individual listeners to each child element.

Example:

document.getElementById("parent").addEventListener("click", (e) => {
  if (e.target.matches("button")) {
    console.log("Button clicked!");
  }
});

Asynchronous JavaScript

6. Promises

A promise is an object representing the eventual completion (or failure) of an asynchronous operation. It allows handling asynchronous code more easily compared to traditional callback methods.

Example:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Done!"), 1000);
});

promise.then(console.log); // Output: "Done!"

7. Async/Await

The async and await keywords provide a simpler way to work with promises. The await keyword pauses the execution of an asynchronous function until the promise resolves.

Example:

async function fetchData() {
  const res = await fetch("https://api.example.com");
  return res.json();
}

8. Event Loop

JavaScript’s event loop is responsible for executing code, handling events, and processing the callback queue. It ensures that asynchronous tasks, such as promises and timeouts, are handled in the right order.

• Microtasks (like promises) run before Macrotasks (like setTimeout).

Scope and the this Keyword

9. let vs const vs var

Understanding the difference between var, let, and const is crucial for managing variable scoping in JavaScript.

• var: Function-scoped, and variables are hoisted.
• let and const: Block-scoped, and not hoisted. const variables cannot be reassigned, but their properties can be changed.

10. The this Keyword

The value of this is determined by how a function is called. It refers to the context in which the function is executed. In arrow functions, this is lexically inherited from the surrounding scope.

Example:

const obj = {
  name: "Alice",
  greet: function() { console.log(this.name); }, // "Alice"
  greetArrow: () => console.log(this.name) // `this` refers to outer scope
};

Advanced Topics in JavaScript

11. Prototypal Inheritance

In JavaScript, objects inherit properties and methods from their prototypes. This allows for inheritance and shared functionality between objects.

Example:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}`);
};

const alice = new Person("Alice");
alice.sayHello(); // Output: "Hello, Alice"

12. Call, Apply, Bind

These methods allow you to control the value of this when invoking a function.

• call(): Invokes a function with a specified this context and arguments.
• apply(): Similar to call(), but takes an array of arguments.
• bind(): Returns a new function with this bound to a specific value.

Example:

const greet = function() { console.log(this.name); };
greet.call({ name: "Bob" }); // Output: "Bob"

13. Memoization

Memoization is a technique used to optimize performance by caching the results of expensive function calls.

Example:

const memoize = (fn) => {
  const cache = {};
  return (...args) => {
    const key = JSON.stringify(args);
    return cache[key] || (cache[key] = fn(...args));
  };
};

ES6+ Features

14. Spread/Rest Operator

The spread and rest operators allow you to work with arrays and objects more efficiently.

• Spread: Unpacks elements of an array or object.
• Rest: Collects elements into an array or object.

Example:

// Spread
const arr = [1, 2, 3];
const copy = [...arr];

// Rest
const sum = (...nums) => nums.reduce((a, b) => a + b);

15. Destructuring

Destructuring allows you to unpack values from arrays or objects into distinct variables.

Example:

const [a, b] = [1, 2];
const { name } = { name: "Alice", age: 30 };

Coding Challenges

Here are a couple of common coding challenges you may encounter in JavaScript interviews:

• Reverse a String const reverse = (str) => str.split("").reverse().join("");
• Debounce/Throttle
  Debouncing is used to limit the rate at which a function is executed, while throttling ensures that a function is invoked at most once in a given time frame. function debounce(fn, delay) { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => fn(...args), delay); }; }

Key Takeaways

• Practice: Regularly explain and practice coding challenges to solidify your understanding.
• Asynchronous JavaScript: Be sure you understand how promises, async/await, and the event loop work.
• Scope, Closures, and this: Understanding these concepts is crucial for working with JavaScript effectively.
• Modern JavaScript: Familiarize yourself with ES6+ features like spread/rest operators and destructuring.

With this guide, you’ll be well-prepared to tackle JavaScript interview questions and ace your interview! Let me know if you’d like a deeper dive into any of these topics.