Top 25 JavaScript Technical Interview Questions with Detailed Explanations

JavaScript is one of the most widely used programming languages in the world, and mastering it is essential for any web developer. Whether you're preparing for a technical interview or just looking to deepen your understanding of JavaScript, this article covers the top 25 JavaScript technical interview questions with detailed explanations and examples. Let's dive in!

1. What is JavaScript, and how does it differ from Java?

JavaScript is a high-level, interpreted programming language primarily used for client-side scripting in web browsers. It allows developers to create dynamic and interactive web pages. Despite the similar names, JavaScript and Java are entirely different languages. Java is a statically typed, compiled language, while JavaScript is dynamically typed and interpreted at runtime.

Key Takeaways:

• JavaScript is lightweight and runs in the browser, while Java is a heavyweight language used for backend and standalone applications.
• JavaScript is dynamically typed, meaning variable types are determined at runtime, whereas Java is statically typed.

2. Explain the difference between `let`, `var`, and `const`.

In JavaScript, `let`, `var`, and `const` are used to declare variables, but they have different scoping rules and behaviors:

• `var`: Function-scoped and can be redeclared and updated.
• `let`: Block-scoped and can be updated but not redeclared.
• `const`: Block-scoped and cannot be updated or redeclared.

  // Example 1: var is function-scoped
  function exampleVar() {
      if (true) {
          var x = 10;
      }
      console.log(x); // 10 (var is accessible outside the block)
  }
  exampleVar();

  // Example 2: let is block-scoped
  function exampleLet() {
      if (true) {
          let y = 20;
      }
      console.log(y); // ReferenceError: y is not defined
  }
  exampleLet();

  // Example 3: const cannot be reassigned
  const z = 30;
  z = 40; // TypeError: Assignment to constant variable
  

Key Takeaways:

• Use `var` sparingly due to its function scope and hoisting behavior.
• Prefer `let` for variables that need to be reassigned within a block.
• Use `const` for variables that should not change after initialization.

3. What is hoisting in JavaScript?

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compilation phase. However, only the declarations are hoisted, not the initializations.

  // Example 1: Variable hoisting
  console.log(x); // undefined
  var x = 5;

  // Example 2: Function hoisting
  foo(); // "Hello"
  function foo() {
      console.log("Hello");
  }

  // Example 3: Function expressions are not hoisted
  bar(); // TypeError: bar is not a function
  var bar = function() {
      console.log("World");
  };
  

Key Takeaways:

• Always declare variables at the top of their scope to avoid confusion.
• Use `let` and `const` to avoid hoisting-related issues.

4. Explain closures in JavaScript.

A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope. Closures are commonly used to create private variables or to maintain state in asynchronous operations.

  // Example 1: Basic closure
  function outer() {
      let count = 0;
      return function inner() {
          count++;
          console.log(count);
      };
  }
  const counter = outer();
  counter(); // 1
  counter(); // 2

  // Example 2: Closure with private variables
  function createCounter() {
      let count = 0;
      return {
          increment: function() {
              count++;
              console.log(count);
          },
          decrement: function() {
              count--;
              console.log(count);
          }
      };
  }
  const counter2 = createCounter();
  counter2.increment(); // 1
  counter2.increment(); // 2
  counter2.decrement(); // 1
  

Key Takeaways:

• Closures are powerful for encapsulating data and creating private variables.
• They are widely used in callbacks, event handlers, and functional programming.

5. What is the difference between `==` and `===`?

The `==` operator checks for equality after performing type coercion, while `===` checks for strict equality without type coercion.

  // Example 1: == with type coercion
  console.log(5 == '5'); // true

  // Example 2: === without type coercion
  console.log(5 === '5'); // false

  // Example 3: Edge cases
  console.log(null == undefined); // true
  console.log(null === undefined); // false
  

Key Takeaways:

• Always use `===` to avoid unexpected type coercion.
• Use `==` only when you explicitly need type coercion.

6. What is the `this` keyword in JavaScript?

The `this` keyword refers to the object that is executing the current function. Its value depends on how the function is called:

