Top JavaScript Interview Questions 2025 — Beginner to Advanced (With Answers & Code)

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

Answer: JavaScript supports the following data types:

• Primitive Types:

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

• Non-Primitive (Reference) Types:

  • Object, Array, Function

Example:

let str = "Hello";     // String let num = 42;          // Number let isActive = true;   // Boolean let obj = { name: "Tom" }; // Object let arr = [1, 2, 3];   // Array let nothing = null;    // Null let notDefined;        // Undefined

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

Answer:

• var → function-scoped, can be redeclared and updated.

• let → block-scoped, can be updated but not redeclared in same scope.

• const → block-scoped, cannot be updated or redeclared.

Example:

function test() {   if (true) {     var a = 10;     let b = 20;     const c = 30;   }   console.log(a); // 10   // console.log(b); // Error   // console.log(c); // Error } test();

✅ 3. What is a closure in JavaScript?

Answer: A closure is a function that remembers the variables from its outer scope even after the outer function has finished executing.

Example:

function outer() {   let count = 0;   return function inner() {     count++;     console.log(count);   } } const counter = outer(); counter(); // 1 counter(); // 2

✅ 4. What is hoisting in JavaScript?

Answer: Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope.

Example:

console.log(a); // undefined var a = 5; sayHi(); // "Hi" function sayHi() {   console.log("Hi"); }

✅ 5. What is the difference between == and ===?

Answer:

• == → checks for value equality (performs type coercion).

• === → checks for value and type equality (strict comparison).

Example:

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

✅ 6. What is the difference between null and undefined?

Answer:

• undefined: Variable declared but not assigned a value.

• null: Explicitly assigned value representing no value.

Example:

let a; console.log(a); // undefined let b = null; console.log(b); // null

✅ 7. What is event bubbling and event capturing?

Answer:

• Event Bubbling: Event flows from the innermost element to the outermost (child → parent).

• Event Capturing: Event flows from outermost to the innermost (parent → child).

Example:

document.getElementById("child").addEventListener("click", () => {   alert("Child Clicked"); }); document.getElementById("parent").addEventListener("click", () => {   alert("Parent Clicked"); });

✅ 8. What are arrow functions?

Answer: Arrow functions provide a shorter syntax for writing functions and do not have their own this.

Example:

const add = (a, b) => a + b; console.log(add(2, 3)); // 5

✅ 9. What is the difference between synchronous and asynchronous JavaScript?

Answer:

• Synchronous: Code runs in sequence, blocking.

• Asynchronous: Code runs without blocking, allows callbacks/promises.

Example:

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

✅ 10. What are Promises in JavaScript?

Answer: Promises represent the eventual completion (or failure) of an asynchronous operation.

Example:

let promise = new Promise((resolve, reject) => {   setTimeout(() => resolve("Done"), 1000); }); promise.then((res) => console.log(res)); // Done

✅ 11. What is the difference between map, filter, and forEach?

Answer:

• map: Transforms array elements and returns a new array.

• filter: Returns elements that satisfy a condition.

• forEach: Executes a function for each element (no return).

Example:

let arr = [1, 2, 3]; console.log(arr.map(x => x * 2));     // [2, 4, 6] console.log(arr.filter(x => x > 1));  // [2, 3] arr.forEach(x => console.log(x));     // 1 2 3

✅ 12. What is the use of this keyword?

Answer: this refers to the current execution context.

Example:

const obj = {   name: "John",   greet: function () {     console.log("Hi " + this.name);   } }; obj.greet(); // Hi John

✅ 13. What is the use of call(), apply(), and bind()?

Answer:

• call() and apply() invoke functions with a specified this.

• bind() returns a new function with bound this.

Example:

function greet(greeting) {   console.log(greeting + ", " + this.name); } let person = { name: "Alice" }; greet.call(person, "Hello");     // Hello, Alice greet.apply(person, ["Hi"]);     // Hi, Alice let greetAlice = greet.bind(person, "Hey"); greetAlice();                    // Hey, Alice

✅ 14. What is a callback function?

Answer: A function passed as an argument to another function to be executed later.

Example:

function greet(name, callback) {   console.log("Hello " + name);   callback(); } greet("Sam", () => console.log("Callback called"));

✅ 15. What is the difference between typeof and instanceof?

Answer:

• typeof: Checks data type (primitive types).

• instanceof: Checks if an object is an instance of a class or constructor.

Example:

console.log(typeof "Hello");    // string console.log([1, 2] instanceof Array);  // true

✅ 16. What are template literals?

Answer: Template literals use backticks (`) and allow embedded expressions using ${}.

Example:

let name = "Tom"; console.log(`Hello, ${name}`); // Hello, Tom

✅ 17. What is destructuring in JavaScript?

Answer: Destructuring allows unpacking values from arrays or objects.

Example:

let [a, b] = [1, 2]; let { name, age } = { name: "Tom", age: 30 };

✅ 18. What is the spread and rest operator (...)?

Answer:

• Spread: Expands elements.

• Rest: Collects elements into an array.

Example:

let arr1 = [1, 2]; let arr2 = [...arr1, 3]; // Spread function sum(...args) {  // Rest   return args.reduce((a, b) => a + b, 0); }

✅ 19. What is the difference between deep copy and shallow copy?

Answer:

• Shallow copy: Copies only top-level properties.

• Deep copy: Copies nested objects as well.

Example:

let obj1 = { a: 1, b: { c: 2 } }; let shallow = { ...obj1 }; let deep = JSON.parse(JSON.stringify(obj1));

✅ 20. What is async/await in JavaScript?

Answer: async/await is a syntax for writing asynchronous code in a synchronous style.

Example:

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

✅ 21. What is AJAX in JavaScript?

Answer: AJAX (Asynchronous JavaScript and XML) is a technique that allows web pages to be updated asynchronously by exchanging data with the server behind the scenes — without reloading the page.

Example using JavaScript:

let xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); xhr.onload = function () {   if (xhr.status === 200) {     console.log(JSON.parse(xhr.responseText));   } }; xhr.send();

✅ 22. What is the difference between synchronous and asynchronous AJAX calls?

Answer:

• Synchronous: Blocks the execution until the request completes. (open('GET', url, false))

• Asynchronous: Does not block execution; executes callback after response. (open('GET', url, true))

Best Practice: Always use asynchronous for better user experience.

✅ 23. How do you make an AJAX call using jQuery?

Answer: You can use $.ajax(), $.get(), or $.post().

Example:

$.ajax({   url: 'data.json',   method: 'GET',   success: function(data) {     console.log(data);   },   error: function(err) {     console.log('Error:', err);   } });

✅ 24. What is jQuery and why is it used?

Answer: jQuery is a lightweight, fast, and cross-platform JavaScript library used to simplify HTML DOM manipulation, event handling, AJAX, and animation.

Benefits:

• Cross-browser support

• Less code, more functionality

• Easy to learn

Example:

$("#btn").click(function() {   alert("Button clicked"); });

✅ 25. What is the difference between .text(), .html(), and .val() in jQuery?

Answer:

• .text() → Gets or sets the text content.

• .html() → Gets or sets HTML content.

• .val() → Gets or sets form field values.

Example:

$("#div1").text("Hello"); // Plain text $("#div2").html("<b>Hello</b>"); // Bold text $("#input").val("John"); // Set input value

✅ 26. What is event delegation in JavaScript or jQuery?

Answer: Event delegation allows you to attach a single event listener to a parent element that will handle events from its children.

Example in jQuery:

$("#parent").on("click", ".child", function() {   alert("Child clicked"); });

This improves performance when dynamically adding/removing elements.

✅ 27. What is the difference between window.onload and $(document).ready()?

Answer:

• window.onload → Runs after all content (including images) is fully loaded.

• $(document).ready() → Runs after the DOM is loaded but before images/stylesheets.

Example:

$(document).ready(function() {   console.log("DOM is ready"); });

✅ 28. What is chaining in jQuery?

Answer: Chaining allows multiple jQuery methods to be run on the same element in a single statement.

Example:

$("#box").css("color", "blue").slideUp(2000).slideDown(2000);

This improves readability and reduces code length.

✅ 29. How can you prevent default behavior in JavaScript/jQuery?

Answer: Use event.preventDefault() to stop the browser's default action (like following a link or submitting a form).

Example:

$("a").click(function(event) {   event.preventDefault();   alert("Link clicked but not followed"); });

✅ 30. How do you check if an element exists in jQuery?

Answer: Use .length property.

Example:

if ($("#element").length > 0) {   console.log("Element exists"); } else {   console.log("Element not found"); }

Interview strategy & soft skills

• Talk out loud. Explain assumptions and approach before coding.

• Ask clarifying questions. Interviewers expect this: confirm input bounds and edge cases.

• Write tests or examples. Show a couple of inputs and outputs.

• State complexity. Time and space complexity matters.

• Handle errors & edge cases. Mention null, empty arrays, invalid inputs.

Final checklist for the interview day

• Know closures, prototypes, event loop ordering, and this binding cold.

• Practice 5–7 coding tasks: debounce, curry, Promise utilities, small data-structures (LRU cache).

• Be ready to explain trade-offs and optimizations.

• Rehearse clear, concise answers for behavioral parts (projects, bugs you fixed).

Conclusion

JavaScript interviews in 2025 still revolve around a mix of timeless fundamentals (closures, scope, prototypes) and newer realities (async patterns, event-loop microtasks, ES2020+ features). Focus on explaining concepts clearly, writing small, correct code, and demonstrating that you can reason about performance and edge cases. Practice the sample implementations here, rehearse your explanations, and you’ll be ready to handle interviews from junior to advanced levels with confidence.