Top 40 JavaScript Interview Questions and Answers (2024)

JavaScript Interview Questions and Answers

If You are Preparing for a front-end developer Job or a full-stack developer Post these JavaScript Interview Questions with Answers will help to revise the Concept in a Fast manner. Whether you are a Beginner or a Pro in JavaScript these 40+ Javascript interview questions are designed in such a manner to covering Basics to Advanced questions to help deepen your JavaScript knowledge and boost your interview confidence.

JavaScript is a versatile and widely used programming language essential for modern web development. Preparing for a JavaScript interview involves understanding key concepts such as closures, asynchronous programming, and event handling. Mastering these topics not only showcases your technical skills but also demonstrates your problem-solving abilities, making you a strong candidate for any web development role. Here are some common JavaScript interview questions to help you succeed.

Basic Javascript Interview Questions

Q.1 What are the different data types present in JavaScript?

JavaScript has several data types:

1. Number: Represents both integer and floating-point numbers.
2. String: Represents textual data.
3. Boolean: Represents true or false values.
4. Object: Represents a collection of properties and methods.
5. Undefined: Represents a variable that has been declared but not assigned a value.
6. Null: Represents the intentional absence of any object value.
7. Symbol: Represents a unique and immutable identifier.
8. BigInt: Represents integers with arbitrary precision.

Q.2 How can you create an array in JavaScript?

You can create an array in JavaScript in several ways:

• Using square brackets:

let array = [1, 2, 3, 4];

• Using the Array constructor:

let array = new Array(1, 2, 3, 4);

• Using the Array.of method:

let array = Array.of(1, 2, 3, 4);

• Using the Array.from method:

let array = Array.from([1, 2, 3, 4]);

Q.3 What is the use of NaN in JavaScript?

In JavaScript, NaN stands for “Not-a-Number.” It is used to represent a value that is not a valid number.

Q.4 How do you declare a variable in JavaScript?

You can declare a variable in JavaScript using var, let, or const:

• Using var:

var variableName = value;

• Using let:

let variableName = value;

• Using const:

const variableName = value;

Q.5 What is the difference between == and === in JavaScript?

In JavaScript, == and === are comparison operators with different behaviors:

• == (Equality Operator):
  • Compares two values for equality, after converting both values to a common type (type coercion).
  • Example:

5 == "5"; // true

• === (Strict Equality Operator):
  • Compares two values for equality without converting types. The values must be of the same type and value.
  • Example:

5 === "5"; // false 5 === 5; // true

Q.6 What is the scope of a variable declared with var in JavaScript?

In JavaScript, the scope of a variable declared with var is as follows:

• Function Scope:
  • Variables declared with var inside a function are scoped to that function.

function example() {
    var x = 10;
    console.log(x); // 10
}
console.log(x); // ReferenceError: x is not defined

• Global Scope:
  • Variables declared with var outside any function are globally scoped.

var y = 20;
console.log(y); // 20

• Hoisting:
  • Variables declared with var are hoisted to the top of their scope, but the initialization remains in place.

console.log(z); // undefined
var z = 30;

Q.7 How do you add an element to the front of an array?

To add an element to the front of an array, use the unshift() method in JavaScript. For example:

let array = [2, 3, 4];
array.unshift(1);
console.log(array); // Output: [1, 2, 3, 4]

Q.8 What are JavaScript undefined and null types? How are they different?

In JavaScript, undefined and null are two distinct types used to represent the absence of a value.

• undefined: A variable is automatically assigned undefined when it is declared but not initialized. It indicates the lack of an assigned value.

let x;
console.log(x); // Output: undefined

• null: It is an assignment value that represents the intentional absence of any object value. It is explicitly set to indicate no value.

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

Difference:

• undefined means a variable has been declared but not yet assigned a value.
• null means a variable has been explicitly assigned a “no value” value.

Q.9 What is the purpose of callback functions in JavaScript?

Callback functions in JavaScript are used to manage asynchronous operations and handle events. Their main purposes include:

1. Asynchronous Execution: Callbacks allow code to continue executing while waiting for a task (like data fetching or file loading) to complete. This helps in non-blocking operations.
2. Event Handling: They are commonly used in event-driven programming to respond to user actions or system events, like clicks, timer expirations, or data retrieval completion.
3. Modularity and Reusability: Callbacks promote modular programming by separating concerns. They can be passed as arguments to other functions, enabling code reuse and cleaner code structure.
4. Control Flow: They enable defining the sequence of operations in cases where execution order matters, ensuring actions happen in the intended sequence.

