Top 80+ JavaScript Interview Questions and Answers Cheat Sheet (2024)

This post covers the top 80+ JavaScript interview questions and answers for 2024. From beginner to advanced levels, these questions will help you sharpen your JavaScript skills and ace your next interview.

1. What is JavaScript?
   JavaScript is a lightweight, interpreted programming language commonly used for making web pages interactive.
2. Difference between JavaScript and Java?
   JavaScript is an interpreted, client-side scripting language, whereas Java is a compiled, server-side programming language.
3. What are the data types in JavaScript?
   • Primitive: String, Number, Boolean, Undefined, Null, Symbol, BigInt
   • Non-Primitive: Object, Array, Function
4. What are the features of JavaScript?
   • Lightweight and interpreted
   • Cross-platform
   • Object-oriented
   • Asynchronous and event-driven
5. Advantages of JavaScript?
   • Client-side execution for faster user interactions
   • Rich interface elements like drag-and-drop
   • Extensively supported by frameworks and libraries
6. How do you create an object in JavaScript?
   const obj = { name: 'John', age: 25 };
7. How do you create an array in JavaScript?
   const arr = [1, 2, 3];
8. Built-in methods in JavaScript?
   • push(): Adds element to an array
   • pop(): Removes last element
   • concat(): Merges arrays
   • length(): Returns array length
   • Date(): Gets current date
9. What is the scope of a variable?
   • Global scope: Variables accessible anywhere
   • Local scope: Variables accessible only within a function or block
10. What is ‘this’ in JavaScript?
    The this keyword refers to the current object in which the code is executing.
11. How are variables declared in JavaScript?

• var: Function-scoped
• let: Block-scoped
• const: Block-scoped and immutable

12. What is a callback function?
    A function passed to another function as an argument, executed after the other function completes.
13. What are closures in JavaScript?
    A closure gives access to an outer function’s scope from an inner function.
14. What are arrow functions?
    A shorter syntax for writing functions:
    const func = () => { /* code */ };
15. How is hoisting done in JavaScript?
    Variables and function declarations are moved to the top of their scope during the execution phase.
16. Difference between == and ===?
    == compares values and performs type conversion if necessary, whereas === strictly compares values and types.
17. Difference between let and var?
    let is block-scoped, var is function-scoped.
18. What are promises in JavaScript?
    Promises represent the eventual completion or failure of an asynchronous operation.
    States: pending, resolved, rejected.
19. How do you handle asynchronous code?

• Callbacks
• Promises
• Async/Await

20. What is the event loop?
    The event loop allows JavaScript to perform non-blocking operations by offloading operations to the system kernel.
21. What is an Immediately Invoked Function Expression (IIFE)?
    A function that runs as soon as it’s defined:
    (function() { /* code */ })();
22. How do you debug JavaScript?

• console.log() for logging
• Breakpoints in browser’s developer tools
• Using the debugger keyword

23. What is the difference between function declarations and function expressions?

• Function Declaration: Declares a named function
• Function Expression: Can be anonymous and is defined inside an expression

24. What are JavaScript cookies?
    Cookies are small data stored on a user’s browser to track and remember information between sessions.
25. How do you create and delete a cookie in JavaScript?

• Create: document.cookie = "username=John; expires=Thu, 18 Dec 2024 12:00:00 UTC"
• Delete: document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC"

26. What are JavaScript frameworks?

• React.js: For building UI components
• Angular.js: Complete frontend framework
• Node.js: Server-side framework

27. What is the difference between undefined and null?

• undefined: A variable has been declared but not yet assigned a value.
• null: A value that explicitly represents no value.

28. What is the DOM?
    The Document Object Model (DOM) represents a web page and allows scripts to access and manipulate its content.
29. How do you select HTML elements in JavaScript?

• getElementById()
• getElementsByClassName()
• querySelector()
• getElementsByTagName()

30. What are closures in JavaScript?
    A closure is the combination of a function and its lexical environment.
31. What is the ‘use strict’ directive?
    Enables strict mode in JavaScript, which catches common coding mistakes and prevents the use of some unsafe actions.
32. What is the difference between Call and Apply?

• call(): Invokes a function with arguments passed individually.
• apply(): Invokes a function with arguments passed as an array.

33. How do you remove duplicates from an array in JavaScript?
    Using Set:
    const uniqueArray = [...new Set(array)];
34. What is the difference between for, forEach, and map?

• for: General-purpose loop
• forEach: Executes a function for each array element
• map: Creates a new array by applying a function to each element

35. How do you empty an array in JavaScript?

• arr.length = 0;
• arr = [];
• arr.splice(0, arr.length);

36. What is event bubbling?
    Event bubbling is the process where an event triggers on the innermost element first and then propagates to outer elements.
37. What is event capturing?
    Event capturing is the opposite of event bubbling, where the event is captured from the outermost element and propagated to the innermost element.
38. What is the difference between const and let?

• const: Variable values cannot be reassigned
• let: Values can be reassigned, but they are block-scoped.

39. What is currying in JavaScript?
    Currying is the process of transforming a function with multiple arguments into a series of functions, each taking a single argument.
