JavaScript Interview Questions and Answers

Are you preparing for a JavaScript interview? This comprehensive guide covers 100+ JavaScript interview questions and answers from beginner to advanced levels.

These questions are useful for JavaScript Developers, Frontend Developers, QA Automation Engineers, SDETs, and Playwright Automation Engineers.

The questions are organized into different categories, including JavaScript fundamentals, variables, data types, functions, arrays, objects, promises, asynchronous JavaScript, closures, OOP, event handling, and advanced JavaScript concepts.

JavaScript Interview Questions for Beginners

1. What is JavaScript?

Answer: JavaScript is a high-level programming language used to create dynamic and interactive web applications.

JavaScript can run in:

• Web browsers
• Node.js
• Playwright
• Backend applications
• Desktop and mobile applications

let name = "Deepesh";

console.log(`Hello ${name}`);

2. What are the features of JavaScript?

Answer: Some important features of JavaScript are:

• Lightweight
• Dynamically typed
• Object-oriented
• Prototype-based
• Event-driven
• Supports asynchronous programming
• Supports functional programming
• Supports first-class functions
• Cross-platform
• Supports modules

3. Is JavaScript the same as Java?

Answer: No. JavaScript and Java are completely different programming languages.

JavaScript Variables and Data Types

4. What is a variable in JavaScript?

Answer: A variable is a named container used to store data.

JavaScript provides three keywords for declaring variables:

var x = 10;
let y = 20;
const z = 30;

Modern JavaScript generally prefers let and const.

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

let age = 25;

age = 30;

const country = "India";

// country = "USA"; // Error

6. What are the data types in JavaScript?

Answer: JavaScript data types can be broadly divided into primitive and non-primitive types.

Primitive Data Types

• String
• Number
• BigInt
• Boolean
• Undefined
• Null
• Symbol

Non-Primitive Data Types

• Object
• Array
• Function

let name = "John";
let age = 25;
let active = true;
let value;
let data = null;
let user = {};
let numbers = [1, 2, 3];

7. What is the difference between null and undefined?

Answer:

undefined generally means that a variable has been declared but has not been assigned a value.

let x;

console.log(x); // undefined

null represents an intentional absence of a value.

let user = null;

8. What is typeof in JavaScript?

Answer: typeof is an operator used to determine the type of a value.

console.log(typeof "Hello"); // string
console.log(typeof 10);      // number
console.log(typeof true);    // boolean
console.log(typeof {});      // object

One well-known JavaScript behavior is:

console.log(typeof null);

Output:

object

This is a historical behavior of JavaScript.

JavaScript Operators

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

Answer:

== performs loose equality and may perform type conversion.

=== performs strict equality and checks both value and type.

console.log(5 == "5");  // true
console.log(5 === "5"); // false

In modern JavaScript, === is generally preferred.

10. What is the difference between != and !==?

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

!= performs loose inequality, while !== performs strict inequality.

JavaScript Functions

11. What is a function in JavaScript?

Answer: A function is a reusable block of code designed to perform a specific task.

function add(a, b) {
    return a + b;
}

console.log(add(10, 20));

Output:

30

12. What is a function expression?

Answer: A function expression is a function assigned to a variable.

const add = function(a, b) {
    return a + b;
};

console.log(add(10, 20));

13. What is an arrow function?

Answer: Arrow functions provide a shorter syntax for writing functions.

const add = (a, b) => {
    return a + b;
};

It can also be written as:

const add = (a, b) => a + b;

14. What is the difference between a normal function and an arrow function?

One of the most important differences is how they handle this.

const user = {
    name: "John",

    greet: function() {
        console.log(this.name);
    }
};

user.greet();

Arrow functions do not create their own this. They inherit this from their surrounding lexical scope.

JavaScript Scope and Hoisting

15. What is scope?

Answer: Scope determines where a variable can be accessed in a JavaScript program.

Common types of scope include:

• Global scope
• Function scope
• Block scope
• Module scope

16. What is hoisting?

Answer: Hoisting describes how JavaScript processes declarations before executing code within their relevant scope.

console.log(x);

var x = 10;

Output:

undefined