Q.10 How can you prevent a web page from being scrolled horizontally?

To prevent a web page from being scrolled horizontally, you can apply CSS styles to the <body> or another container element to restrict overflow and ensure content fits within the viewport width. Here’s how you can achieve this:

Method 1: CSS Overflow Property

Use CSS to set the overflow-x property to hidden on the <body> or a wrapper <div>:

body {
  overflow-x: hidden;
}

Method 2: Viewport Meta Tag

Include a viewport meta tag in the <head> section of your HTML document to control the initial scale and width of the viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Method 3: Responsive Design

Ensure your website or web application is designed responsively, using techniques like fluid layouts, CSS media queries, and flexible images to adapt content to different screen sizes without causing horizontal scrolling.

Method 4: JavaScript (Optional)

You can also use JavaScript to dynamically adjust the overflow property based on conditions or user interactions. However, this is less common for simply preventing horizontal scrolling.

Example Scenario

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>No Horizontal Scroll</title>
  <style>
    body {
      overflow-x: hidden;
    }
  </style>
</head>
<body>
  <!-- Your content here -->
</body>
</html>

Explanation

• CSS overflow-x: hidden;: This CSS rule ensures that any content extending beyond the viewport width (x-axis) is hidden, preventing horizontal scrolling.
• Viewport Meta Tag: It sets the initial width to match the device width (width=device-width) and prevents the user from scaling (maximum-scale=1.0, user-scalable=no), which helps in maintaining the layout without unwanted horizontal scrolling.

Implementing these methods ensures a clean user experience without the need for horizontal scrolling, particularly useful for responsive web design.

Intermediate Javascript Interview Questions

Q.11 What are closures in JavaScript and how do they work?

Closures in JavaScript are functions that have access to variables from their outer scope, even after the outer function has finished executing. They “close over” the variables they need, preserving them.

Here’s how they work:

1. Scope Preservation: When a function is defined within another function, it retains access to its parent function’s variables, even after the parent function has returned.
2. Access to Outer Variables: The inner function can access and manipulate variables from the outer function’s scope, even though those variables are not directly passed into the inner function.

Q.12 Can you explain what hoisting is in JavaScript?

Hoisting in JavaScript moves variable and function declarations to the top of their scope during compilation. This means variables are declared before they’re initialized, and functions are fully hoisted so they can be called before they’re defined in the code.

Q.13 What are JavaScript Promises and how do they work?

JavaScript Promises are objects that represent the eventual completion or failure of an asynchronous operation, and its resulting value. They simplify asynchronous programming by providing a more organized and readable way to handle callbacks.

Here’s how they work:

1. Promise States:
   • Pending: Initial state, neither fulfilled nor rejected.
   • Fulfilled: The operation completed successfully, with a result value.
   • Rejected: The operation failed, with an error reason.
2. Creating a Promise:
   • A promise is created using the new Promise constructor, which takes a function (executor) with resolve and reject parameters.
   • Example:

const myPromise = new Promise((resolve, reject) => {
    // Asynchronous operation (e.g., API call, file reading)
    // If successful:
    resolve('Success data');
    // If error:
    // reject('Error reason');
});

• Handling Promise Results:
  • Use .then() to handle a successful promise:

myPromise.then((result) => {
    console.log('Success:', result);
});

• Use .catch() to handle errors:

myPromise.catch((error) => {
    console.error('Error:', error);
});

• Chaining Promises:
  • Promises can be chained using .then() to execute operations sequentially:

myPromise
    .then((result) => {
        return anotherPromise(result);
    })
    .then((anotherResult) => {
        console.log('Chain success:', anotherResult);
    })
    .catch((error) => {
        console.error('Chain error:', error);
    });

Q.14 How do you handle exceptions in JavaScript?

In JavaScript, exceptions (errors) can be handled using try...catch blocks. Here’s a simple explanation of how it works:

1. Try Block:
   • Code that you suspect might throw an exception is placed inside a try block.
2. Catch Block:
   • If an exception is thrown inside the try block, control jumps to the catch block.
   • The catch block takes an error parameter that contains information about the exception.
