Top 40 JavaScript Interview Questions and Answers

Here are top 40 Javascript questions that are frequently asked in Frontend interviews -

𝗕𝗮𝘀𝗶𝗰𝘀 𝗼𝗳 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

What is JavaScript?
Explain the difference between let, const, and var.

A. In JavaScript, let, const, and var are used to declare variables, but they differ in terms of scope, hoisting, and mutability. Here's a brief explanation of the differences:

var:
- Scope: var is function-scoped, meaning it is visible throughout the whole function in which it is declared. If declared outside any function, it becomes a global variable.
- Hoisting: Variables declared with var are hoisted to the top of their scope during the compilation phase, so they can be used before they are declared.
- Reassignment: var allows reassignment of values.

    javascriptCopy codefunction exampleVar() {
      if (true) {
        var x = 10;
        console.log(x); // 10
      }
      console.log(x); // 10
    }

let:
- Scope: let is block-scoped, meaning it is only visible within the block (or statement) where it is declared. It is also scoped to the nearest enclosing curly braces {}.
- Hoisting: Like var, let is hoisted, but unlike var, it is not initialized until the interpreter reaches the declaration.
- Reassignment: let allows reassignment of values.

    javascriptCopy codefunction exampleLet() {
      if (true) {
        let y = 20;
        console.log(y); // 20
      }
      // console.log(y); // Error: y is not defined
    }

const:
- Scope: const is block-scoped, similar to let.
- Hoisting: Like let, const is hoisted, but it is not initialized until the interpreter reaches the declaration.
- Reassignment: const is a constant and cannot be reassigned after declaration. It must be assigned a value when declared.

    javascriptCopy codefunction exampleConst() {
      if (true) {
        const z = 30;
        console.log(z); // 30
      }
      // console.log(z); // Error: z is not defined
    }

In summary, var is function-scoped, let and const are block-scoped. Both let and const support block scoping, but const is used for variables that should not be reassigned after initialization. Use const by default and only use let when you need to reassign a variable. Avoid using var in modern JavaScript code due to its quirks and potential issues with scoping and hoisting.

How does hoisting work in JavaScript?

A.Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the compilation phase. This means that you can use a variable or function before it's declared in your code. However, it's important to note that only the declarations are hoisted, not the initializations.

Here are two common scenarios where hoisting occurs: variable declarations (var) and function declarations.

Variable Hoisting:

javascriptCopy codeconsole.log(x);  // Output: undefined
var x = 5;
console.log(x);  // Output: 5

In this example, the var x declaration is hoisted to the top, but the assignment (x = 5) is not. As a result, the first console.log(x) outputs undefined because x has been hoisted with an initial value of undefined.

Function Hoisting:

javascriptCopy codesayHello();  // Output: Hello!
function sayHello() {
  console.log('Hello!');
}

In this example, the entire function declaration function sayHello() {...} is hoisted to the top, allowing you to call the function before its actual position in the code.

Hoisting with let and const:

javascriptCopy codeconsole.log(y);  // ReferenceError: Cannot access 'y' before initialization
let y = 10;

Unlike var, variables declared with let and const are hoisted, but they are not initialized until their declaration. This is known as the "temporal dead zone," and attempting to access the variable before its declaration results in a ReferenceError.

Hoisting with Function Expressions:

javascriptCopy codesayHello();  // TypeError: sayHello is not a function
var sayHello = function() {
  console.log('Hello!');
};

In the case of function expressions, only the variable declaration (var sayHello) is hoisted, not the function assignment (sayHello = function() {...}). Therefore, trying to invoke sayHello() before the assignment results in a TypeError.

It's important to be aware of hoisting in JavaScript to avoid unexpected behavior and to write clean and readable code by declaring variables and functions before using them.

Describe the concept of closures.

A . Closures are self-contained blocks of code that encapsulate variables and functions. They capture and store references to the variables in the surrounding context, allowing them to retain state even after the original scope has finished executing. This helps create more flexible and modular code, often used in asynchronous programming and functional programming paradigms.

