Javascript interviews questions and answers with code

By Atharv Gyan
JavaScript interview questions along with answers and code examples



1. Question: What is the difference between null and undefined in JavaScript?
    • Answer:
      • null is a deliberate assignment representing the absence of any object value.
      • undefined is a variable that has been declared but not assigned any value.

  2. 2. Question: Explain the concept of closures in JavaScript.

    • Answer:

      • Closures occur when a function is defined inside another function, allowing the inner function to access the outer function's variables. This creates a scope chain.
function outerFunction() { let outerVariable = 'I am outer!'; function innerFunction() { console.log(outerVariable); } return innerFunction; } let closureExample = outerFunction(); closureExample();

// Outputs: I am outer!

  1. 3. Question: What is the event loop in JavaScript?

    • Answer:
      • The event loop is a mechanism that handles asynchronous tasks in JavaScript. It continuously checks the call stack and the callback queue. When the call stack is empty, it takes the first function in the queue and pushes it onto the call stack.

  2. 4. Question: Describe the concept of prototypal inheritance in JavaScript.

    • Answer:

      • In JavaScript, objects can inherit properties and methods from other objects. Each object has a prototype object, and when a property or method is not found on an object, JavaScript looks for it in the object's prototype chain.
function Animal(name) { this.name = name; } Animal.prototype.sayName = function() { console.log('My name is ' + this.name); }; let cat = new Animal('Whiskers'); cat.sayName();

// Outputs: My name is Whiskers

5. Question: Explain the concept of hoisting.

  • Answer:

    • Hoisting is a JavaScript behavior 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.

console.log(x);

// Outputs: undefined var x = 5;

6. Question: How does async/await work in JavaScript?

  • Answer:

    • async/await is used to work with asynchronous code more synchronously. The async keyword is used to create a function that returns a promise, and await is used inside an async function to pause execution until the promise is resolved.

async function fetchData() { let response = await fetch('https://api.example.com/data'); let data = await response.json(); console.log(data); } fetchData();

7. Question: What is the this keyword in JavaScript?

  • Answer:

    • In JavaScript, this refers to the current execution context. The value of this depends on how a function is called. In a regular function, this refers to the global object, but in a method, it refers to the object that the method is called on.

function sayHello() { console.log('Hello, ' + this.name + '!'); } let person = { name: 'John', greet: sayHello }; person.greet();

// Outputs: Hello, John!

8. Question: Explain the concept of promises in JavaScript.

  • Answer:

    • Promises are a way to handle asynchronous operations in a more readable and maintainable manner. A promise can be in one of three states: pending, fulfilled, or rejected.

