Most Asked JavaScript Interview Questions and Answers | For Freshers, Intermediates and Professionals

Explore the most frequently asked JavaScript interview questions and answers, tailored for freshers, intermediates, and professionals.

These JavaScript Interview Questions cover various JavaScript concepts like basics, objects, arrays, events, asynchronous programming, ES6 features, and advanced topics to prepare you for interviews.

Top JavaScript Interview Questions and Answers for Freshers, Intermediates, and Professionals [2024]

JavaScript Basics Interview Questions

1. What is JavaScript?

JavaScript is a programming language used to make web pages interactive. It runs in the browser and can be used for animations, form validations, and dynamic updates without reloading the page.

2. Explain the difference between JavaScript and Java.

Java and JavaScript are completely different languages. Java is a full-fledged programming language used for building applications, while JavaScript is mainly used for web development. Java needs a compiler, but JavaScript runs directly in the browser. They just share a similar name but are used for different purposes.

4. What are the different data types in JavaScript?

JavaScript has the following data types:

• Primitive Types:
  • String: Text, e.g., "Hello"
  • Number: Numbers, e.g., 10, 3.14
  • Boolean: True or false, e.g., true, false
  • Undefined: A variable with no value
  • Null: Represents "nothing" or empty
  • Symbol: Unique identifier (rarely used)
• Non-Primitive Type:
  • Object: Collections of key-value pairs like {name: 'John', age: 30}
  • Array: List of items, e.g., [1, 2, 3]

5. What are var, let, and const? Differences?

• var: Old way of declaring variables. Can be redeclared and updated. It's function-scoped.
• let: Newer. Can be updated but not redeclared. It's block-scoped (only exists inside {}).
• const: Used for constants. Can’t be updated or redeclared. Also block-scoped.

var a = 10;  // Can change and redeclare
let b = 20;  // Can change, but not redeclare
const c = 30; // Can't change or redeclare

6. What are primitive and non-primitive data types?

• Primitive: Basic types like string, number, boolean, null, undefined, symbol, and BigInt. They store values directly.
• Non-primitive: Complex types like objects and arrays. They store references (addresses in memory) to values.

// Primitive
let age = 25;  // number
let name = "John";  // string

// Non-primitive
let arr = [1, 2, 3];  // array (object)
let obj = {name: "Jane", age: 30};  // object

7. Explain undefined and null in JavaScript.

• undefined: Means a variable has been declared but hasn’t been assigned a value yet.
• null: Used to represent “nothing” or “empty value” on purpose.

let x;  // undefined
let y = null;  // null

8. What are JavaScript literals?

Literals are fixed values you type directly in code like numbers, strings, or booleans.

let num = 42;  // Number literal
let str = "Hello!";  // String literal
let isTrue = true;  // Boolean literal

9. What is the typeof operator in JavaScript?

typeof is used to check the data type of a value or variable.

typeof "Hello";  // "string"
typeof 123;  // "number"
typeof true;  // "boolean"
typeof undefined;  // "undefined"

10. What are templates literals (template strings) in JavaScript?