3. Finally Block (optional):
   • You can optionally use a finally block after try...catch to execute code regardless of whether an exception was thrown or caught.
4. Throwing Exceptions:
   • You can throw your own exceptions using the throw statement.

Q.15 Explain how this keyword works in JavaScript.

In JavaScript, the this keyword refers to the object that is currently executing the function or the context in which the current code is running.

Here are key points about how this works in JavaScript:

1. Global Context: In the global execution context (outside of any function), this refers to the global object (window in browsers, global in Node.js).
2. Function Context: Inside a function, this depends on how the function is called:
   • Regular Function: If a function is called as a regular function (functionName()), this refers to the global object (in non-strict mode) or undefined (in strict mode).
   • Method: When a function is called as a method of an object (object.method()), this refers to the object that owns the method.
3. Arrow Functions: Arrow functions do not bind their own this context but inherit this from the surrounding (lexical) context where they were defined.
4. Constructor Functions: When a function is used as a constructor (new Constructor()), this refers to the newly created object.
5. Event Handlers: In event handlers, this typically refers to the element that received the event.

Understanding these contexts helps in correctly determining what this refers to in different parts of your JavaScript code.

Q.16 What is event bubbling and capturing in JavaScript?

Event bubbling and event capturing are two mechanisms for handling how events propagate through the DOM (Document Object Model) in JavaScript.

1. Event Bubbling:
   • Definition: Event bubbling is the default behavior in which an event starts from the target element and bubbles up through its ancestors in the DOM hierarchy.
   • Usage: Bubbling allows handling events on parent elements rather than attaching handlers to every individual child element, which can improve efficiency and maintainability.
2. Event Capturing:
   • Definition: Event capturing is the opposite of bubbling. It involves capturing the event from the root of the DOM tree down to the target element.
   • Usage: Capturing is less common but can be useful in specific scenarios where you want to intercept events on the way down to the target, possibly to modify or prevent the event before it reaches the actual target element.

Q.17 How do you use the map function on an array in JavaScript?

In JavaScript, the map() function is used on arrays to iterate over each element and apply a transformation or computation, creating a new array with the results. Here’s how you use it:

Syntax:

const newArray = array.map(callback(currentValue[, index[, array]]) {
    // return element for newArray, after executing something
}, [, thisArg]);

Q.18 What are arrow functions? How do they differ from traditional functions?

Arrow functions in JavaScript are a concise way to write anonymous functions. They differ from traditional functions in a few key ways:

1. Syntax: Arrow functions have a shorter syntax compared to traditional functions, omitting the function keyword and using a fat arrow => instead.
2. Binding of this: Arrow functions do not bind their own this context but inherit it from the parent scope (lexical scoping). Traditional functions, when used as methods in objects or called with new, bind this to their respective context.
3. Return behavior: Arrow functions with a single expression automatically return the result of the expression without needing an explicit return statement (implicit return). Traditional functions require an explicit return statement to return a value.

Q.19 How can you convert a NodeList to an Array?

You can convert a NodeList to an Array in JavaScript using the Array.from() method or by using the spread syntax ([...nodeList]). Here’s how you can do it:

• Using Array.from():

const nodeList = document.querySelectorAll('some-selector');
const arrayFromNodeList = Array.from(nodeList);

• Using the spread syntax:

const nodeList = document.querySelectorAll('some-selector');
const arrayFromNodeList = [...nodeList];

Both methods achieve the same result of converting a NodeList into a standard JavaScript Array, which gives you access to array methods like .forEach(), .map(), .filter(), etc., that are not directly available on NodeLists.

Q.20 What is JSON and how do you handle JSON data in JavaScript?

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write, and easy for machines to parse and generate. It is widely used for transmitting data between a server and web application as text.

In JavaScript, handling JSON data involves:

• Parsing JSON: Converting a JSON string into a JavaScript object using JSON.parse():

const jsonString = '{"name": "John", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Outputs: John

• Stringifying JavaScript Objects: Converting a JavaScript object into a JSON string using JSON.stringify():

const jsonObject = { name: 'John', age: 30 };
const jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // Outputs: {"name":"John","age":30}

• Accessing JSON Data: Once parsed, you can access data in a JSON object like any other JavaScript object:

console.log(jsonObject.name); // Outputs: John