With let:

console.log(x);

let x = 10;

This results in a ReferenceError because the variable is in the Temporal Dead Zone until initialization.

17. What is the Temporal Dead Zone?

Answer: The Temporal Dead Zone, commonly called TDZ, is the period between entering a scope and the point where a let or const variable is initialized.

console.log(name);

let name = "John";

The variable cannot be accessed before its initialization.

JavaScript Arrays

18. What is an array?

Answer: An array is an ordered collection of values.

const numbers = [10, 20, 30, 40];

console.log(numbers[0]); // 10

19. What is the difference between map(), filter(), and forEach()?

map()

Creates a new array by transforming every element.

const numbers = [1, 2, 3];

const result = numbers.map(n => n * 2);

console.log(result);

Output:

[2, 4, 6]

filter()

Creates a new array containing elements that satisfy a condition.

const numbers = [1, 2, 3, 4];

const result = numbers.filter(n => n % 2 === 0);

console.log(result);

Output:

[2, 4]

forEach()

Executes a function for each element.

numbers.forEach(n => console.log(n));

Interview Tip: Use map() when you need a transformed array, filter() when you need selected elements, and forEach() when you simply want to perform an action for each element.

20. What is reduce()?

Answer: reduce() is used to reduce an array to a single value.

const numbers = [10, 20, 30];

const total = numbers.reduce((sum, value) => {
    return sum + value;
}, 0);

console.log(total);

Output:

60

21. What is find()?

Answer: find() returns the first element that satisfies a condition.

const users = [
    { id: 1, name: "John" },
    { id: 2, name: "David" },
    { id: 3, name: "Alex" }
];

const user = users.find(user => user.id === 2);

console.log(user);

Output:

{ id: 2, name: "David" }

22. What is the difference between find() and filter()?

find() returns the first matching element.

numbers.find(n => n > 10);

filter() returns all matching elements.

numbers.filter(n => n > 10);

23. What are some() and every()?

some() checks whether at least one element satisfies a condition.

const numbers = [1, 3, 5, 8];

console.log(
    numbers.some(n => n % 2 === 0)
);

Output:

true

every() checks whether all elements satisfy a condition.

const numbers = [2, 4, 6, 8];

console.log(
    numbers.every(n => n % 2 === 0)
);

Output:

true

JavaScript Objects

24. What is an object?

Answer: An object stores data in key-value pairs.

const user = {
    name: "John",
    age: 30,
    city: "Delhi"
};

console.log(user.name);

25. How can you access object properties?

There are several ways to access object properties.

user.name;

user["name"];

You can also use a variable:

const key = "name";

console.log(user[key]);

26. What is object destructuring?

Answer: Destructuring allows values to be extracted from objects into variables.

const user = {
    name: "John",
    age: 30
};

const { name, age } = user;

console.log(name);
console.log(age);

27. What is array destructuring?

const numbers = [10, 20];

const [a, b] = numbers;

console.log(a);
console.log(b);

28. What is the spread operator?

Answer: The spread operator ... expands the elements of an iterable or properties of an object.

const arr1 = [1, 2, 3];

const arr2 = [...arr1, 4, 5];

console.log(arr2);

Output:

[1, 2, 3, 4, 5]

Object example:

const user = {
    name: "John",
    age: 30
};

const updatedUser = {
    ...user,
    city: "Delhi"
};

29. What is the rest operator?

Answer: The rest operator collects multiple values into a single array.

function add(...numbers) {

    return numbers.reduce(
        (sum, n) => sum + n,
        0
    );
}

console.log(add(10, 20, 30));

Output:

60

JavaScript Closures

30. What is a closure?

Answer: A closure occurs when an inner function remembers and can access variables from its outer function even after the outer function has finished executing.

function outer() {

    let count = 0;

    return function() {
        count++;
        return count;
    };
}

const counter = outer();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Closures are commonly used for:

• Data privacy
• Counters
• Callbacks
• Function factories
• Event handlers

JavaScript this Keyword

31. What is this in JavaScript?

Answer: this is a context-dependent value. Its value depends on how a function is called.

const user = {

    name: "John",

    greet() {
        console.log(this.name);
    }

};

