Top 30 JavaScript Interview Questions and Answers for 2025

✅ 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");
}