Q.21 Explain the difference between let, var, and const.

In JavaScript, let, var, and const are used to declare variables, but they differ in terms of scope, hoisting, and mutability:

Q.22 How can you create and use a custom object in JavaScript?

To create and use a custom object in JavaScript:

• Creating the Object:

// Define the object using object literal notation
let customObject = {
    property1: value1,
    property2: value2,
    method1: function() {
        // Method logic here
    },
    // Additional properties and methods as needed
};

• Accessing Object Properties:

// Accessing properties
let propValue = customObject.property1;

• Calling Object Methods:

// Calling methods
customObject.method1();

• Adding or Modifying Properties:

// Adding or modifying properties
customObject.newProperty = newValue;

• Using the Object in Code:

// Using the object in code
console.log(customObject.property1);
customObject.method1();

Q.23 What is the Prototype chain in JavaScript?

In JavaScript, the Prototype chain is a mechanism for object inheritance. Every object in JavaScript has a prototype (except for the base object, Object.prototype). When you access a property on an object, JavaScript first checks if the object itself has that property. If it doesn’t, it looks at the object’s prototype, and then continues up the chain until it finds the property or reaches the end of the chain (null). This chain allows objects to inherit properties and methods from their prototypes, facilitating a form of object-oriented programming in JavaScript.

Q.24 How do you perform form validation using JavaScript?

Form validation in JavaScript involves checking user input before submitting it to ensure it meets certain criteria. Here’s a basic approach:

1. HTML Setup: Use HTML5 form validation attributes like required, pattern, etc., for basic validation.
2. JavaScript Validation:
   • Access Form Elements: Use document.getElementById() or document.querySelector() to access form elements.
   • Event Handling: Use event listeners (submit, input, etc.) to trigger validation.
   • Validation Logic: Write functions to validate each field based on your requirements (e.g., checking if it’s empty, matches a pattern, etc.).
   • Display Errors: Show error messages near each input field if validation fails.
   • Prevent Submission: Use event.preventDefault() to stop the form from submitting if validation fails.

Here’s a concise example:

// Assume HTML form has id="myForm" and input fields with appropriate attributes

document.getElementById('myForm').addEventListener('submit', function(event) {
    // Validate each field
    var nameInput = document.getElementById('name');
    var emailInput = document.getElementById('email');

    if (!nameInput.value.trim()) {
        showError(nameInput, 'Name is required');
        event.preventDefault();
    } else {
        hideError(nameInput);
    }

    if (!emailInput.value.trim()) {
        showError(emailInput, 'Email is required');
        event.preventDefault();
    } else if (!isValidEmail(emailInput.value)) {
        showError(emailInput, 'Enter a valid email address');
        event.preventDefault();
    } else {
        hideError(emailInput);
    }
});

function showError(input, message) {
    var errorSpan = input.nextElementSibling; // Assuming error message is next to input
    errorSpan.textContent = message;
    errorSpan.style.display = 'block';
}

function hideError(input) {
    var errorSpan = input.nextElementSibling;
    errorSpan.textContent = '';
    errorSpan.style.display = 'none';
}

function isValidEmail(email) {
    // Use a regular expression or any validation logic you prefer
    var emailRegex = /^[^\\\\s@]+@[^\\\\s@]+\\\\.[^\\\\s@]+$/;
    return emailRegex.test(email);
}

This script checks if the name and email fields are filled out and, in the case of the email field, if the input matches a valid email format using a regular expression. Adjust and expand this logic based on your specific validation needs.

Q.25 What is the DOM and how does JavaScript interact with it?

The DOM (Document Object Model) is a representation of the structure and content of a web page, created by the browser when the page loads. JavaScript interacts with the DOM by accessing elements (like HTML tags) and manipulating them dynamically. This interaction allows JavaScript to change content, style, and structure of the web page in response to user actions or other events.

Q.26 Explain the module pattern and how it is used in JavaScript.

The module pattern in JavaScript is a design pattern used for creating encapsulated and reusable code. It leverages closures to achieve private and public encapsulation of functionalities within a module.

Here’s how it works:

1. Encapsulation: Variables and functions defined within the module are private by default, meaning they are not accessible or modifiable from outside the module.
2. Public Interface: You define a public API (interface) using an object literal or a function that exposes only necessary functions and variables. These are accessible from outside the module.