• In a method, `this` refers to the object that owns the method.
• In a function, `this` refers to the global object (window in browsers).
• In strict mode, `this` is undefined in functions.

  // Example 1: this in a method
  const obj = {
      name: 'John',
      greet: function() {
          console.log('Hello, ' + this.name);
      }
  };
  obj.greet(); // Hello, John

  // Example 2: this in a function
  function greet() {
      console.log('Hello, ' + this.name);
  }
  greet(); // Hello, undefined (or window.name in non-strict mode)

  // Example 3: this in strict mode
  'use strict';
  function strictGreet() {
      console.log('Hello, ' + this.name);
  }
  strictGreet(); // TypeError: Cannot read property 'name' of undefined
  

Key Takeaways:

• Use `bind`, `call`, or `apply` to explicitly set the value of `this`.
• Arrow functions do not have their own `this` and inherit it from the parent scope.

7. What are promises in JavaScript?

Promises are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They are used to handle asynchronous operations more gracefully than callbacks.

  // Example 1: Basic promise
  const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
          resolve('Success!');
      }, 1000);
  });
  promise.then((message) => {
      console.log(message); // Success!
  });

  // Example 2: Chaining promises
  const fetchData = new Promise((resolve) => {
      setTimeout(() => resolve('Data fetched'), 1000);
  });
  fetchData
      .then((data) => {
          console.log(data); // Data fetched
          return 'Processed data';
      })
      .then((processedData) => {
          console.log(processedData); // Processed data
      });

  // Example 3: Error handling
  const errorPromise = new Promise((resolve, reject) => {
      setTimeout(() => reject('Error occurred'), 1000);
  });
  errorPromise
      .then((message) => console.log(message))
      .catch((error) => console.error(error)); // Error occurred
  

Key Takeaways:

• Promises simplify asynchronous code and avoid callback hell.
• Use `async/await` for even cleaner asynchronous code.

8. Explain the concept of event delegation.

Event delegation is a technique where you delegate the handling of an event to a parent element rather than attaching event listeners to individual child elements. This is useful for improving performance and handling dynamically added elements.

  // Example: Event delegation
  document.getElementById('parent').addEventListener('click', (event) => {
      if (event.target.tagName === 'LI') {
          console.log('List item clicked!');
      }
  });
  

Key Takeaways:

• Event delegation reduces the number of event listeners, improving performance.
• It is especially useful for dynamic content where elements are added or removed frequently.

9. What is the difference between `null` and `undefined`?

`null` is an assignment value that represents no value or no object, while `undefined` means a variable has been declared but not yet assigned a value.

  // Example 1: undefined
  let x;
  console.log(x); // undefined

  // Example 2: null
  let y = null;
  console.log(y); // null

  // Example 3: typeof
  console.log(typeof x); // undefined
  console.log(typeof y); // object
  

Key Takeaways:

• Use `null` to explicitly indicate the absence of a value.
• `undefined` typically means a variable has not been initialized.

10. What is the purpose of the `bind` method?

The `bind` method creates a new function that, when called, has its `this` keyword set to the provided value. It is useful for setting the context of `this` in a function.

  // Example: Using bind
  const obj = {
      name: 'Alice'
  };
  function greet() {
      console.log('Hello, ' + this.name);
  }
  const boundGreet = greet.bind(obj);
  boundGreet(); // Hello, Alice
  

Key Takeaways:

• `bind` is useful for fixing the context of `this` in callback functions.
• It does not immediately invoke the function but returns a new function with the bound context.

11. What are arrow functions, and how do they differ from regular functions?

Arrow functions are a concise way to write functions in JavaScript. They do not have their own `this` context and inherit `this` from the parent scope. They also cannot be used as constructors.

  // Example 1: Basic arrow function
  const add = (a, b) => a + b;
  console.log(add(2, 3)); // 5

  // Example 2: this in arrow functions
  const obj = {
      name: 'Alice',
      greet: function() {
          setTimeout(() => {
              console.log('Hello, ' + this.name);
          }, 1000);
      }
  };
  obj.greet(); // Hello, Alice
  

Key Takeaways:

• Arrow functions are shorter and more concise than regular functions.
• They do not have their own `this`, `arguments`, `super`, or `new.target`.
• Use arrow functions for non-method functions and callbacks.

12. What is the difference between `call`, `apply`, and `bind`?

`call`, `apply`, and `bind` are used to set the `this` value explicitly in a function. The key differences are:

• `call`: Invokes the function immediately with a specified `this` value and individual arguments.
• `apply`: Similar to `call`, but takes arguments as an array.
• `bind`: Returns a new function with a specified `this` value but does not invoke it immediately.

  // Example: Using call, apply, and bind
  const obj = { name: 'Bob' };

  function greet(greeting) {
      console.log(greeting + ', ' + this.name);
  }

  greet.call(obj, 'Hello'); // Hello, Bob
  greet.apply(obj, ['Hi']); // Hi, Bob

  const boundGreet = greet.bind(obj);
  boundGreet('Hey'); // Hey, Bob
  

Key Takeaways:

• Use `call` or `apply` when you need to invoke a function immediately with a specific `this` value.
• Use `bind` when you want to create a new function with a fixed `this` value for later use.

13. What is the event loop in JavaScript?

The event loop is a mechanism that allows JavaScript to perform non-blocking I/O operations despite being single-threaded. It continuously checks the call stack and processes tasks from the callback queue when the stack is empty.

  // Example: Event loop in action
  console.log('Start');

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

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

  console.log('End');

  // Output: Start, End, Promise, Timeout
  

Key Takeaways:

• The event loop enables asynchronous behavior in JavaScript.
• Tasks in the microtask queue (e.g., promises) are executed before tasks in the macrotask queue (e.g., `setTimeout`).

14. What is the difference between `setTimeout` and `setInterval`?

`setTimeout` executes a function once after a specified delay, while `setInterval` repeatedly executes a function at specified intervals until it is cleared.

  // Example 1: setTimeout
  setTimeout(() => {
      console.log('This runs once after 1 second');
  }, 1000);

  // Example 2: setInterval
  const intervalId = setInterval(() => {
      console.log('This runs every 1 second');
  }, 1000);

  // Clear the interval after 5 seconds
  setTimeout(() => {
      clearInterval(intervalId);
  }, 5000);
  

Key Takeaways:

• Use `setTimeout` for one-time delayed execution.
• Use `setInterval` for repeated execution at fixed intervals.
• Always clear intervals when they are no longer needed to avoid memory leaks.

15. What is the purpose of the `async` and `await` keywords?

`async` and `await` are used to handle asynchronous operations in a more readable and synchronous-like manner. An `async` function returns a promise, and `await` pauses the execution until the promise is resolved.

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

Key Takeaways:

• `async/await` makes asynchronous code look and behave like synchronous code.
• Always use `try/catch` to handle errors in `async` functions.

16. What is the difference between `localStorage` and `sessionStorage`?

`localStorage` and `sessionStorage` are used to store data in the browser. The key difference is that `localStorage` data persists even after the browser is closed, while `sessionStorage` data is cleared when the session ends (i.e., when the browser is closed).

  // Example: Using localStorage and sessionStorage
  localStorage.setItem('name', 'John');
  sessionStorage.setItem('name', 'Doe');

  console.log(localStorage.getItem('name')); // John
  console.log(sessionStorage.getItem('name')); // Doe
  

Key Takeaways:

• Use `localStorage` for long-term storage.
• Use `sessionStorage` for temporary storage during a session.

17. What is the purpose of the `Map` object in JavaScript?

The `Map` object is a collection of key-value pairs where both the keys and values can be of any type. It provides methods for easy manipulation and retrieval of data.

  // Example: Using Map
  const map = new Map();
  map.set('name', 'Alice');
  map.set(1, 'One');

  console.log(map.get('name')); // Alice
  console.log(map.get(1)); // One
  

Key Takeaways:

• `Map` is more flexible than plain objects for storing key-value pairs.
• Use `Map` when you need keys of any type or when order matters.

18. What is the difference between `forEach` and `map`?

`forEach` executes a provided function once for each array element but does not return a new array. `map` creates a new array with the results of calling a provided function on every element in the array.

  // Example: Using forEach and map
  const arr = [1, 2, 3];

  arr.forEach((item) => console.log(item)); // 1, 2, 3

  const newArr = arr.map((item) => item * 2);
  console.log(newArr); // [2, 4, 6]
  

Key Takeaways:

• Use `forEach` for side effects (e.g., logging).
• Use `map` when you need to transform an array into a new array.

19. What is the purpose of the `reduce` method?