function fetchData() {
  return new Promise((resolve, reject) => {
    // Asynchronous operation, e.g., fetching data
    if (dataIsFetchedSuccessfully) {
      resolve(data);
    } else {
      reject('Error fetching data');
    }
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

9. Question: What is the purpose of the JavaScript map function?

  • Answer:

    • The map function is used to create a new array by applying a provided function to each element of an existing array. It does not modify the original array.

let numbers = [1, 2, 3, 4, 5]; let squaredNumbers = numbers.map(num => num * num); console.log(squaredNumbers); // Outputs: [1, 4, 9, 16, 25]

10. Question: How does event delegation work in JavaScript?

  • Answer:

    • Event delegation is a technique where a single event listener is attached to a common ancestor rather than to individual elements. This is particularly useful when dealing with a large number of similar elements.

document.getElementById('parentElement').addEventListener('click', function(event) { if (event.target.tagName === 'LI') { console.log('List item clicked:', event.target.textContent); } });

  1. 11. Question: Explain the concept of the Same-Origin Policy and how it relates to JavaScript.

    • Answer:
      • The Same-Origin Policy is a security measure in web browsers that restricts web pages from making requests to a different domain than the one that served the web page. This policy helps prevent malicious scripts from making unauthorized requests.

  2. 12. Question: What are arrow functions in JavaScript, and how do they differ from regular functions?

    • Answer:

      • Arrow functions are a more concise way to write function expressions in JavaScript. They have a shorter syntax and automatically bind the this value, which can be advantageous in certain situations.
// Regular function let add = function(a, b) { return a + b; }; // Arrow function let add = (a, b) => a + b;

13. Question: What is the purpose of the JavaScript localStorage and sessionStorage objects?

  • Answer:

    • localStorage and sessionStorage are Web Storage APIs that provide a way to store key/value pairs in a web browser. localStorage persists data beyond a single session, while sessionStorage stores data for the duration of a page session.

// Storing data in localStorage localStorage.setItem('username', 'JohnDoe'); // Retrieving data from localStorage let username = localStorage.getItem('username'); console.log(username);

// Outputs: JohnDoe

14. Question: How does JavaScript handle asynchronous operations, and what are Promises used for?

  • Answer:

    • JavaScript uses an event-driven, non-blocking I/O model to handle asynchronous operations. Promises are used to represent the eventual completion or failure of an asynchronous operation. They simplify the management of asynchronous code, making it more readable and maintainable.

function fetchData() { return new Promise((resolve, reject) => { // Asynchronous operation if (dataIsFetchedSuccessfully) { resolve(data); } else { reject('Error fetching data'); } }); } fetchData() .then(data => console.log(data)) .catch(error => console.error(error));

15. Question: Explain the concept of the Single Responsibility Principle in the context of JavaScript functions.

  • Answer:

    • The Single Responsibility Principle (SRP) states that a function or module should have only one reason to change. In JavaScript, this principle encourages the creation of functions that perform a single, well-defined task.

// Example violating SRP function processDataAndDisplayUI(data) { // Process data // Display UI } // Better adherence to SRP function processData(data) { // Process data } function displayUI() { // Display UI }

16. Question: What is the purpose of the JavaScript fetch API?

  • Answer:

    • The fetch API is used for making network requests (e.g., fetching data from a server) in a more modern and flexible way than the traditional XMLHttpRequest. It returns a Promise that resolves to the Response to that request.

fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));

17. Question: Describe the concept of event bubbling in JavaScript.

  • Answer:

    • Event bubbling is the process where an event starts from the target element and bubbles up through its ancestors in the DOM hierarchy. This allows a single event listener on a common ancestor to handle events for multiple elements.

<div id="parent"> <button id="child">Click me</button> </div> <script> document.getElementById('parent').addEventListener('click', function(event) { console.log('Event bubbled up to parent element'); }); </script>

18. Question: Explain the difference between let, const, and var in JavaScript.

  • Answer:

    • let and const were introduced in ECMAScript 6 (ES6) and have block scope, while var has function scope. let allows reassignment, const is for constant values, and var is the older way of declaring variables.

let x = 10; const y = 20; var z = 30; if (true) { let x = 50; // Creates a new variable x with block scope const y = 100; // Creates a new variable y with block scope var z = 200; // Modifies the existing variable z with function scope }

19. Question: How does JavaScript handle prototypal inheritance, and how is it different from classical inheritance?

  • Answer:

    • JavaScript uses prototypal inheritance, where objects can inherit properties directly from other objects. This is different from classical inheritance in languages like Java or C++. In JavaScript, each object has a prototype object, and properties are inherited through the prototype chain.

function Animal(name) { this.name = name; } Animal.prototype.sayName = function() { console.log('My name is ' + this.name); }; function Cat(name, color) { Animal.call(this, name); this.color = color; } Cat.prototype = Object.create(Animal.prototype); let cat = new Cat('Whiskers', 'Gray'); cat.sayName(); // Outputs: My name is Whiskers

20. Question: What is the purpose of the JavaScript bind method?

  • Answer:

    • The bind method is used to create a new function with a specified this value and initial arguments. It allows you to set the context in which a function is invoked, making it useful for creating functions with predefined behaviors.

let person = { name: 'John', greet: function() { console.log('Hello, ' + this.name + '!'); } }; let greetFunction = person.greet; greetFunction(); // Outputs: Hello, undefined let boundGreet = person.greet.bind(person); boundGreet();

// Outputs: Hello, John!

  1. 21. Question: What is the Event Loop in JavaScript, and how does it work?

    • Answer:
      • The Event Loop is a crucial part of JavaScript's concurrency model. It continuously checks the call stack for functions to execute and the message queue for messages to process. If the call stack is empty, it takes the first message from the queue and pushes it onto the call stack.

  2. 22. Question: How would you handle cross-origin requests in JavaScript?

    • Answer:
      • Cross-origin requests are subject to the Same-Origin Policy. To handle them, you can use techniques like Cross-Origin Resource Sharing (CORS) on the server side or JSONP (JSON with Padding) for specific scenarios. Alternatively, you can make requests through a server as a proxy.

23. Question: What is the purpose of the setTimeout function in JavaScript?

  • Answer:

    • setTimeout is used to schedule the execution of a function after a specified delay in milliseconds. It allows for asynchronous execution, commonly used for animations, delays, or any operation that should happen after a certain period.

console.log('Start'); setTimeout(function() { console.log('Delayed message'); }, 1000); // Executes after 1000 milliseconds (1 second) console.log('End');

24. Question: Explain the concept of the JavaScript spread operator and where it is commonly used.

  • Answer:

    • The spread operator (...) is used to expand elements of an array or properties of an object. It is commonly used for creating shallow copies of arrays or objects, combining arrays, and passing multiple arguments to functions.

// Spread in arrays let arr1 = [1, 2, 3]; let arr2 = [...arr1, 4, 5]; // Spread in objects let obj1 = { a: 1, b: 2 }; let obj2 = { ...obj1, c: 3 }; // Passing multiple arguments to a function function sum(a, b, c) { return a + b + c; } let numbers = [1, 2, 3]; let result = sum(...numbers); console.log(result);

// Outputs: 6

25. Question: What is the purpose of the JavaScript try...catch statement?

  • Answer:

    • The try...catch statement is used to handle exceptions (errors) in JavaScript. Code that might throw an exception is placed inside the try block, and if an exception occurs, it is caught and handled in the catch block.

try { // Code that might throw an exception throw new Error('Something went wrong'); } catch (error) { console.error('Error caught:', error.message); }

26. Question: How does the concept of event delegation improve the performance of event handling in JavaScript?

  • Answer:

    • Event delegation improves performance by attaching a single event listener to a common ancestor rather than attaching individual listeners to multiple elements. This reduces the number of event listeners, making the code more efficient, especially when dealing with a large number of elements.

<ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script> document.getElementById('list').addEventListener('click', function(event) { if (event.target.tagName === 'LI') { console.log('List item clicked:', event.target.textContent); } }); </script>

27. Question: Explain the difference between == and === in JavaScript.

  • Answer:

    • == is the equality operator, which performs type coercion, meaning it converts the operands to the same type before making the comparison. === is the strict equality operator, which checks both value and type without coercion.

5 == '5'; // true (coercion: string '5' is converted to number 5) 5 === '5'; // false (strict equality: different types)

  1. 28. Question: What is the JavaScript event loop, and how does it handle asynchronous operations?

    • Answer:
      • The event loop is a core concept in JavaScript's concurrency model. It continuously checks the call stack for functions to execute. When the stack is empty, it processes messages in the message queue, handling asynchronous operations. This allows non-blocking execution in JavaScript.

  2. 29. Question: Explain the purpose of the Promise.all method in JavaScript.

    • Answer:

      • Promise.all is used to handle multiple promises concurrently. It takes an array of promises and returns a new promise that fulfills with an array of results when all the input promises have been fulfilled, or rejects with the reason of the first rejected promise.
let promise1 = fetch('https://api.example.com/data1'); let promise2 = fetch('https://api.example.com/data2'); Promise.all([promise1, promise2]) .then(responses => Promise.all(responses.map(response => response.json()))) .then(data => console.log(data)) .catch(error => console.error(error));

30. Question: What is the purpose of the JavaScript localStorage and sessionStorage objects, and how do they differ?

  • Answer:

    • Both localStorage and sessionStorage are Web Storage APIs for storing key/value pairs in a web browser. The main difference is in their lifespan. Data stored in localStorage persists across browser sessions, while data in sessionStorage is only available for the duration of a single page session.

// Storing data in localStorage localStorage.setItem('username', 'atharvgyan'); // Retrieving data from localStorage let username = localStorage.getItem('username'); console.log(username);

// Outputs: atharvgyan

31. Question: How can you handle asynchronous code in JavaScript before the introduction of Promises and async/await?

  • Answer:

    • Before Promises and async/await, developers commonly used callbacks to handle asynchronous operations. Callback functions were passed as arguments to functions that performed asynchronous tasks, and they were invoked once the task was complete.

function fetchData(callback) { // Simulating an asynchronous operation setTimeout(function() { let data = 'Fetched data'; callback(data); }, 1000); } fetchData(function(data) { console.log(data); // Outputs: Fetched data });

32. Question: Explain the concept of the JavaScript reduce method and provide an example.

  • Answer:

    • The reduce method is used to accumulate values in an array and return a single result. It takes a callback function as its argument, which is executed for each element in the array, reducing it to a single value.

let numbers = [1, 2, 3, 4, 5]; let sum = numbers.reduce(function(acc, current) { return acc + current; }, 0); console.log(sum);

// Outputs: 15

33. Question: What is the purpose of the JavaScript Object.keys() method, and how is it used?

  • Answer:

    • Object.keys() is used to extract an array of keys from an object. It takes an object as an argument and returns an array containing the object's enumerable property names.

let person = {
  name: 'John',
  age: 30,
  occupation: 'Developer'
};

let keys = Object.keys(person);
console.log(keys); // Outputs: ['name', 'age', 'occupation']

34. Question: Explain the concept of the JavaScript async/await syntax and how it simplifies asynchronous code.

  • Answer:

    • async/await is a syntax for handling asynchronous code in a more synchronous-looking way. The async keyword is used to define asynchronous functions, and the await keyword is used to pause execution until a promise is resolved.

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

35. Question: What is the purpose of the JavaScript Object.create() method?

  • Answer:

    • Object.create() is used to create a new object with the specified prototype object. It allows for explicit prototypal inheritance without the need for a constructor function.

let animal = { makeSound: function() { console.log('Some generic sound'); } }; let cat = Object.create(animal); cat.makeSound();

// Outputs: Some generic sound

  1. 36. Question: How does JavaScript handle memory management, and what is garbage collection?

    • Answer:
      • JavaScript uses automatic memory management through a process called garbage collection. The garbage collector identifies and frees up memory occupied by objects that are no longer reachable or in use, preventing memory leaks.

  2. 37. Question: Explain the concept of the JavaScript this keyword in arrow functions.

    • Answer:

      • Arrow functions do not have their own this context. Instead, they inherit the this value from the surrounding scope. This behavior is different from regular functions, which have their own this value.
function Person() { this.age = 30; // Regular function this.greet = function() { setTimeout(function() { console.log('Age:', this.age); // Outputs: Age: undefined (refers to the global object) }, 1000); }; // Arrow function this.greetArrow = function() { setTimeout(() => { console.log('Age:', this.age); // Outputs: Age: 30 (refers to the Person object) }, 1000); }; } let person = new Person(); person.greet(); person.greetArrow();

38. Question: Explain the concept of event propagation in JavaScript and the difference between capturing and bubbling phases.

  • Answer:

    • Event propagation in JavaScript occurs in two phases: capturing phase and bubbling phase. During the capturing phase, the event travels from the root of the DOM tree to the target element, and during the bubbling phase, it travels back up from the target to the root.

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function(event) {
    console.log('Capturing phase: Parent element');
  }, true); // The third parameter specifies capturing phase

  document.getElementById('child').addEventListener('click', function(event) {
    console.log('Bubbling phase: Child element');
  });
</script>

39. Question: What is the JavaScript Array.filter() method, and how is it used?

  • Answer:

    • The Array.filter() method is used to create a new array with elements that pass a provided test. It takes a callback function as an argument, which is applied to each element in the array.

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers);

// Outputs: [2, 4]

40. Question: Explain the purpose of the JavaScript debounce function and provide an example of its use.

  • Answer:

    • A debounce function is used to limit the rate at which a function is invoked, particularly useful for handling events like resizing or scrolling. It delays the execution of a function until after a specified time has elapsed since the last invocation.

function debounce(func, delay) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// Example usage
let handleResize = debounce(function() {
  console.log('Resize event handled');
}, 200);

window.addEventListener('resize', handleResize);

Question: What is the purpose of the JavaScript Object.freeze() method?

  • Answer:

    • The Object.freeze() method is used to freeze an object, preventing any changes to its properties or the addition of new properties. Once an object is frozen, its properties cannot be modified, and any attempt to do so will result in an error in strict mode.

let person = { name: 'John', age: 30 }; Object.freeze(person); person.age = 31; // Error in strict mode, silently fails in non-strict mode console.log(person); // Outputs: { name: 'John', age: 30 }

Question: How does JavaScript handle the this keyword in function constructors?

  • Answer:

    • In function constructors, the this keyword refers to the newly created object instance. When a function is invoked with the new keyword, a new object is created, and this points to that object.

function Person(name) { this.name = name; } let john = new Person('atharv'); console.log(john.name);

// Outputs: atharv






Like

Share

Tags