Q.27 How do you make an HTTP request in JavaScript?

To make an HTTP request in JavaScript, you can use the fetch API or the XMLHttpRequest object.

• Using fetch API:

fetch(url)
  .then(response => response.json())
  .then(data => {
    // Handle data here
  })
  .catch(error => {
    console.error('Error:', error);
  });

• Using XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('Success:', xhr.responseText);
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function () {
  console.error('Request failed');
};
xhr.send();

These methods allow you to fetch data from a URL asynchronously in JavaScript.

Q.28 What are template literals in JavaScript?

Template literals are a feature in JavaScript that allow for easier string interpolation and multiline strings. They are enclosed by backticks (“) instead of single or double quotes.

Q.29 What are service workers and how are they used?

Service workers are scripts that run in the background of a web browser and manage caching, network requests, and push notifications. They are used to enhance the performance and offline capabilities of web applications by allowing them to work without an internet connection and providing a smoother user experience.

Q.30 Explain the use of spread and rest operators in JavaScript.

In JavaScript, the spread (...) and rest (...) operators are powerful tools for working with arrays and function arguments, respectively:

1. Spread Operator (...):
   • Use in Arrays: Allows an array to be expanded into individual elements.
   • Use in Function Calls: Used to spread elements of an array into a function that takes multiple arguments.
   • Copying Arrays: Creates a new array instead of mutating the original.
2. Rest Parameter (...):
   • Function Arguments: Allows handling of an indefinite number of function arguments as an array.
   • Destructuring Arrays: Collects remaining elements into a new array.

Advanced Javascript Interview Questions

Q.31 How does JavaScript event loop work?

JavaScript event loop manages asynchronous operations by continuously checking the call stack and task queue. It processes tasks in the queue when the call stack is empty, ensuring non-blocking behavior.

Q.32 Explain setInterval, setTimeout, and requestAnimationFrame. When should each be used?

1. setInterval:
   • Purpose: Executes a function repeatedly at a specified interval (in milliseconds).
   • Use: Use setInterval when you need a function to run repeatedly, such as for polling or periodic updates.
2. setTimeout:
   • Purpose: Executes a function once after a specified delay (in milliseconds).
   • Use: Use setTimeout when you need a function to run after a delay, typically for executing something after a certain time interval.
3. requestAnimationFrame (rAF):
   • Purpose: A specialized method for scheduling animations in the browser, designed to optimize performance.
   • Use: Use requestAnimationFrame for smooth animations and updates that occur as part of the browser’s rendering cycle.

Q.33 What are WebSockets? How do they differ from HTTP requests?

WebSockets are a protocol that provides full-duplex communication channels over a single TCP connection. They allow for bi-directional communication between a client (such as a browser) and a server, enabling real-time data transfer.

Here’s a concise comparison to HTTP requests:

1. WebSockets: Enable persistent connections where both the client and server can initiate communication. They are designed for real-time applications like chat apps, live updates, and online gaming.
2. HTTP Requests: Are stateless, meaning each request from a client is independent. They are typically used for fetching resources from a server, like loading web pages, submitting forms, or fetching data from an API..

Q.34 Explain the concept of memory leaks in JavaScript.

Memory leaks in JavaScript occur when the application keeps holding onto memory that is no longer needed, preventing it from being garbage collected. This can lead to increasing memory usage over time, potentially causing the application to slow down or even crash.

To avoid memory leaks, it’s crucial to:

• Use let or const for variable declaration to limit scope.
• Remove event listeners and timers when they are no longer needed.
• Be mindful of closures and avoid retaining references unintentionally.
• Use browser developer tools to profile memory usage and identify leaks early in development.

Q.35 What are generators and how do they work in JavaScript?

Generators in JavaScript are functions that can be paused and resumed, allowing multiple values to be returned over time, rather than all at once. They are defined using the function* syntax and use yield to produce a sequence of values. Generators are iterable, meaning you can iterate over their values using a for...of loop or by spreading them into an array or another iterable context. They are particularly useful for asynchronous programming, simplifying complex async flows with async/await syntax.

Q.36 What are the new features introduced in ES6 (ECMAScript 2015)?

ES6 (ECMAScript 2015) introduced several new features to JavaScript, including:

1. Arrow Functions: Concise syntax for writing anonymous functions.
2. let and const: Block-scoped variable declarations.
3. Template Literals: String literals with embedded expressions.
4. Destructuring Assignment: Extract values from arrays or objects into variables.
5. Default Parameters: Set default values for function parameters.
6. Rest Parameters: Gather remaining function arguments into an array.
7. Spread Operator (…): Spread elements of an iterable (like arrays) into places where multiple arguments or elements are expected.
8. Classes: Syntactical sugar over JavaScript’s existing prototype-based inheritance.
9. Modules: Enable modular JavaScript using import and export statements.
10. Promises: Simplify handling of asynchronous operations.
11. Symbol: Create unique identifiers for object properties.
12. Iterators and Iterables: Introduce protocols for iterating over data structures.

These features enhance readability, maintainability, and functionality of JavaScript code, making it more expressive and capable for modern development practices.

Q.37 How can you handle state management in JavaScript applications?

You can handle state management in JavaScript applications using various methods:

1. Using React Context API: For managing state across components without prop drilling.
2. Redux: A predictable state container for JavaScript apps, particularly useful for larger applications with complex state management needs.
3. useState Hook (in React): For managing local component state in functional components.
4. MobX: A simple, scalable state management library that makes state management simple and scalable.
5. VueX (in Vue.js): State management pattern + library for Vue.js applications.
6. Custom State Management: Implementing your own state management using vanilla JavaScript or other libraries like Zustand or Recoil.

Each approach has its strengths depending on the size and complexity of your application.

Q.38 What is the Shadow DOM and how is it used?

The Shadow DOM is a crucial part of web component technology in web development. It allows you to encapsulate the styles and functionality of a component so that its internals are isolated from the rest of the document. Here’s how it’s used:

1. Encapsulation: It encapsulates the markup, styles, and behavior of a component, preventing them from affecting or being affected by styles outside the component.
2. Isolation: Styles defined inside the Shadow DOM are scoped to the component, avoiding conflicts with global styles.
3. Composition: Components using Shadow DOM can be composed together without their styles leaking into each other.
4. Encouraging Reusability: Encapsulation ensures that components are self-contained, making them more reusable across different parts of an application or even across different projects.
5. JavaScript Encapsulation: Besides styles, JavaScript code inside the Shadow DOM is also encapsulated, allowing components to have private functionality that cannot be accessed or modified from outside.

Q.39 Discuss JavaScript design patterns you are familiar with.

Certainly! Here are a few JavaScript design patterns:

1. Module Pattern:
   • Encapsulates private and public methods using closures.
2. Singleton Pattern:
   • Ensures a class has only one instance and provides a global point of access.
3. Observer Pattern:
   • Defines a one-to-many dependency between objects, where changes in one object can notify and update others.
4. Factory Pattern:
   • Creates objects without specifying the exact class of object that will be created.
5. Facade Pattern:
   • Provides a simplified interface to a complex system of classes, making it easier to use.

Q.40 Explain tree shaking and code splitting in JavaScript.

Tree Shaking

Tree shaking is a technique used by bundlers (like Webpack) to eliminate dead code (unused imports) from the final bundle. It relies on the static structure of ES6 modules (import/export statements) to determine which modules are imported and used. The goal is to reduce the size of the bundle delivered to the browser, improving load times and performance.

• How it works:
  • During the bundling process, the tool analyzes the import/export statements.
  • It then identifies which modules and variables are actually used (reachable code).
  • Unused modules and their exports are removed (shaken off) from the bundle.

Code Splitting

Code splitting is a technique used to split your code into smaller bundles that can be loaded on demand. Instead of loading the entire application at once, code splitting allows loading only the necessary parts when required, typically based on user interaction or navigation.

• How it works:
  • Developers use tools like dynamic import() or React.lazy() (in React applications) to specify points where the code can be split.
  • When the browser encounters a dynamic import, it requests and loads that specific module only when needed.
  • This approach reduces the initial load time and improves the perceived performance of the application.

Q.41 What is the difference between call stack and task queue?

The call stack is a mechanism for the JavaScript interpreter to keep track of function calls. It operates in a Last In, First Out (LIFO) manner. The task queue (also known as the event queue) holds tasks to be executed asynchronously. Tasks in the queue are processed only when the call stack is empty, based on event-driven principles.

JavaScript Interview Questions FAQs