The `reduce` method executes a reducer function on each element of the array, resulting in a single output value. It is useful for summing up values or accumulating results.

  // Example: Using reduce
  const arr = [1, 2, 3];
  const sum = arr.reduce((acc, curr) => acc + curr, 0);
  console.log(sum); // 6
  

Key Takeaways:

• `reduce` is powerful for aggregating array values into a single result.
• Always provide an initial value to avoid unexpected behavior.

20. What is the difference between `slice` and `splice`?

`slice` returns a shallow copy of a portion of an array, while `splice` changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

  // Example: Using slice and splice
  const arr = [1, 2, 3, 4];

  const sliced = arr.slice(1, 3);
  console.log(sliced); // [2, 3]

  arr.splice(1, 2, 5);
  console.log(arr); // [1, 5, 4]
  

Key Takeaways:

• Use `slice` to create a new array from a portion of an existing array.
• Use `splice` to modify an array in place by adding, removing, or replacing elements.

21. What is the purpose of the `Proxy` object?

The `Proxy` object is used to define custom behavior for fundamental operations (e.g., property lookup, assignment, enumeration). It allows you to intercept and redefine operations performed on objects.

  // Example: Using Proxy
  const target = {
      name: 'Alice'
  };
  const handler = {
      get: function(obj, prop) {
          return prop in obj ? obj[prop] : 'Unknown';
      }
  };
  const proxy = new Proxy(target, handler);
  console.log(proxy.name); // Alice
  console.log(proxy.age); // Unknown
  

Key Takeaways:

• `Proxy` is useful for creating custom behavior for object operations.
• It can be used for validation, logging, or even creating reactive objects.

22. What is the purpose of the `Symbol` data type?

`Symbol` is a primitive data type that represents a unique and immutable value. It is often used as an identifier for object properties to avoid name collisions.

  // Example: Using Symbol
  const sym1 = Symbol('description');
  const sym2 = Symbol('description');
  console.log(sym1 === sym2); // false

  const obj = {
      [sym1]: 'value1',
      [sym2]: 'value2'
  };
  console.log(obj[sym1]); // value1
  

Key Takeaways:

• `Symbol` ensures unique property keys, preventing accidental overwrites.
• It is often used for defining private or special properties in objects.

23. What is the difference between `Object.freeze` and `Object.seal`?

`Object.freeze` makes an object immutable, preventing new properties from being added and existing properties from being modified or deleted. `Object.seal` prevents new properties from being added but allows existing properties to be modified.

  // Example: Using Object.freeze and Object.seal
  const obj = { name: 'Alice' };

  Object.freeze(obj);
  obj.name = 'Bob'; // Error in strict mode
  console.log(obj.name); // Alice

  Object.seal(obj);
  obj.name = 'Charlie'; // Allowed
  obj.age = 25; // Error in strict mode
  console.log(obj.name); // Charlie
  

Key Takeaways:

• Use `Object.freeze` to make an object completely immutable.
• Use `Object.seal` to prevent adding new properties while allowing modifications to existing ones.

24. What is the purpose of the `WeakMap` object?

`WeakMap` is similar to `Map`, but its keys must be objects, and it holds weak references to those objects. This means that if there are no other references to the key object, it can be garbage collected.

  // Example: Using WeakMap
  const weakMap = new WeakMap();
  const obj = {};
  weakMap.set(obj, 'value');
  console.log(weakMap.get(obj)); // value

  // If obj is no longer referenced, it can be garbage collected
  

Key Takeaways:

• `WeakMap` is useful for associating metadata with objects without preventing garbage collection.
• It is often used in libraries and frameworks for caching or private data storage.

25. What is the purpose of the `Generator` function?

A `Generator` function allows you to define an iterative algorithm by writing a single function that can maintain its own state. It is defined using the `function*` syntax and yields values using the `yield` keyword.

  // Example: Using Generator
  function* generator() {
      yield 1;
      yield 2;
      yield 3;
  }
  const gen = generator();
  console.log(gen.next().value); // 1
  console.log(gen.next().value); // 2
  console.log(gen.next().value); // 3
  

Key Takeaways:

• Generators are useful for creating iterators and handling asynchronous flows.
• They allow you to pause and resume function execution, making them ideal for lazy evaluation.

Congratulations! You've now explored the top 25 JavaScript technical interview questions. These concepts are essential for mastering JavaScript and excelling in technical interviews. Keep practicing, and happy coding!