Here's a breakdown of the key components and characteristics of closures:
1. Function Definitions Inside Other Functions: Closures are often created when a function is defined inside another function. The inner function has access to the outer function's variables and parameters.
```
  function outerFunction() {
   let outerVariable = 'I am from the outer function';

   function innerFunction() {
     console.log(outerVariable); // Accessing outerVariable from the outer scope
   }

   return innerFunction;
 }

 const closureFunction = outerFunction();
 closureFunction(); // Outputs: I am from the outer function
```
2. Access to Outer Scope Variables: The inner function within the closure has access to variables from its containing scope, even after the outer function has finished executing.
3. Preservation of Variable State: Closures "remember" the values of variables in their lexical scope, even if the outer function has completed execution. This is often used to create private variables and maintain state.
```
 function counter() {
   let count = 0;

   return function() {
     count++;
     console.log(count);
   };
 }

 const increment = counter();
 increment(); // Outputs: 1
 increment(); // Outputs: 2
```
4. Function Factories: Closures are frequently used to create function factories. The outer function serves as a factory that generates and returns inner functions with specific behavior based on the environment in which they were created.
```
 function multiplier(factor) {
   return function (x) {
     return x * factor;
   };
 }

 const double = multiplier(2);
 console.log(double(5)); // Outputs: 10
```

Closures provide a powerful mechanism for creating modular and encapsulated code. They are commonly used in scenarios such as data encapsulation, maintaining state, and creating functions with specific behavior based on their creation context. Understanding closures is fundamental to becoming proficient in JavaScript programming.

Q.Explain the event loop in JavaScript.

A. The event loop is a crucial concept in JavaScript that enables asynchronous operations and non-blocking behavior. It plays a significant role in handling events, I/O operations, and managing the execution of code in a single-threaded environment.

Here's a high-level explanation of how the event loop works in JavaScript:

Single-Threaded Execution: JavaScript is single-threaded, meaning it has only one execution thread. This thread is responsible for executing the code, and it proceeds line by line through the program. This single-threaded nature ensures simplicity and avoids certain types of bugs related to race conditions.
Call Stack: The call stack is a data structure that stores function calls during the execution of a program. When a function is called, it is pushed onto the call stack. When the function completes, it is popped off the stack.
Asynchronous Operations: JavaScript supports asynchronous operations, such as setTimeout, AJAX requests, and event listeners. These operations are offloaded to browser APIs (like Web APIs provided by the browser or Node.js APIs in the case of server-side JavaScript) and are not handled directly by the JavaScript engine.
Callback Queue: When an asynchronous operation completes, a callback function associated with that operation is placed in the callback queue. Callbacks are functions that are executed after the completion of a certain task, such as a timer expiring or an HTTP request finishing.
Event Loop: The event loop constantly checks the call stack and the callback queue. If the call stack is empty, it takes the first function from the callback queue and pushes it onto the call stack, initiating its execution. This process continues in a loop, giving the appearance of parallelism without introducing additional threads.

Here's a simplified sequence of how the event loop operates:

Execute synchronous code until the call stack is empty.
Check the callback queue for pending callbacks.
If the call stack is empty, dequeue and execute the first callback from the callback queue.
Repeat the process.

console.log('Start');

setTimeout(function() {
  console.log('Timer callback');
}, 0);

console.log('End');

In this example, even though the timer is set to zero, the timer callback is placed in the callback queue after the synchronous code has finished executing. The event loop then picks up the callback and executes it, resulting in the following output:

Understanding the event loop is crucial for writing asynchronous JavaScript code and handling tasks such as user interactions, network requests, and timers effectively.

Describe the concept of closures.
Explain the event loop in JavaScript.
What is the difference between == and ===?
How do you check the type of a variable in JavaScript?
What is the use of the this keyword in JavaScript?
Explain the difference between function declaration and function expression.
How does the setTimeout function work?

𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗮𝗻𝗱 𝗦𝗰𝗼𝗽𝗲