Template literals allow you to use multi-line strings and embed expressions easily using backticks (`) and ${} for variables.

let name = "John";
let greeting = `Hello, ${name}!`;  // "Hello, John!"

11. What are functions in JavaScript?

Functions are blocks of code designed to perform a task. You can call (invoke) them whenever you need.

Example:

function greet() {
  console.log('Hello!');
}
greet(); // Output: Hello!

12. Explain the difference between function declaration and function expression.

• Function Declaration: Defined with the function keyword and can be used anywhere in the code due to hoisting.

function greet() {
  console.log('Hi!');
}



• Function Expression: Assigned to a variable and only usable after it's defined.

const greet = function() {
  console.log('Hi!');
};

13. What is a callback function?

A function passed as an argument to another function, usually for things like handling asynchronous events.

Example:

function greet(name, callback) {
  console.log(`Hello, ${name}`);
  callback();
}
greet('Ashnoor', function() { console.log('Goodbye!'); });

14. What is the difference between synchronous and asynchronous functions?

• Synchronous: Executes code in sequence, one after the other.
• Asynchronous: Doesn't wait for previous code to finish. Example: setTimeout or fetch.

console.log('Start');
setTimeout(() => console.log('Async code'), 1000);
console.log('End');
// Output: Start, End, Async code

15. What is an Immediately Invoked Function Expression (IIFE)?

It's a function that runs right after it's defined. Commonly used to avoid polluting the global scope.

(function() {
  console.log('IIFE ran!');
})();

16. What is the purpose of closures in JavaScript?

Closures allow a function to access variables from its parent scope, even after the parent function has finished.

17. What are arrow functions?

Shorter syntax for writing functions. They also don't have their own this context.

function outer() {
  let name = 'Ash';
  return function inner() {
    console.log(name); // Accesses 'name'
  };
}
const result = outer();
result(); // Output: Ash

18. What is the difference between a regular function and an arrow function?

• Regular function: Has its own this context.
• Arrow function: Inherits this from the surrounding scope.

const obj = {
  regularFunc: function() { console.log(this); }, // refers to obj
  arrowFunc: () => console.log(this) // refers to global scope
};
obj.regularFunc(); // this = obj
obj.arrowFunc();   // this = global scope

19. What is the difference between == and ===?

• ==: Checks for equality after type conversion (loose equality).
• ===: Checks for equality without converting types (strict equality).

5 == '5' // true
5 === '5' // false

20. What is NaN and how can you check if a value is NaN?

NaN stands for "Not-a-Number." It usually shows up when a math operation fails. You can check it using isNaN() function.

isNaN('hello') // true
isNaN(123) // false

JavaScript Scope and Hoisting Interviews Questions

21. What is the scope in JavaScript?

Scope defines where variables and functions are accessible in your code. It’s like a boundary that decides where you can use a variable.

22. What is global scope and local scope?

• Global Scope: Variables declared outside any function are in the global scope. You can access them from anywhere in your code.
• Local Scope: Variables declared inside a function are in the local scope, meaning they can only be accessed within that function.

23. What is the difference between function scope and block scope?

• Function Scope: Variables declared with var are function-scoped. They’re only visible inside the function where they're defined.
• Block Scope: Variables declared with let or const are block-scoped. They exist only within the block {} (like in loops or if-statements).

24. What is hoisting in JavaScript?

Hoisting is JavaScript’s default behaviour where variable and function declarations are moved to the top of their scope during the compile phase. This means you can use a variable or function before declaring it in the code, but only the declaration is hoisted, not the initialization. For example, using a var variable before declaring it will give undefined, while using let or const before declaration throws an error.

25. What is variable shadowing in JavaScript?

Variable shadowing happens when a local variable has the same name as a variable in an outer scope. The local one "shadows" or overrides the outer variable within its scope.

26. What are global objects in JavaScript?

Variable shadowing happens when a variable declared inside a local scope (like inside a function or block) has the same name as a variable in the outer scope. The local variable "shadows" the outer one, temporarily overriding the outer variable within that specific block or function. The outer variable still exists but can’t be accessed until the local one goes out of scope.

Objects and Prototypes:

27. What is an object in JavaScript?

An object is a collection of key-value pairs where each key (property) holds a value. These values can be anything: numbers, strings, arrays, functions, or even other objects. Think of an object as a way to group related data.

let car = { brand: "Toyota", model: "Corolla", year: 2020 };

28. What is the this keyword in JavaScript?

this refers to the object that is executing the current function. In a method, this points to the object that the method belongs to. It changes based on how a function is called.

let person = {
  name: "Nidhi",
  greet() {
    console.log(this.name);
  }
};
person.greet(); // "Nidhi"

29. Explain object-oriented programming (OOP) concepts in JavaScript.

OOP in JavaScript revolves around objects and involves concepts like classes, inheritance, encapsulation, and polymorphism. JavaScript is prototype-based, but with ES6, we use classes to define objects and reuse code (inheritance).

30. What is prototypal inheritance?

Prototypal inheritance is when one object can "inherit" properties and methods from another object (called the prototype). Every JavaScript object has a hidden [[Prototype]] that points to another object.

let parent = { name: "Parent" };
let child = Object.create(parent); // child inherits from parent
console.log(child.name); // "Parent"

31. What is the difference between prototypal inheritance and classical inheritance?

• Prototypal Inheritance: Objects inherit from other objects (dynamic and flexible).
• Classical Inheritance: Objects are instances of classes, and inheritance is more rigid and static (used in languages like Java, C++).

32. How do you create objects in JavaScript?

You can create objects in different ways:

• Using object literals:



let obj = { name: "Ashnoor" };



• Using new Object():



let obj = new Object();
obj.name = "Ashnoor";



• Using a constructor function or class (for reusable objects):



function Person(name) {
  this.name = name;
}
let person1 = new Person("Ashnoor");

33. What is a constructor function?

A constructor function is a blueprint for creating multiple objects with similar properties and methods. You use new to call the constructor and create objects.

function Car(brand, model) {
  this.brand = brand;
  this.model = model;
}
let car1 = new Car("Honda", "Civic");

34. What is the difference between call(), apply(), and bind()?

call(): Invokes a function and allows you to pass arguments one by one.

apply(): Invokes a function and allows you to pass arguments as an array.

bind(): Returns a new function with this set to a specific value.

function sayHi(greeting) {
  console.log(greeting + ", " + this.name);
}
let user = { name: "Nidhi" };

sayHi.call(user, "Hello"); // "Hello, Nidhi"
sayHi.apply(user, ["Hi"]); // "Hi, Nidhi"
let boundFunc = sayHi.bind(user);
boundFunc("Hey"); // "Hey, Nidhi"

35. What are getters and setters in JavaScript?

Getters and setters allow you to control how properties are accessed and modified in an object. A getter retrieves a property value, and a setter updates it.

let person = {
  firstName: "Nidhi",
  lastName: "Pratap",
  get fullName() {
    return this.firstName + " " + this.lastName;
  },
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(" ");
  }
};

console.log(person.fullName); // "Nidhi Pratap"
person.fullName = "Ashnoor Singh";
console.log(person.firstName); // "Ashnoor"

Arrays and Iteration JavaScript Interview Questions

36. What are arrays in JavaScript?

Arrays in JavaScript are used to store multiple values in a single variable, like a list. Each item in an array is indexed, starting from 0.

Example:
let fruits = ['apple', 'banana', 'mango'];

37. How do you iterate over an array in JavaScript?

You can loop through an array using methods like for, forEach(), map(), and more.

Example (for loop):

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]); // This will print each fruit one by one
}

Example (forEach):

fruits.forEach(fruit => console.log(fruit)); // Same as above, but simpler!

38. What are array methods like map(), filter(), and reduce()?

map(): Transforms each element in the array and returns a new array.

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2); // [2, 4, 6]

filter(): Filters elements based on a condition, returns a new array with items that pass the test.

let evenNumbers = numbers.filter(num => num % 2 === 0); // [2]

reduce(): Reduces the array to a single value by applying a function to each element.

let sum = numbers.reduce((acc, num) => acc + num, 0); // 6

39. What is the difference between forEach and map?

forEach(): Runs a function on each array item but doesn't return a new array.

numbers.forEach(num => console.log(num)); // Prints each number

map(): Similar to forEach(), but it returns a new array with transformed values.

let squared = numbers.map(num => num * num); // [1, 4, 9] (like turning apples into apple pie!)

40. What is array destructuring in JavaScript?

Array destructuring is a way to unpack values from an array into individual variables.

let [first, second] = ['apple', 'banana'];
console.log(first); // 'apple'
console.log(second); // 'banana'

JavaScript Events and Loops Interview Questions

41. What is an event in JavaScript?

An event in JavaScript is basically any action or occurrence that happens in the browser. This can be things like clicks, mouse movements, key presses, or even page loads. When these actions happen, JavaScript can respond to them, allowing you to create interactive web pages.

42. Explain the event delegation model in JavaScript.

Event delegation is a cool way to handle events more efficiently. Instead of adding an event listener to each individual element, you add a single listener to a parent element. When an event happens on a child element, it bubbles up to the parent, which can then handle the event. This is great for performance and makes managing dynamic content easier.

43. What is an event loop in JavaScript?

The event loop is like the brain of JavaScript. It allows the language to perform non-blocking operations despite being single-threaded. It continuously checks the call stack for any functions that need to run and the message queue for any pending events. If there’s something in the queue, it processes it after the call stack is empty.

44. What is the call stack in JavaScript?

The call stack is a stack data structure that keeps track of function calls in your JavaScript code. When a function is called, it gets pushed onto the stack, and when it finishes, it gets popped off. This helps manage what function is currently executing and what comes next.

45. What are promises in JavaScript?

Promises are a way to handle asynchronous operations in JavaScript. They represent a value that might not be available yet, but will be resolved (or rejected) in the future. A promise can be in one of three states: pending, fulfilled, or rejected. You can use .then() to handle fulfilled promises and .catch() for errors.

46. What is async/await in JavaScript?

Async/await is a syntax that makes working with promises easier and cleaner. By using async before a function, you can use await inside it, which pauses the function execution until the promise is resolved. This makes your code look synchronous and easier to read, even though it’s still asynchronous under the hood.

47. What is the difference between microtask and macrotask in JavaScript?

Microtasks and macrotasks are both ways to handle asynchronous operations, but they have different priorities. Microtasks (like promises) are executed before macrotasks (like setTimeout or setInterval). So, after the current call stack is clear, all microtasks are executed before moving on to any macrotasks.

48. What are event listeners in JavaScript?

Event listeners are functions that listen for specific events on a particular element. You can use the addEventListener() method to attach a listener to an element, which will trigger the function whenever the specified event occurs (like a click or a keypress). It’s a key part of making your web pages interactive!

DOM Manipulation

49. What is DOM in JavaScript?

The DOM (Document Object Model) is like a tree structure that represents the HTML of a web page. It allows JavaScript to interact with the elements of the page, letting you change the content, structure, and style dynamically.

50. How do you manipulate the DOM using JavaScript?

You can manipulate the DOM using methods like:

• Selecting elements: Use document.getElementById(), document.querySelector(), or other selectors to get elements.
• Changing content: Use properties like .innerHTML, .textContent, or .innerText.
• Adding elements: Create new elements with document.createElement() and append them with .appendChild() or .insertBefore().
• Removing elements: Use .remove() to delete elements from the DOM.

51. What is the difference between document.getElementById() and document.querySelector()?

• document.getElementById('id'): Fetches an element by its unique ID. It’s super fast and returns a single element.
• document.querySelector('selector'): Uses a CSS selector to grab the first matching element. It’s more flexible since you can use classes, tags, or any valid CSS selector, but a bit slower than getElementById.

52. What is the difference between innerHTML, innerText, and textContent?

• innerHTML: Gets or sets HTML content. It can include HTML tags (like <div>), so use it when you want to insert markup.
• innerText: Gets or sets text content as seen by the user. It doesn’t include HTML tags and reflects what’s visible.
• textContent: Similar to innerText, but gets all the text in an element, including hidden elements. It’s faster and doesn’t trigger layout reflow.

53. How can you create elements dynamically using JavaScript?

You can create elements with:

// Create a new element
const newDiv = document.createElement('div');

// Add some content
newDiv.textContent = 'Hello, World!';

// Append it to an existing element
document.body.appendChild(newDiv);

This creates a <div> element with the text "Hello, World!" and add it to the end of the body of your webpage. Easy peasy!

Error Handling and Debugging JavaScript Interview Question

54. How do you handle errors in JavaScript?

You handle errors in JavaScript using try...catch blocks. You put the code that might throw an error in the try section, and if an error occurs, it jumps to the catch section where you can handle it gracefully, like logging in or showing an error message.

Example:

function divide(a, b) {
    try {
        if (b === 0) {
            throw new Error("Division by zero is not allowed!");
        }
        return a / b;
    } catch (error) {
        console.error(error.message);
        return null; // Return null or handle the error appropriately
    }
}

console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // Error: Division by zero is not allowed!

55. What is the difference between throw and try...catch?

• throw is used to create your own error. You can throw a specific error when a certain condition isn’t met, like throw new Error("Something went wrong!");.
• try...catch is used to catch errors that might occur in your code. It lets you handle the error without crashing your program. So, you can use throw inside a try block to signal an error.

Example:

function checkAge(age) {
    try {
        if (age < 18) {
            throw new Error("You must be at least 18 years old.");
        }
        return "Access granted.";
    } catch (error) {
        console.error(error.message);
        return "Access denied.";
    }
}

console.log(checkAge(20)); // Access granted.
console.log(checkAge(15)); // Error: You must be at least 18 years old.

56. What are the different types of errors in JavaScript?

There are a few main types of errors in JavaScript:

• SyntaxError: This happens when there's a mistake in your code syntax (like a missing bracket).
• ReferenceError: Occurs when you try to use a variable that doesn’t exist.
• TypeError: This happens when a value is not of the expected type (like trying to call a non-function).
• RangeError: Triggered when a value is outside the allowable range (like an array with an invalid length).

Example:

try {
    // SyntaxError Example
    eval('alert("Hello"');

    // ReferenceError Example
    console.log(nonExistentVariable);

    // TypeError Example
    let number = null;
    number.toString();

    // RangeError Example
    let arr = new Array(-1); // This will throw a RangeError
} catch (error) {
    console.error(`${error.name}: ${error.message}`);
}

57. What is debugging and how can you debug JavaScript code?

Debugging is the process of finding and fixing errors in your code. You can debug JavaScript code using:

• Console.log(): To print values and see what's going on.
• Browser DevTools: Use the debugging tools in your browser to set breakpoints, step through code, and inspect variables.
• Error messages: Read the error messages in the console to understand what went wrong.

58. What is the strict mode in JavaScript?

Strict mode is a way to opt into a restricted version of JavaScript, which helps you write cleaner code. You enable it by adding "use strict"; it at the beginning of your script or function. It catches common mistakes, like assigning values to undeclared variables, and helps prevent some unsafe actions. It makes your code more predictable and easier to debug.

Example:

"use strict";

function myFunction() {
    // This will throw an error because 'x' is not declared
    x = 3.14; 
}

try {
    myFunction();
} catch (error) {
    console.error(error.message); // Error: x is not defined
}

JavaScript Closures and Asynchronous JavaScript Interview Questions

59. What is a closure in JavaScript?

A closure is like a secret box that remembers its environment. When you create a function inside another function, the inner function can access variables from the outer function even after the outer function has finished running. This helps to keep some data private and maintain state.

Example:

function outerFunction() {
    let outerVariable = "I'm from the outer function!";

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

const closure = outerFunction(); // Calling the outer function
closure(); // Output: I'm from the outer function!

60. How are closures useful in JavaScript?

Closures are super useful for data encapsulation, creating private variables, and maintaining state in asynchronous operations. For example, you can create functions that remember their context, like counters or event handlers.

61. What is the difference between a promise and a callback?

A callback is a function you pass to another function to run later, while a promise is an object that represents a future value. Promises are cleaner and help avoid "callback hell" by allowing you to chain .then() and .catch() for better readability.

Example of Using a callback:

function fetchDataWithCallback(callback) {
    setTimeout(() => {
        const data = "Data fetched!";
        callback(data);
    }, 1000);
}

fetchDataWithCallback((data) => {
    console.log(data); // Output: Data fetched!
});

Example of Using a promise:

function fetchDataWithPromise() {
    return new Promise((resolve) => {
        setTimeout(() => {
            const data = "Data fetched!";
            resolve(data);
        }, 1000);
    });
}

fetchDataWithPromise().then((data) => {
    console.log(data); // Output: Data fetched!
});

62. What is the Promise.all() method?

Promise.all() is a method that takes an array of promises and returns a single promise that resolves when all the promises in the array are resolved. If any promise is rejected, it is immediately rejected. It’s great for running multiple async tasks in parallel and waiting for all to finish.

Example:

const promise1 = new Promise((resolve) => {
    setTimeout(() => resolve("Promise 1 resolved!"), 1000);
});

const promise2 = new Promise((resolve) => {
    setTimeout(() => resolve("Promise 2 resolved!"), 2000);
});

Promise.all([promise1, promise2])
    .then((results) => {
        console.log(results); // Output: ["Promise 1 resolved!", "Promise 2 resolved!"]
    })
    .catch((error) => {
        console.error("One of the promises failed:", error);
    });

63. What is the purpose of the fetch() API?

The fetch() API is used to make network requests in JavaScript. It returns a promise that resolves to the response to the request. It’s a modern way to handle HTTP requests, making it easier to get data from servers, like fetching JSON data.

Example:

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data); // Output: The JSON data from the API
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

64. How do async and await improve readability in asynchronous code?

Using async and await makes your asynchronous code look and behave more like synchronous code. You can write cleaner, easier-to-read code without chaining .then() and .catch(). Just mark a function as async, and use await before promises to pause execution until the promise resolves.

Example:

async function fetchDataAsync() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data); // Output: The JSON data from the API
    } catch (error) {
        console.error('There was a problem with the fetch operation:', error);
    }
}

fetchDataAsync();

65. How do you handle promise rejections?

You can handle promise rejections using .catch() when you’re chaining promises or with a try...catch block when using async/await. This way, you can manage errors gracefully and respond to them appropriately in your code.

Example:

function fetchDataWithError() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Failed to fetch data!");
        }, 1000);
    });
}

fetchDataWithError()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error("Error:", error); // Output: Error: Failed to fetch data!
    });

ES6 and Beyond JavaScript Interview Questions

66. Key Features Introduced in ES6

• Let and Const: Use let for block-scoped variables and const for constants that can’t be reassigned.
• Arrow Functions: Shorter syntax for functions, preserving the this value.
• Template Literals: Use backticks (`) for multi-line strings and easy variable interpolation with ${variable}.
• Destructuring: Easily extract values from arrays or properties from objects into variables.
• Modules: Organize code into separate files with import and export.
• Promises: Simplifies asynchronous code with a cleaner way to handle callbacks.
• Classes: A more structured way to create objects and handle inheritance.