user.greet();

In this example, this refers to the user object.

32. What are call(), apply(), and bind()?

These methods are used to control the value of this.

call()

function greet(city) {
    console.log(this.name, city);
}

const user = {
    name: "John"
};

greet.call(user, "Delhi");

apply()

apply() accepts arguments as an array.

greet.apply(user, ["Delhi"]);

bind()

bind() returns a new function.

const newFunction = greet.bind(user, "Delhi");

newFunction();

Asynchronous JavaScript

33. What is synchronous execution?

Answer: Synchronous code executes one operation at a time in sequence.

console.log("A");
console.log("B");
console.log("C");

Output:

A
B
C

34. What is asynchronous JavaScript?

Answer: Asynchronous JavaScript allows certain operations to complete later without blocking the execution of other code.

Common examples include:

• API requests
• Timers
• File operations
• Database operations
• Browser events

35. What is a callback function?

Answer: A callback is a function passed to another function to be executed later.

function greet(name, callback) {

    console.log("Hello " + name);

    callback();
}

greet("John", function() {
    console.log("Welcome!");
});

JavaScript Promises

36. What is a Promise?

Answer: A Promise represents the eventual completion or failure of an asynchronous operation.

A Promise has three states:

1. Pending
2. Fulfilled
3. Rejected

const promise = new Promise((resolve, reject) => {

    const success = true;

    if (success) {
        resolve("Operation successful");
    } else {
        reject("Operation failed");
    }

});

37. How do you consume a Promise?

promise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.log(error);
    })
    .finally(() => {
        console.log("Completed");
    });

38. What is async/await?

Answer: async/await provides a cleaner syntax for working with Promises.

async function getData() {

    const response =
        await fetch("https://example.com/api/users");

    const data = await response.json();

    console.log(data);
}

await pauses execution of the current async function until the awaited Promise settles. It does not block the entire JavaScript runtime.

39. What is Promise.all()?

Answer: Promise.all() waits for multiple Promises and fulfills when all of them fulfill.

const p1 = Promise.resolve("A");
const p2 = Promise.resolve("B");
const p3 = Promise.resolve("C");

const result = await Promise.all([
    p1,
    p2,
    p3
]);

console.log(result);

Output:

["A", "B", "C"]

If one Promise rejects, Promise.all() rejects.

40. What is Promise.allSettled()?

Answer: Promise.allSettled() waits for all Promises to settle, regardless of whether they fulfill or reject.

const results = await Promise.allSettled([
    Promise.resolve("Success"),
    Promise.reject("Failed")
]);

console.log(results);

41. What is Promise.race()?

Answer: Promise.race() returns the result of the first Promise that settles.

const p1 = new Promise(resolve => {
    setTimeout(() => resolve("First"), 1000);
});

const p2 = new Promise(resolve => {
    setTimeout(() => resolve("Second"), 500);
});

const result = await Promise.race([p1, p2]);

console.log(result);

Output:

Second

42. What is Promise.any()?

Answer: Promise.any() fulfills when the first Promise fulfills.

const result = await Promise.any([
    Promise.reject("Error 1"),
    Promise.resolve("Success"),
    Promise.resolve("Success 2")
]);

console.log(result);

Output:

Success

JavaScript Event Loop

43. What is the event loop?

Answer: The event loop is a mechanism that allows JavaScript to handle asynchronous operations while JavaScript execution itself is single-threaded.

A simplified model is:

Call Stack
    ↓
Host APIs
    ↓
Task / Microtask Queues
    ↓
Event Loop
    ↓
Call Stack

44. What are microtasks and tasks?

Answer:

Microtasks include Promise reactions and queueMicrotask().

Tasks include operations such as timer callbacks and certain host events.

console.log("1");

setTimeout(() => {
    console.log("2");
}, 0);

Promise.resolve().then(() => {
    console.log("3");
});

console.log("4");

Output:

1
4
3
2

The synchronous code executes first, followed by the Promise microtask, and then the timer task.

JavaScript Error Handling

45. What is exception handling?

Answer: JavaScript provides try, catch, finally, and throw for handling errors.