What is a callback function?
Explain the concept of a pure function.
Describe the differences between function.call, function.apply, and function.bind.
What is the purpose of the arguments object in a function?
How do you create a closure in JavaScript?
What is the use of the bind method?
What is the difference between a shallow copy and a deep copy?
How does the call stack work in JavaScript?
Explain the concept of function currying.
How can you avoid callback hell in JavaScript?

𝟮𝟭-𝟯𝟬: 𝗢𝗯𝗷𝗲𝗰𝘁𝘀 𝗮𝗻𝗱 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲𝘀

What is prototypal inheritance?
How do you create an object in JavaScript?
What is the purpose of the prototype property in JavaScript?
Explain the difference between Object.create and the constructor pattern.
How do you add a property to an object in JavaScript?
What is the hasOwnProperty method used for?
How can you prevent modification of object properties in JavaScript?
Describe the use of the new keyword.
Explain the concept of Object Destructuring in JavaScript.
What is the difference between null and undefined?

𝟯𝟭-𝟰𝟬: 𝗗𝗢𝗠 𝗠𝗮𝗻𝗶𝗽𝘂𝗹𝗮𝘁𝗶𝗼𝗻 𝗮𝗻𝗱 𝗘𝘃𝗲𝗻𝘁𝘀

What is the DOM?
How do you select elements with Vanilla JavaScript?

Explain event delegation in JavaScript.

Event delegation is a technique in JavaScript where instead of attaching an event listener to each individual element, you attach a single event listener to a common ancestor of those elements. This single event listener then listens for events that bubble up from the child elements, and it can handle those events centrally. This approach is more efficient, especially when dealing with a large number of elements, as it reduces the number of event handlers and simplifies the code.

Here's a breakdown of how event delegation works:

Single Event Listener:
- Instead of adding an event listener to each individual child element, you attach a single event listener to a common ancestor, often a parent or the document itself.
Event Bubbling:
- When an event occurs on a nested (child) element, it triggers the same event on its parent elements, all the way up to the document root. This process is known as event bubbling.
Event Handling:
- The single event listener on the common ancestor can then check the event.target property to determine which specific child element triggered the event. Based on this information, it can execute the appropriate code.

Here's a simple example in HTML and JavaScript:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Delegation Example</title>
</head>
<body>

<ul id="parentList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<script>
  // Add a single event listener to the parent element (ul)
  document.getElementById('parentList').addEventListener('click', function(event) {
    // Check if the clicked element is an 'li' element
    if (event.target.tagName === 'LI') {
      // Log the text content of the clicked 'li' element
      console.log('Clicked on:', event.target.textContent);
    }
  });
</script>

</body>
</html>

In this example, a click event listener is added to the <ul> element. When a list item (<li>) is clicked, the event bubbles up to the <ul>, and the event handler checks if the clicked element is an <li>. If true, it logs the text content of that <li> element.

Event delegation is especially useful when dealing with dynamically added or removed elements, as you don't need to add and remove event listeners for each element individually.

What is the purpose of the addEventListener method?

he addEventListener method in JavaScript is used to attach an event handler (a function) to a specified element for a particular event type. This method allows you to define how the element should respond when the specified event occurs. The addEventListener method is commonly used in web development for handling user interactions, such as clicks, keypresses, form submissions, and more.

The syntax for addEventListener is as follows:

javascriptCopy codeelement.addEventListener(eventType, callbackFunction [, useCapture]);

element: The DOM element to which you want to attach the event listener.
eventType: A string representing the type of event you want to listen for (e.g., "click", "mouseover", "keydown").
callbackFunction: The function to be executed when the specified event occurs.
useCapture (optional): A boolean value that indicates whether the event should be captured during the capturing phase (true) or the bubbling phase (false, default).

Here's a simple example using addEventListener to handle a click event:

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>addEventListener Example</title>
</head>
<body>

<button id="myButton">Click me</button>