40. What is function composition?
    Function composition is combining multiple functions such that the output of one function becomes the input of the next.
41. How do you create a class in JavaScript?
    class Person { constructor(name) { this.name = name; } }
42. What is prototypal inheritance?
    Objects in JavaScript can inherit properties and methods from other objects via the prototype chain.
43. What is the difference between synchronous and asynchronous code?

• Synchronous: Code runs sequentially, blocking subsequent code.
• Asynchronous: Code runs concurrently, not blocking the rest of the code.

44. What is the difference between fetch() and XMLHttpRequest()?

• fetch(): Modern way to make HTTP requests, returns promises.
• XMLHttpRequest(): Old method, requires callback functions.

45. What are generators in JavaScript?
    Generators are functions that can be paused and resumed, producing a series of values on demand using the yield keyword.
46. What is a WeakSet in JavaScript?
    A WeakSet holds objects weakly, meaning they can be garbage-collected if not referenced elsewhere.
47. What is object destructuring?
    Object destructuring allows you to extract values from objects easily:
    const { name, age } = person;
48. What is currying in JavaScript?
    Currying transforms a function with multiple arguments into a sequence of functions, each taking one argument.
49. What is the temporal dead zone in JavaScript?
    The period between entering the scope and declaring a variable with let or const, during which the variable cannot be accessed.
50. What are JavaScript design patterns?

• Creational: Singleton, Factory
• Structural: Decorator, Adapter
• Behavioral: Observer, Mediator

51. What is lexical scoping?
    Lexical scoping means that a function’s scope is determined by where it is defined in the source code.
52. What is a three-dimensional array?
    An array that has arrays as elements, and those arrays contain other arrays: [[[]]].
53. What are pop-up boxes in JavaScript?

• alert()
• confirm()
• prompt()

54. What is memoization?
    Memoization is caching the result of function calls for specific inputs to improve performance.
55. What are higher-order functions?
    Functions that take other functions as arguments or return functions as output.
56. What is the Browser Object Model (BOM)?
    BOM allows interaction with the browser, like manipulating the browser window or history.
57. Difference between localStorage and sessionStorage?

• localStorage: Persists even after the browser is closed.
• sessionStorage: Data is lost when the session ends.

58. What are generator functions?
    Functions that return a generator object and can be paused and resumed:
    function* gen() { yield 1; yield 2; }
59. What is a WeakMap?
    A WeakMap holds objects as keys, and these keys can be garbage collected.
60. What is the difference between document and window objects?

• window: Global object representing the browser window
• document: Object representing the HTML content of the page

61. What is object destructuring?
    Extract values from objects easily:
    const { name, age } = person;
62. What is an arrow function?
    A shorthand way of writing functions:
    const func = () => console.log('Hello');
63. Difference between undefined and undeclared variables?

• Undefined: Variable declared but not assigned a value
• Undeclared: Variable that hasn’t been declared in the code

64. What is a rest parameter?
    Allows a function to accept an indefinite number of arguments as an array:
    function sum(...args) {}
65. What is a spread operator?
    Allows an iterable like an array to be expanded:
    const arr = [...otherArray];
66. What is a Symbol in JavaScript?
    A unique and immutable data type used as an identifier for object properties.
67. What are classes in JavaScript?
    ES6 feature for creating objects and handling inheritance:
    class Person { constructor(name) { this.name = name; } }
68. Difference between == and === operators?

• ==: Compares values, performs type conversion
• ===: Strictly compares values and types

69. What is NaN?
    “Not-a-Number” is a special value representing invalid number operations:
    typeof NaN // "number"
70. What are modules in JavaScript?
    A way to organize code by splitting it into separate files:

• import { module } from 'module.js'
• export const module = 'someValue';

71. What is the difference between null and undefined?

• null: Represents intentional absence of value
• undefined: Represents unassigned variables

72. What is implicit type coercion?
    Automatic conversion of one data type to another:
    1 + '2' // "12"
73. What is the difference between call and apply methods?

• call: Accepts arguments separately
• apply: Accepts arguments as an array

74. What are default parameters in JavaScript?
    Allow functions to have default values for parameters:
    function greet(name = 'Guest') {}
75. What is recursion in JavaScript?
    A function that calls itself:
    function factorial(n) { return n ? n * factorial(n - 1) : 1; }
76. What is function currying?
    Transforming a function with multiple arguments into nested functions:
    function add(a) { return function(b) { return a + b; }; }
77. What is prototypal inheritance?
    Objects inherit properties and methods from a prototype:
    Object.create(parentObject)
78. What is event delegation?
    Attaching an event listener to a parent element that listens for events on its child elements.
79. What is the purpose of the async/await syntax?
    Simplifies working with promises by making asynchronous code look synchronous.
80. What is object.freeze()?
    Freezes an object, preventing new properties from being added or modified.
81. How to clone an object in JavaScript?

• Shallow copy: Object.assign({}, obj)
• Deep copy: JSON.parse(JSON.stringify(obj))

82. What is JavaScript’s strict mode?
    Enables stricter parsing and error handling in JavaScript by adding 'use strict';.