try {

    let result = 10 / 0;

    console.log(result);

} catch (error) {

    console.log(error.message);

} finally {

    console.log("Execution completed");
}

46. What is throw?

Answer: The throw statement allows developers to manually generate an error.

function validateAge(age) {

    if (age < 18) {
        throw new Error("Age must be 18 or above");
    }

    return true;
}

JavaScript Object-Oriented Programming

47. Does JavaScript support OOP?

Answer: Yes. JavaScript supports object-oriented programming using prototypes and modern class syntax.

class Employee {

    constructor(name, salary) {
        this.name = name;
        this.salary = salary;
    }

    display() {
        console.log(this.name, this.salary);
    }
}

const emp = new Employee("John", 50000);

emp.display();

48. What is inheritance?

Answer: Inheritance allows one class to reuse properties and methods from another class.

class Animal {

    eat() {
        console.log("Eating");
    }
}

class Dog extends Animal {

    bark() {
        console.log("Barking");
    }
}

const dog = new Dog();

dog.eat();
dog.bark();

49. What is a prototype?

Answer: JavaScript uses a prototype-based inheritance model.

Objects can inherit properties and methods through the prototype chain.

const user = {
    name: "John"
};

console.log(Object.getPrototypeOf(user));

Advanced JavaScript Interview Questions

50. What is shallow copy and deep copy?

A shallow copy copies the outer structure, but nested objects can still be shared.

const user = {
    name: "John",
    address: {
        city: "Delhi"
    }
};

const copy = {
    ...user
};

copy.address still refers to the same nested object.

For many data structures, a modern deep-copy approach is:

const deepCopy = structuredClone(user);

51. What is optional chaining?

Answer: Optional chaining ?. allows safe access to potentially missing properties.

const user = {};

console.log(user.address?.city);

The result is undefined instead of throwing an error.

52. What is the nullish coalescing operator?

Answer: The ?? operator provides a default value when the left-hand side is null or undefined.

const username = null;

console.log(username ?? "Guest");

Output:

Guest

53. What is the difference between || and ???

console.log(0 || 100);  // 100
console.log(0 ?? 100);  // 0

console.log(false || true); // true
console.log(false ?? true); // false

|| checks for falsy values, while ?? checks specifically for null and undefined.

54. What is an IIFE?

Answer: IIFE stands for Immediately Invoked Function Expression.

(function() {
    console.log("Executed immediately");
})();

Arrow function syntax can also be used:

(() => {
    console.log("Hello");
})();

55. What is a JavaScript module?

Answer: A module is a JavaScript file that can export functionality for use in another file.

Export:

export function add(a, b) {
    return a + b;
}

Import:

import { add } from "./calculator.js";

console.log(add(10, 20));

56. What is the difference between named export and default export?

Named export:

export function login() {
    console.log("Login");
}

Import:

import { login } from "./auth.js";

Default export:

export default function login() {
    console.log("Login");
}

Import:

import login from "./auth.js";

57. What is strict mode?

Answer: Strict mode enables a stricter set of JavaScript rules.

"use strict";

x = 10;

This produces an error because x was not declared.

JavaScript modules are automatically executed in strict mode.

58. What is type coercion?

Answer: Type coercion is the conversion of one data type into another.

console.log("5" + 2);

Output:

52

Here JavaScript converts the number into a string.

Another example:

console.log("5" - 2);

Output:

3

Here JavaScript converts the string into a number.

59. What are truthy and falsy values?

Answer: A value is truthy if JavaScript treats it as true in a Boolean context.

Common falsy values include:

false
0
-0
0n
""
null
undefined
NaN

Most other values are truthy, including:

[]
{}
"false"
"0"

60. What is short-circuit evaluation?

Answer: JavaScript logical operators can stop evaluating once the result is known.

const name = "";

const result = name || "Guest";

console.log(result);

Output:

Guest

JavaScript Map and Set

61. What is Map in JavaScript?

Answer: Map is a collection of key-value pairs.

const users = new Map();

users.set(1, "John");
users.set(2, "David");

console.log(users.get(1));

Output:

John

Common methods include:

• set()
• get()
• has()
• delete()
• clear()

62. What is Set in JavaScript?

Answer: A Set is a collection of unique values.

const numbers = new Set([1, 2, 2, 3, 3]);

console.log(numbers);

A common use case is removing duplicates:

const numbers = [1, 2, 2, 3, 3];

const unique = [...new Set(numbers)];

console.log(unique);

Performance and Advanced Concepts

63. What is garbage collection?

Answer: Garbage collection is the process through which the JavaScript runtime identifies objects that are no longer reachable and reclaims their memory.

let user = {
    name: "John"
};

user = null;

If no other reference points to the original object, it can become eligible for garbage collection.

64. What is a memory leak?

Answer: A memory leak occurs when memory that is no longer needed remains reachable and therefore cannot be reclaimed.

Common causes include:

• Unremoved event listeners
• Long-lived global variables
• Forgotten timers
• Unnecessary object references
• Unbounded caches

65. What is currying?

Answer: Currying converts a function with multiple arguments into a sequence of functions that each accept one argument.

function add(a) {

    return function(b) {
        return a + b;
    };

}

console.log(add(10)(20));

Output:

30

66. What is function composition?

Answer: Function composition means combining multiple functions so that the output of one function becomes the input of another.

const double = x => x * 2;

const square = x => x * x;

const result = square(double(5));

console.log(result);

Output:

100

67. What is memoization?

Answer: Memoization is an optimization technique where function results are cached so that repeated calculations can be avoided.

function memoize(fn) {

    const cache = new Map();

    return function(value) {

        if (cache.has(value)) {
            return cache.get(value);
        }

        const result = fn(value);

        cache.set(value, result);

        return result;
    };
}

68. What is debouncing?

Answer: Debouncing delays function execution until a specified period has passed without another call.

It is commonly used for:

• Search boxes
• Auto-save
• Input validation
• Window resize events

function debounce(fn, delay) {

    let timer;

    return function(...args) {

        clearTimeout(timer);

        timer = setTimeout(() => {
            fn(...args);
        }, delay);
    };
}

69. What is throttling?

Answer: Throttling limits how frequently a function can execute.

It is commonly used for:

• Scroll events
• Mouse movement
• Window resize
• Continuous browser events

Important difference:

• Debouncing: Executes after activity stops.
• Throttling: Executes at controlled intervals during activity.

DOM and Event Handling

70. What is the DOM?

Answer: DOM stands for Document Object Model.

The browser represents an HTML document as a tree-like object structure that JavaScript can interact with.

document.getElementById("username");

71. What is event bubbling?

Answer: Event bubbling means an event triggered on a child element can propagate upward through its parent elements.

button
   ↓
div
   ↓
body
   ↓
document

72. What is event capturing?

Answer: Event capturing is the propagation of an event from an outer ancestor toward the target element.

document
   ↓
body
   ↓
div
   ↓
button

73. What is event delegation?

Answer: Event delegation means attaching an event listener to a parent instead of adding separate listeners to every child element.

document
    .getElementById("products")
    .addEventListener("click", event => {

        if (event.target.matches(".product")) {
            console.log(event.target.textContent);
        }

    });

Event delegation is useful when:

• There are many child elements.
• Elements are dynamically created.
• You want fewer event listeners.

74. What is preventDefault()?

Answer: preventDefault() prevents the browser’s default action for an event.

document
    .querySelector("form")
    .addEventListener("submit", event => {

        event.preventDefault();

        console.log("Default submission prevented");

    });

75. What is stopPropagation()?

Answer: stopPropagation() prevents an event from continuing to propagate through the DOM.

button.addEventListener("click", event => {
    event.stopPropagation();
});

Difference:

• preventDefault() prevents the browser’s default action.
• stopPropagation() prevents event propagation.

Scenario-Based JavaScript Interview Questions

76. How do you remove duplicate values from an array?

const numbers = [1, 2, 2, 3, 3, 4];

const unique = [...new Set(numbers)];

console.log(unique);

Output:

[1, 2, 3, 4]

77. How do you find the largest number in an array?

const numbers = [10, 50, 20, 90, 30];