67. What is Destructuring Assignment?

Destructuring assignment allows you to unpack values from arrays or properties from objects into distinct variables. It makes your code cleaner and easier to read!

Example:

const arr = [1, 2, 3];
const [a, b] = arr; // a = 1, b = 2

const obj = { x: 1, y: 2 };
const { x, y } = obj; // x = 1, y = 2

68. What are Modules in JavaScript, and How Do You Use Import and Export?

Modules let you split your code into separate files, making it more organized and manageable. You can export functions, objects, or variables from one module and import them into another.

Example:

// module.js
export const greeting = 'Hello';
export function sayHi() {
  console.log(greeting);
}

// main.js
import { greeting, sayHi } from './module.js';
console.log(greeting); // Hello
sayHi(); // Hello

69. What is the Spread Operator (...) in JavaScript?

The spread operator (...) allows you to expand elements of an iterable (like an array) into individual elements. It’s handy for merging arrays or copying them!

Example:

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]

70. What is the Rest Parameter in JavaScript?

The rest parameter (...) collects all remaining arguments into an array. It’s useful when you don’t know how many arguments will be passed to a function.

Example:

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

71. What are Classes in JavaScript?

Classes in JavaScript provide a cleaner way to create objects and handle inheritance using a more traditional syntax. They are syntactical sugar over JavaScript’s existing prototype-based inheritance.