<script>
  // Get the button element
  var button = document.getElementById('myButton');

  // Add a click event listener
  button.addEventListener('click', function() {
    alert('Button clicked!');
  });
</script>

</body>
</html>

In this example, when the button is clicked, the specified callback function (in this case, an anonymous function displaying an alert) is executed.

Using addEventListener provides a more flexible and efficient way to handle events compared to older methods like onclick, as it allows you to attach multiple event listeners to the same element for different event types and encourages cleaner separation of concerns in your code.

How do you create and remove elements in the DOM?

Create Element:
- To create a new HTML element, you can use the document.createElement method.

    var newElement = document.createElement('div');

Set Element Properties:
- You can set various properties for the newly created element, such as id, className, textContent, etc.

    newElement.id = 'myNewElement';
    newElement.textContent = 'Hello, World!';

Append to Parent:
- To add the new element to the DOM, you can use methods like appendChild or insertBefore.

    var parentElement = document.getElementById('parentContainer');
    parentElement.appendChild(newElement);

Removing Elements:

Remove Child:
- To remove an element from its parent, you can use the removeChild method on the parent element.

     var parentElement = document.getElementById('parentContainer');
    var childElement = document.getElementById('myNewElement');
    parentElement.removeChild(childElement);

Remove Self (Modern Browsers):
- In modern browsers, you can use the remove method directly on the element to remove itself.

    var elementToRemove = document.getElementById('myNewElement');
    elementToRemove.remove();

Explain the concept of event propagation.

Event propagation refers to the flow of an event through the different phases of the Document Object Model (DOM). When an event occurs on an HTML element, it goes through two main phases: capturing phase and bubbling phase. Understanding event propagation is crucial for managing event handlers efficiently and handling events in a structured way.

Here are the two phases of event propagation:

Capturing Phase:
- In the capturing phase, the event starts from the root of the DOM tree and goes down to the target element. This phase allows you to capture the event on the ancestors of the target element before it reaches the target.
- Event listeners attached during the capturing phase will be executed in the order of the ancestors from the root to the target element.
Target Phase:
- The event reaches the target element, and the event listeners attached directly to the target element are executed.
Bubbling Phase:
- After the target phase, the event begins to bubble up from the target element back to the root of the DOM tree.
- Event listeners attached during the bubbling phase will be executed in the order of the ancestors from the target element back to the root.

How can you prevent the default behaviour of an event?

To prevent the default behavior of an event in JavaScript, you can use the preventDefault method on the event object. This method is commonly used to stop the default action associated with an event, such as preventing a form from being submitted, a link from navigating to a new page, or a context menu from appearing.

What is the purpose of the data- attribute in HTML?

Describe the difference between innerHTML and textContent.

innerHTML deals with HTML markup, including tags, while textContent deals with plain text content.
Using innerHTML to update content involves HTML parsing, making it suitable for manipulating the HTML structure dynamically.
textContent is faster and safer when working with plain text because it doesn't parse content as HTML, reducing the risk of introducing unintended side effects or security vulnerabilities.
When setting content with textContent, any HTML tags within the assigned text will be treated as plain text and displayed as such, not as HTML elements.

How do you handle asynchronous code in JavaScript?

Handling asynchronous code in JavaScript typically involves using callbacks, promises, or more recently, async/await. Asynchronous code is common when dealing with operations like fetching data from a server, reading/writing to a database, or handling user input events. Here's an overview of the three main approaches:

Callbacks:
- Callbacks are functions that are passed as arguments to other functions and are executed after the completion of a specific task.
Promises:
- Promises provide a more structured way to handle asynchronous code and avoid callback hell.
- A Promise represents a value that might be available now, or in the future, or never.
- Promises have three states: pending, resolved (fulfilled), or rejected.
Async/Await:
- Async/await is a modern JavaScript feature that provides a more synchronous-like syntax for dealing with asynchronous code. It is built on top of promises.
- The async keyword is used to declare an asynchronous function, and await is used to pause the execution of the function until the promise is resolved.
- Example:

Top 40 Javascript questions