const largest = Math.max(...numbers);

console.log(largest);

Output:

90

78. How do you reverse a string?

const text = "JavaScript";

const reversed = text
    .split("")
    .reverse()
    .join("");

console.log(reversed);

79. How do you check whether a string is a palindrome?

function isPalindrome(text) {

    const reversed = text
        .split("")
        .reverse()
        .join("");

    return text === reversed;
}

console.log(isPalindrome("madam"));

Output:

true

80. How do you count occurrences of elements in an array?

const fruits = [
    "apple",
    "banana",
    "apple",
    "orange",
    "banana"
];

const count = fruits.reduce((result, fruit) => {

    result[fruit] = (result[fruit] || 0) + 1;

    return result;

}, {});

console.log(count);

Output:

{
    apple: 2,
    banana: 2,
    orange: 1
}

JavaScript Output-Based Interview Questions

81. What is the output?

console.log(a);

var a = 10;

Answer:

undefined

82. What is the output?

console.log(a);

let a = 10;

Answer:

ReferenceError

The variable is in the Temporal Dead Zone before initialization.

83. What is the output?

console.log("A");

setTimeout(() => {
    console.log("B");
}, 0);

console.log("C");

Answer:

A
C
B

The timer callback executes after the synchronous code.

84. What is the output?

console.log(1);

setTimeout(() => {
    console.log(2);
}, 0);

Promise.resolve().then(() => {
    console.log(3);
});

console.log(4);

Answer:

1
4
3
2

The Promise callback is a microtask, which is processed before the timer task.

85. What is the output?

const user = {
    name: "John"
};

const copy = user;

copy.name = "David";

console.log(user.name);

Answer:

David

Both variables reference the same object.

86. What is the output?

const user = {
    name: "John"
};

const copy = {
    ...user
};

copy.name = "David";

console.log(user.name);

Answer:

John

The spread operator creates a new outer object. However, nested objects are still shared because the copy is shallow.

JavaScript Interview Questions for QA and SDET Engineers

If you are preparing for a QA Automation, SDET, Selenium, or Playwright interview, you should pay special attention to the following JavaScript concepts:

• Variables and data types
• Functions
• Scope
• Hoisting
• Closures
• this
• Arrow functions
• Callbacks
• Promises
• async/await
• Promise.all()
• Event loop
• Microtasks and tasks
• Arrays and array methods
• Objects
• Destructuring
• Spread and rest operators
• Exception handling
• Classes and inheritance
• Modules
• JSON manipulation
• API handling

Top 20 JavaScript Interview Questions for Quick Revision

JavaScript Interview Preparation Strategy

Beginner Level

Start with:

• Variables
• Data types
• Operators
• Conditions
• Loops
• Functions
• Arrays
• Objects

Intermediate Level

Next, learn:

• Scope
• Hoisting
• Closures
• Destructuring
• Spread/rest operators
• Array methods
• Exception handling
• Promises
• async/await
• Classes
• Modules

Advanced Level

Finally, focus on:

• Event loop
• Microtasks and tasks
• Prototype chain
• this
• call(), apply(), and bind()
• Currying
• Memoization
• Debouncing
• Throttling
• Event delegation
• Memory management
• Promise concurrency methods

Final Interview Tip

For JavaScript interviews, do not focus only on memorizing definitions. Interviewers frequently provide a short code snippet and ask:

“What will be the output and why?”

Therefore, practice code execution, scope, closures, this, Promises, async/await, event-loop behavior, arrays, objects, and asynchronous programming.

For QA Automation and SDET roles, combine JavaScript knowledge with practical scenarios involving API responses, JSON manipulation, Playwright, asynchronous test execution, Promise handling, and browser automation.

Conclusion

JavaScript is an essential skill for modern automation engineers, developers, and SDETs. A strong understanding of JavaScript fundamentals makes it much easier to learn technologies such as Playwright, Cypress, Node.js, React, and API automation.

Start with the fundamentals, practice small coding problems every day, and gradually move toward advanced concepts such as closures, Promises, event loops, prototypes, and asynchronous programming.

Keep practicing and focus on understanding why the code works, not just memorizing the answer.