JavaScript – Top 20 Hard Technical Interview Questions with Answers
(Freshers)
1. What is the difference between var, let, and const?
Answer:
Feature var let const
Scope Function Block Block
Redeclaration Yes No No
Reassignment Yes Yes No
Hoisting Yes Yes Yes
var a = 10;
let b = 20;
const c = 30;
Interview Tip: Prefer const by default, use let when reassignment is needed.
2. What is Hoisting in JavaScript?
Answer:
Hoisting is JavaScript's behavior of moving declarations to the top of their scope before
execution.
[Link](x);
var x = 10;
Output:
undefined
Equivalent to:
var x;
[Link](x);
x = 10;
3. What is a Closure?
Answer:
A closure is a function that remembers variables from its outer scope even after the outer
function has finished execution.
function outer() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = outer();
[Link](counter());
[Link](counter());
Output:
1
2
Uses:
Data hiding
Private variables
Event handlers
4. Explain the Event Loop.
Answer:
JavaScript is single-threaded. The Event Loop handles asynchronous operations.
Components:
1. Call Stack
2. Web APIs
3. Callback Queue
4. Event Loop
Example:
[Link]("A");
setTimeout(() => {
[Link]("B");
}, 0);
[Link]("C");
Output:
A
C
B
5. What is the difference between == and ===?
Answer:
== (Loose Equality)
5 == "5"
Output:
true
=== (Strict Equality)
5 === "5"
Output:
false
=== checks both value and type.
6. What are Primitive and Non-Primitive Data Types?
Answer:
Primitive Types
String
Number
Boolean
Undefined
Null
Symbol
BigInt
Non-Primitive Types
Object
Array
Function
Example:
let age = 21;
let user = { name: "John" };
7. What is the difference between null and undefined?
Answer:
Undefined
Variable declared but not assigned.
let x;
[Link](x);
Output:
undefined
Null
Intentional absence of value.
let y = null;
8. What is a Promise?
Answer:
A Promise represents an asynchronous operation.
States:
Pending
Fulfilled
Rejected
Example:
const promise = new Promise((resolve, reject) => {
resolve("Success");
});
[Link](result => {
[Link](result);
});
9. Difference Between Promise and Async/Await?
Answer:
Promise:
fetch(url)
.then(res => [Link]())
.then(data => [Link](data));
Async/Await:
async function getData() {
const res = await fetch(url);
const data = await [Link]();
}
Async/Await improves readability.
10. What is Event Delegation?
Answer:
Event Delegation attaches a listener to a parent instead of multiple child elements.
[Link]("list")
.addEventListener("click", function(event) {
if([Link] === "LI") {
[Link]([Link]);
}
});
Benefits:
Better performance
Works with dynamic elements
11. What is the Difference Between Function Declaration
and Function Expression?
Answer:
Function Declaration
function greet() {
return "Hello";
}
Function Expression
const greet = function() {
return "Hello";
};
Function declarations are hoisted completely.
12. What is the Difference Between Arrow Functions and
Regular Functions?
Answer:
Regular Function:
function add(a,b){
return a+b;
}
Arrow Function:
const add = (a,b) => a+b;
Key Difference:
Arrow functions do not have their own this.
13. Explain the this Keyword.
Answer:
this refers to the object that calls the function.
const person = {
name: "John",
greet() {
[Link]([Link]);
}
};
[Link]();
Output:
John
14. What is Prototype Inheritance?
Answer:
JavaScript objects inherit properties through prototypes.
const animal = {
eat() {
[Link]("Eating");
}
};
const dog = [Link](animal);
[Link]();
Output:
Eating
15. What is Debouncing?
Answer:
Debouncing delays function execution until the user stops triggering an event.
function debounce(fn, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn();
}, delay);
};
}
Used for:
Search bars
Resize events
16. What is Throttling?
Answer:
Throttling limits how often a function can execute.
function throttle(fn, delay) {
let last = 0;
return function() {
let now = [Link]();
if(now - last >= delay) {
fn();
last = now;
}
};
}
Used for:
Scroll events
Mouse movement tracking
17. Explain Call, Apply, and Bind.
Answer:
function greet(city) {
[Link]([Link] + " " + city);
}
const person = {
name: "John"
};
Call
[Link](person, "Bangalore");
Apply
[Link](person, ["Bangalore"]);
Bind
const fn = [Link](person);
fn("Bangalore");
18. What is the Difference Between Shallow Copy and
Deep Copy?
Answer:
Shallow Copy
const obj2 = {...obj1};
Nested objects share references.
Deep Copy
const obj2 = structuredClone(obj1);
Creates completely independent copies.
19. What are Higher-Order Functions?
Answer:
Functions that accept other functions as arguments or return functions.
Examples:
map()
filter()
reduce()
const numbers = [1,2,3];
const doubled = [Link](num => num * 2);
Output:
[2,4,6]
20. Explain the Difference Between Synchronous and
Asynchronous Programming.
Answer:
Synchronous
Tasks execute one after another.
[Link]("A");
[Link]("B");
Output:
A
B
Asynchronous
Tasks can execute later without blocking.
[Link]("A");
setTimeout(() => {
[Link]("B");
}, 1000);
[Link]("C");
Output:
A
C
B
Rapid-Fire Interview Questions
What is the DOM?
The Document Object Model is a tree representation of an HTML document.
What is CORS?
Cross-Origin Resource Sharing allows controlled access to resources from different origins.
What is JSON?
JavaScript Object Notation, a lightweight data-interchange format.
What is Destructuring?
const person = { name: "John", age: 20 };
const { name, age } = person;
What is the Spread Operator?
const arr = [1,2,3];
const newArr = [...arr,4];
What is Optional Chaining?
user?.address?.city
These questions cover the most commonly asked JavaScript concepts in fresher interviews
for Frontend Developer, Web Developer, Full-Stack Developer, and Software Engineer roles.