Example:

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

const dog = new Animal('Dog');
dog.speak(); // Dog makes a noise.

72. What is the super() Keyword in JavaScript?

The super() keyword is used to call the constructor of the parent class. It allows you to access properties and methods of the parent class from a derived class.

Example:

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // Calls the parent constructor
  }
}

const dog = new Dog('Rex');
console.log(dog.name); // Rex

73. What is the Difference Between Default Parameters and Rest Parameters?

• Default Parameters: Allow you to set default values for function parameters if no value or undefined is passed.

Example:

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!



• Rest Parameters: Collect all remaining parameters into an array.

Example:

function logAll(...args) {
  console.log(args);
}
logAll(1, 2, 3); // [1, 2, 3]

74. What are Symbols in JavaScript?

Symbols are unique and immutable data types introduced in ES6. They are often used as object property keys to avoid naming collisions since each symbol is guaranteed to be unique.

Example:

const uniqueId = Symbol('id');
const obj = {
  [uniqueId]: 'value',
};
console.log(obj[uniqueId]); // value

Advanced JavaScript Concepts Interview Questions

75. What is memoization in JavaScript?

Memoization is a technique to speed up functions by caching their results. When you call a function with the same arguments, instead of recalculating the result, it returns the cached value. This is super useful for expensive operations, like recursive calculations, because it avoids repeating work.

