1. What is JavaScript?
Answer: JavaScript is a high-level, interpreted programming language that conforms to the
ECMAScript specification. It is a multi-paradigm language that supports event-driven, functional, and
imperative programming styles. JavaScript is primarily used for client-side scripting in web browsers
but can also be used on the server-side (Node.js).
2. What are the data types in JavaScript?
Answer: JavaScript has 8 basic data types:
• Primitive types:
o String - textual data
o Number - integer and floating-point numbers
o BigInt - arbitrary-length integers
o Boolean - true/false
o Undefined - uninitialized variable
o Null - intentional absence of any object value
o Symbol - unique identifier
• Non-primitive type:
o Object - collections of key-value pairs
3. What is the difference between let, const, and var?
Answer:
• var: Function-scoped, can be redeclared and updated, hoisted to the top of its scope
• let: Block-scoped, can be updated but not redeclared, hoisted but not initialized
• const: Block-scoped, cannot be updated or redeclared, must be initialized during declaration
4. What is hoisting in JavaScript?
Answer: Hoisting is JavaScript's default behavior of moving declarations to the top of their containing
scope. Variable and function declarations are hoisted, but not initializations. Only the declaration is
hoisted, not the assignment.
5. What is closure in JavaScript?
Answer: A closure is a function that has access to its own scope, the outer function's variables, and
global variables - even after the outer function has returned. Closures are created every time a
function is created.
Example:
function outer() {
let count = 0;
return function inner() {
count++;
return count;
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
Functions and Scope
6. What is the difference between == and ===?
Answer:
• == (loose equality) compares values after performing type coercion if necessary
• === (strict equality) compares both value and type without type coercion
7. What are arrow functions?
Answer: Arrow functions are a concise syntax for writing function expressions in ES6. They don't
have their own this, arguments, super, or new.target bindings, making them unsuitable for methods
or constructors.
Example:
javascript
Copy
const add = (a, b) => a + b;
8. What is the this keyword in JavaScript?
Answer: this refers to the object that the function is a property of or the object that the function is
called on. The value of this depends on how the function is called:
• In a method: this refers to the owner object
• In a function: this refers to the global object (window in browsers)
• In strict mode function: this is undefined
• In an event: this refers to the element that received the event
• With call(), apply(), bind(): this refers to the object passed as argument
9. What is the difference between call(), apply(), and bind()?
Answer:
• call(): Invokes the function with a given this value and arguments provided individually
• apply(): Similar to call() but accepts arguments as an array
• bind(): Returns a new function with a bound this value and optional preset arguments
10. What are higher-order functions?
Answer: Higher-order functions are functions that operate on other functions by taking them as
arguments or returning them. Examples include map(), filter(), and reduce().
Asynchronous JavaScript
11. What is the event loop?
Answer: The event loop is what allows JavaScript to be non-blocking and asynchronous. It
continuously checks the call stack and if it's empty, it takes the first task from the callback queue and
pushes it to the call stack. It consists of:
• Call Stack
• Web APIs
• Callback Queue (Task Queue)
• Microtask Queue (for Promises)
12. What are promises?
Answer: A Promise is an object representing the eventual completion or failure of an asynchronous
operation. It has three states:
• Pending: Initial state
• Fulfilled: Operation completed successfully
• Rejected: Operation failed
Example:
const promise = new Promise((resolve, reject) => {
if (success) {
resolve(value);
} else {
reject(error);
});
13. What is async/await?
Answer: Async/await is syntactic sugar built on top of promises that allows writing asynchronous
code that looks synchronous. An async function returns a promise, and await pauses the execution
until the promise is resolved.
Example:
async function fetchData() {
try {
const response = await fetch('url');
const data = await response.json();
return data;
} catch (error) {
console.error(error);
14. What is the difference between setTimeout and setInterval?
Answer:
• setTimeout() executes a function once after a specified delay
• setInterval() executes a function repeatedly with a fixed time delay between each call
Objects and Prototypes
15. What is prototypal inheritance?
Answer: JavaScript uses prototypal inheritance where objects can inherit properties from other
objects. Each object has a prototype object from which it inherits properties. This forms a prototype
chain until null is reached.
16. What is the difference between Object.create() and new?
Answer:
• Object.create() creates a new object with the specified prototype object and properties
• The new operator creates an instance of a user-defined object type or of one of the built-in
object types that has a constructor function
17. What are getters and setters?
Answer: Getters and setters are functions that get or set the value of an object's property. They are
defined using get and set keywords.
Example:
const obj = {
_name: '',
get name() {
return this._name;
},
set name(value) {
this._name = value;
};
ES6+ Features
18. What are template literals?
Answer: Template literals are string literals allowing embedded expressions, multi-line strings, and
string interpolation using backticks (`) and ${expression}.
Example:
const name = 'John';
console.log(`Hello ${name}!`);
19. What are default parameters?
Answer: Default parameters allow named parameters to be initialized with default values if no value
or undefined is passed.
Example:
function greet(name = 'Guest') {
return `Hello ${name}`;
20. What is destructuring assignment?
Answer: Destructuring assignment is a syntax that allows unpacking values from arrays or properties
from objects into distinct variables.
Example:
// Array destructuring
const [a, b] = [1, 2];
// Object destructuring
const {name, age} = {name: 'John', age: 30};
Error Handling
21. How do you handle errors in JavaScript?
Answer: Errors can be handled using try...catch...finally blocks. Custom errors can be thrown using
the throw statement.
Example:
try {
// Code that may throw an error
throw new Error('Something went wrong');
} catch (error) {
console.error(error.message);
} finally {
// Code that runs regardless of error
Browser and DOM
22. What is the DOM?
Answer: The Document Object Model (DOM) is a programming interface for HTML and XML
documents. It represents the page so that programs can change the document structure, style, and
content.
23. What is event delegation?
Answer: Event delegation is a technique where instead of adding event listeners to individual
elements, you add a single event listener to a parent element that will fire for all descendants
matching a selector, whether they exist now or are added in the future.
24. What is localStorage and sessionStorage?
Answer:
• localStorage: Stores data with no expiration date, cleared only through JavaScript or clearing
browser cache
• sessionStorage: Stores data for one session (data is lost when the browser tab is closed)
Advanced Concepts
25. What is memoization?
Answer: Memoization is an optimization technique where the results of expensive function calls are
cached so that when the same inputs occur again, the cached result can be returned.
Example:
javascript
Copy
function memoize(fn) {
const cache = {};
return function(...args) {
const key = JSON.stringify(args);
if (cache[key]) {
return cache[key];
const result = fn.apply(this, args);
cache[key] = result;
return result;
};
26. What is currying?
Answer: Currying is a technique of evaluating functions with multiple arguments into a sequence of
functions with single arguments.
Example:
javascript
Copy
function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn.apply(this, args);
} else {
return function(...args2) {
return curried.apply(this, args.concat(args2));
};
};
27. What is the difference between shallow copy and deep copy?
Answer:
• Shallow copy: Copies only the top-level properties, nested objects are shared between
original and copy
• Deep copy: Creates a new copy of all levels of the object hierarchy
28. What is the Temporal Dead Zone (TDZ)?
Answer: The TDZ is the period between entering scope and being declared where variables (let and
const) cannot be accessed. Attempting to access them results in a ReferenceError.
Testing and Debugging
29. How do you debug JavaScript code?
Answer: Common debugging techniques include:
• Using console.log()
• Browser developer tools (breakpoints, step-through debugging)
• Debugger statement (debugger;)
• Linting tools
• Unit testing frameworks
Performance
30. How do you optimize JavaScript performance?
Answer: JavaScript performance can be optimized by:
• Minimizing DOM access and manipulation
• Using event delegation
• Debouncing/throttling frequent events
• Using Web Workers for CPU-intensive tasks
• Code splitting and lazy loading
• Minimizing repaints and reflows
• Using efficient algorithms and data structures
This list covers a wide range of JavaScript interview questions from basic to advanced concepts. Be
prepared to explain these concepts clearly and provide practical examples during interviews.
continue
31. What are Immediately Invoked Function Expressions (IIFE)?
Answer: An IIFE is a function that runs as soon as it is defined. It helps create private scope and avoid
polluting the global namespace.
javascript
Copy
(function() {
console.log('This runs immediately');
})();
32. What is the difference between null and undefined?
Answer:
• undefined means a variable has been declared but not assigned a value
• null is an assignment value representing no value or no object
33. What are JavaScript design patterns?
Answer: Common JavaScript design patterns include:
• Module Pattern
• Singleton Pattern
• Factory Pattern
• Observer Pattern
• Prototype Pattern
• MVC Pattern
34. What are Web Workers?
Answer: Web Workers allow running scripts in background threads separate from the main execution
thread, preventing UI freezing during heavy computations.
javascript
Copy
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = function(e) {
console.log('Message from worker:', e.data);
};
35. What is CORS?
Answer: Cross-Origin Resource Sharing (CORS) is a mechanism that allows restricted resources on a
web page to be requested from another domain outside the domain from which the first resource
was served.
36. What are generators in JavaScript?
Answer: Generators are functions that can be exited and later re-entered, with their context saved
across re-entrances. They are defined with function* and use yield to pause execution.
javascript
Copy
function* idGenerator() {
let id = 1;
while(true) {
yield id++;
const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
37. What are JavaScript modules?
Answer: JavaScript modules are reusable pieces of code that can be exported from one program and
imported for use in another. ES6 introduced import/export syntax.
javascript
Copy
// math.js
export const add = (a, b) => a + b;
// app.js
import { add } from './math.js';
38. What is the difference between forEach and map?
Answer:
• forEach: Executes a provided function once for each array element (no return value)
• map: Creates a new array with the results of calling a provided function on every element
39. What is the purpose of the reduce method?
Answer: reduce executes a reducer function on each element of the array, resulting in a single
output value.
javascript
Copy
const sum = [1, 2, 3].reduce((acc, val) => acc + val, 0);
// sum = 6
40. What is the difference between slice and splice?
Answer:
• slice: Returns a shallow copy of a portion of an array (doesn't modify original)
• splice: Changes the contents of an array by removing/replacing elements (modifies original)
41. What are JavaScript Proxies?
Answer: Proxies allow you to create a proxy for another object that can intercept and redefine
fundamental operations for that object.
javascript
Copy
const handler = {
get(target, prop) {
return prop in target ? target[prop] : 37;
};
const p = new Proxy({}, handler);
p.a = 1;
console.log(p.a, p.b); // 1, 37
42. What is the purpose of the void operator?
Answer: The void operator evaluates an expression and then returns undefined. It's often used to
obtain the undefined primitive value.
javascript
Copy
void function test() {
console.log('Test');
}();
// Returns undefined
43. What is the difference between Object.freeze() and Object.seal()?
Answer:
• Object.freeze(): Makes an object immutable (can't add, modify, or delete properties)
• Object.seal(): Prevents adding or removing properties, but allows modifying existing
properties
44. What are tagged template literals?
Answer: Tagged templates are function calls that use template literals. The function can process the
template literal and return a manipulated string.
javascript
Copy
function highlight(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}<span class="hl">${values[i] || ''}</span>`, '');
const name = 'John';
const age = 30;
const sentence = highlight`Hello ${name}, you are ${age} years old.`;
45. What is the with statement and why is it discouraged?
Answer: The with statement extends the scope chain for a statement. It's discouraged because:
• Makes code harder to understand
• Slower performance
• Can lead to confusing bugs
• Strict mode doesn't allow it
46. What are WeakMap and WeakSet?
Answer:
• WeakMap: Collection of key/value pairs where keys are objects and weakly referenced
• WeakSet: Collection of objects where each object may occur only once (weakly referenced)
They don't prevent garbage collection of their elements.
47. What is the difference between Array.from() and the spread operator?
Answer:
• Array.from(): Creates a new array from array-like or iterable objects
• Spread operator (...): Expands iterable objects into individual elements
Array.from() can also take a mapping function as second argument.
48. What are the benefits of using strict mode?
Answer: Benefits include:
• Prevents accidental global variables
• Makes assignments that would silently fail throw errors
• Makes this undefined in functions called globally
• Disallows duplicate parameter names
• Makes eval safer by not leaking variables
• Throws error on attempts to delete undeletable properties
49. What is the difference between in and hasOwnProperty?
Answer:
• in: Returns true if property exists in object or its prototype chain
• hasOwnProperty: Returns true only if property exists directly on the object
50. How does JavaScript handle type coercion?
Answer: JavaScript performs implicit type conversion when operators are applied to values of
different types. Rules include:
• + prefers string concatenation
• Comparison operators (==) perform type coercion
• Logical operators (&&, ||, !) coerce to boolean
• Explicit coercion can be done with Number(), String(), Boolean()
51. What is tail call optimization?
Answer: Tail call optimization is where a recursive function call is the last operation in the function,
allowing the engine to reuse the current stack frame instead of creating a new one. ES6 specifies
support for TCO but it's not widely implemented.
52. What are the differences between async/await and Promises?
Answer:
• async/await is syntactic sugar over Promises
• async/await makes asynchronous code look synchronous
• Error handling is simpler with try/catch in async/await
• async/await may be easier to read and debug
• Both ultimately work with Promises under the hood
53. What is the arguments object?
Answer: The arguments object is an array-like object available inside functions that contains the
values of the arguments passed to that function. It's not available in arrow functions.
javascript
Copy
function sum() {
let total = 0;
for(let i = 0; i < arguments.length; i++) {
total += arguments[i];
return total;
54. What is the purpose of the Symbol type?
Answer: Symbols are unique and immutable primitive values that can be used as object property
keys. They help:
• Create unique property keys that won't clash
• Add properties to objects you don't own without risk of name collisions
• Define well-known symbols to customize object behavior
55. What is the difference between Object.keys() and Object.getOwnPropertyNames()?
Answer:
• Object.keys(): Returns an array of enumerable own property names
• Object.getOwnPropertyNames(): Returns all own property names (enumerable and non-
enumerable)
56. What are decorators in JavaScript?
Answer: Decorators are a proposal for extending JavaScript classes and properties at design time
(currently stage 3 proposal). They use the @decorator syntax.
javascript
Copy
@log
class MyClass {
@readonly
method() {}
57. What is the difference between throw Error and throw new Error()?
Answer: There's no practical difference - both create a new Error object. throw Error() is shorthand
for throw new Error().
58. What is the purpose of the finally block in try/catch?
Answer: The finally block executes after the try and catch blocks, regardless of whether an exception
was thrown or caught. It's useful for cleanup code.
59. What are the different ways to create objects in JavaScript?
Answer:
1. Object literal: const obj = {};
2. Constructor function: new Object()
3. Object.create()
4. Class syntax: class MyClass {}; new MyClass()
5. Factory functions
6. Using new with built-in constructors (new Array(), etc.)
60. What is the difference between instanceof and typeof?
Answer:
• typeof: Returns a string indicating the type of the unevaluated operand
• instanceof: Tests whether an object has a constructor's prototype in its prototype chain
61. What is the purpose of the ArrayBuffer object?
Answer: ArrayBuffer represents a fixed-length raw binary data buffer. It's used for working with
binary data directly, often in conjunction with typed arrays (Int8Array, Uint32Array, etc.)
and DataView.
62. What is the Temporal API?
Answer: The Temporal API is a new date/time API proposal for JavaScript that aims to fix problems
with the existing Date object by providing:
• Better immutability
• More comprehensive time zone support
• More intuitive API
• Better parsing and formatting
• More precise arithmetic operations
63. What is the difference between globalThis and window?
Answer:
• window: The global object in browser environments
• globalThis: Standard way to access the global object in any environment (browsers, Node.js,
etc.)
64. What are the different ways to handle asynchronous code in JavaScript?
Answer:
1. Callbacks
2. Promises
3. Async/await
4. Generators with promises
5. Event emitters
6. Observables (RxJS)
65. What is the purpose of the Intl object?
Answer: The Intl object provides language-sensitive string comparison, number formatting, and
date/time formatting through its constructors
(Intl.Collator, Intl.NumberFormat, Intl.DateTimeFormat).
66. What is the difference between Array.of() and Array() constructor?
Answer:
• Array(3): Creates an array with length 3 and empty slots
• Array.of(3): Creates an array with one element: [3]
67. What is the purpose of the at() method for arrays?
Answer: The at() method takes an integer value and returns the item at that index, allowing for
positive and negative integers (negative integers count back from the last item).
const arr = [1, 2, 3];
arr.at(-1); // 3
68. What is the difference between Object.assign() and the spread operator for objects?
Answer:
• Both can be used to shallow copy objects
• Spread syntax is more concise
• Object.assign() can modify an existing object (first parameter)
• Spread syntax can't add properties to an existing object directly
69. What is the purpose of the ?? (nullish coalescing) operator?
Answer: The ?? operator returns its right-hand side operand when its left-hand side operand
is null or undefined, otherwise returns its left-hand side operand.
const value = null ?? 'default'; // 'default'
70. What is the difference between ?. (optional chaining) and && for property access?
Answer:
• Optional chaining (?.): Returns undefined if reference is null or undefined
• && operator: Checks for all falsy values (not just null/undefined)
obj?.prop; // undefined if obj is null/undefined
obj && obj.prop; // undefined if obj is any falsy value
This comprehensive list covers fundamental to advanced JavaScript concepts that are commonly
asked in technical interviews. Being able to explain and demonstrate these concepts will significantly
improve your chances in JavaScript interviews.
DOM
1. What is the DOM?
Answer:
The Document Object Model (DOM) is a programming interface for HTML and XML documents that
represents the page as a tree of objects (nodes). JavaScript can manipulate these objects to:
• Change HTML elements and attributes
• Modify CSS styles
• Add/remove elements
• Respond to user events
// Example: Accessing the DOM
document.getElementById("myElement");
2. What are the different ways to select DOM elements?
Answer:
Common selection methods:
// Single element selectors
document.getElementById("id"); // Returns single element
document.querySelector(".class"); // Returns first match
// Multiple element selectors
document.getElementsByClassName("class"); // HTMLCollection
document.getElementsByTagName("div"); // HTMLCollection
document.querySelectorAll("p.highlight"); // NodeList
3. What's the difference between getElementById and querySelector?
Answer:
• getElementById() only selects by ID and returns a single element
• querySelector() uses CSS selectors and returns the first match
• querySelector() is more versatile but slightly slower for ID selection
document.getElementById("header"); // Faster for IDs
document.querySelector("#header"); // More flexible
4. How do you create and add new elements to the DOM?
Answer:
Three-step process:
// 1. Create element
const newDiv = document.createElement("div");
// 2. Configure element
newDiv.textContent = "Hello World";
newDiv.classList.add("box");
// 3. Add to DOM
document.body.appendChild(newDiv); // End of body
parentElement.insertBefore(newDiv, referenceElement); // Specific position
5. What's the difference between innerHTML and textContent?
Answer:
• innerHTML: Gets/sets HTML content (parses tags)
• textContent: Gets/sets text content (escapes tags)
element.innerHTML = "<strong>Bold</strong>"; // Renders bold text
element.textContent = "<strong>Bold</strong>"; // Shows tags as text
Security Note: innerHTML can expose XSS vulnerabilities if used with untrusted content.
6. How do you handle events in the DOM?
Answer:
Three approaches:
// 1. HTML attribute (avoid)
<button onclick="handleClick()">Click</button>
// 2. DOM property (good for single handler)
element.onclick = function() { console.log("Clicked"); };
// 3. addEventListener (best practice - multiple handlers)
element.addEventListener("click", function(e) {
console.log("Clicked", e.target);
});
7. What is event delegation and why is it useful?
Answer:
Event delegation attaches a single event listener to a parent element to handle events from multiple
child elements. Benefits:
• Better performance (fewer listeners)
• Works for dynamically added elements
• Less memory usage
document.getElementById("parent").addEventListener("click", function(e) {
if(e.target.classList.contains("child")) {
console.log("Child clicked:", e.target);
});
8. What's the difference between window.load and DOMContentLoaded?
Answer:
• DOMContentLoaded: Fires when initial HTML is parsed (no styles/images needed)
• window.load: Fires after all resources (images, styles) finish loading
document.addEventListener("DOMContentLoaded", () => {
console.log("DOM ready!");
});
window.addEventListener("load", () => {
console.log("All resources loaded");
});
9. How do you modify element styles?
Answer:
Three approaches:
// 1. style property (inline styles)
element.style.color = "blue";
element.style.backgroundColor = "#eee";
// 2. classList API (recommended)
element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("visible");
// 3. Direct className assignment (overwrites all classes)
element.className = "new-class";
10. What's the difference between parentNode and parentElement?
Answer:
• parentNode: Returns any type of parent node (including text nodes, document fragments)
• parentElement: Returns only element parent nodes (null if parent isn't an element)
// Usually identical for element nodes
element.parentNode; // Works in all cases
element.parentElement; // Returns null for document nodes