76. Explain the concept of currying in JavaScript.

Currying is a technique where you break down a function that takes multiple arguments into a series of functions that each take one argument. It allows you to create more reusable and flexible functions. For example, if you have a function add(a, b), you could convert it to add(a)(b).

77. What is the difference between deep copy and shallow copy in JavaScript?

A shallow copy creates a new object but only copies the references of nested objects, meaning changes in nested objects will affect the original. On the other hand, a deep copy creates a new object and recursively copies all nested objects, so changes don’t affect the original. In short, deep copy is a complete clone, while shallow copy is just a surface-level clone.

78. What is debounce and throttle in JavaScript?

Debounce limits how often a function can be called. It waits a certain amount of time after the last call before executing the function. This is useful for events like resizing a window. Throttle, on the other hand, allows a function to be called at regular intervals. It’s useful for limiting the number of times a function is called during events like scrolling.

79. How does garbage collection work in JavaScript?

Garbage collection in JavaScript automatically frees up memory by removing objects that are no longer in use. It primarily uses two strategies: mark-and-sweep (marking reachable objects and cleaning up the rest) and reference counting (keeping track of how many references point to an object). You don’t have to worry about it much; JavaScript takes care of it for you!

80. What is use strict mode, and why is it important?

use strict is a way to opt into a restricted variant of JavaScript. It helps catch common coding mistakes, like using undeclared variables and prevents you from using features that might lead to bugs. It’s important because it makes your code cleaner and safer, reducing the chances of unexpected behaviour.

End of the Questions 🔚

Mastering JavaScript is essential for any web developer, and being well-prepared for interviews can significantly boost your confidence and performance. By familiarizing yourself with these frequently asked JavaScript interview questions and answers, you can demonstrate your knowledge and problem-solving skills effectively. Whether you’re a fresher, intermediate, or professional, continuous learning and practice are key to staying ahead in the ever-evolving tech industry.

Remember, interviews are not just about answering questions correctly but also about showcasing your thought process, creativity, and passion for coding. Keep honing your skills, stay updated with the latest trends, and don’t hesitate to seek help from the developer community. Good luck with your interview preparation, and may you land your dream job!

Read More 

• Javascript Basic Interview Questions and Answers
• Javascript Interview Questions for Freshers
• Javascript Interview Questions for Intermediate
• Javascript Interview Questions for Experienced
• Javascript Coding Questions and Answers