Web Development Interview Preparation Guide

Q121. What is JavaScript and where is it used?
JavaScript is a high-level, interpreted programming language used to make web pages interactive. It runs in browsers (frontend) and servers (backend with Node.js), enabling dynamic content, animations, form validation, and complex web applications.  

Q122. What are the different ways to declare variables in JavaScript?
JavaScript has three ways: var (function-scoped, hoisted), let (block-scoped, not hoisted), and const (block-scoped, immutable reference). Modern JavaScript prefers let and const.  

Q123. What is the difference between let, const, and var?
var is function-scoped and can be redeclared. let is block-scoped and can be reassigned but not redeclared. const is block-scoped and cannot be reassigned or redeclared.  

Q124. What are JavaScript data types?
JavaScript has primitive types (String, Number, Boolean, Undefined, Null, Symbol, BigInt) and reference types (Objects, Arrays, Functions). Primitives store actual values, references store memory addresses.  

Q125. What is the difference between == and ===?
== (equality) performs type coercion before comparison, while === (strict equality) checks both value and type without coercion. Always prefer === for precise comparisons.  

Q126. What is variable hoisting in JavaScript?
Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope before execution. var declarations are hoisted with undefined, let/const are hoisted but not initialized (temporal dead zone).  

Q127. What are template literals in JavaScript?
Template literals use backticks () and allow embedded expressions with${}, multi-line strings, and string interpolation. Example:Hello ${name}, you are ${age} years old`. 

Q128. What are JavaScript operators? Name the types.
Operators perform operations on variables and values: Arithmetic (+, -, *, /), Assignment (=, +=, -=), Comparison (==, =, !=, !), Logical (&&, ||, !), Conditional (ternary ? :).  

Q129. What is the ternary operator?
A shorthand for if-else statements: condition ? expressionIfTrue : expressionIfFalse. Example: let result = age >= 18 ? ‘Adult’ : ‘Minor’;. 

Q130. What are conditional statements in JavaScript?
Conditional statements control program flow: if, else if, else execute code blocks based on conditions. switch statements handle multiple specific condition checks.  

Q131. What are loops in JavaScript?
Loops repeat code blocks: for (known iterations), while (condition-based), do-while (executes at least once), for…of (array values), for…in (object properties).  

Q132. What is the difference between for…in and for…of?
for…in iterates over enumerable property names (keys) of objects. for…of iterates over iterable values (like array elements, string characters). Use for…of for arrays.  

Q133. What are JavaScript functions and why are they important?
Functions are reusable code blocks that perform specific tasks. They accept parameters, process logic, and return values. Functions make code modular, maintainable, and avoid repetition.  

Q134. What is the difference between function declaration and function expression?
Function declarations are hoisted and can be called before definition: function greet() {}. Function expressions are assigned to variables and not hoisted: const greet = function() {}. 

Q135. What are arrow functions?
Arrow functions provide shorter syntax: const add = (a, b) => a + b;. They don’t have their own this binding and are ideal for callbacks and short functions.  

Q136. What is the this keyword in JavaScript?
this refers to the object executing the current function. Its value depends on how the function is called: global object (in global scope), the object itself (in methods), undefined (in strict mode functions). 

Q137. What are arrays in JavaScript?
Arrays are ordered, indexed collections that store multiple values of any type. They’re zero-indexed and have built-in methods for manipulation like push, pop, map, filter, and reduce.  

Q138. What are common array methods in JavaScript?
Important methods: push(), pop(), shift(), unshift(), slice(), splice(), concat(), map(), filter(), reduce(), find(), findIndex(), includes(), forEach(), sort().   

Q139. What is the difference between push() and unshift()?
push() adds elements to the end of an array and returns the new length. unshift() adds elements to the beginning and also returns the new length. 

Q140. What is the difference between slice() and splice()?
slice() returns a shallow copy of a portion of an array without modifying the original. splice() changes the original array by adding, removing, or replacing elements.  

Q141. What does the map() method do?
map() creates a new array by applying a function to each element of the original array. It doesn’t modify the original array. Example: [^1][^22][^23].map(x => x * 2) returns [^22][^24][^25].  

Q142. What does the filter() method do?
filter() creates a new array containing only elements that pass a test function. Example: [^1][^22][^23][^24].filter(x => x > 2) returns [^23][^24].  

Q143. What does the reduce() method do?
reduce() executes a reducer function on each array element, resulting in a single output value. Commonly used for summing, finding max/min, or transforming arrays into objects.  

Q144. What is the difference between find() and filter()?
find() returns the first element that matches the condition (or undefined). filter() returns an array of all matching elements (or empty array). 

Q145. What are JavaScript objects?
Objects are collections of key-value pairs (properties and methods). They store related data and functionality together. Example: {name: ‘John’, age: 30, greet: function() {}}.  

Q146. How do you access object properties?
Two ways: Dot notation (object.property) and bracket notation (object[‘property’]). Bracket notation is necessary for dynamic keys or keys with special characters.  

Q147. What are object methods?
Methods are functions stored as object properties. They perform actions related to the object. Access with object.method(). The this keyword refers to the object inside methods.  

Q148. How do you add or delete properties from objects?
Add: object.newProperty = value or object[‘newProperty’] = value. Delete: delete object.property. Check existence: ‘property’ in object. 

Q149. What is object destructuring?
Destructuring extracts properties into variables: const {name, age} = person;. You can also assign default values and rename variables during destructuring.  

Q150. What is array destructuring?
Array destructuring extracts array elements into variables: const [first, second] = array;. You can skip elements, use rest operator, and set defaults. 

Q151. What is the spread operator (…)?
The spread operator expands arrays or objects. For arrays: […array1, …array2] merges them. For objects: {…obj1, …obj2} combines properties.  

Q152. What is the rest parameter?
Rest parameters collect remaining arguments into an array: function sum(…numbers) {}. It allows functions to accept unlimited arguments. Must be the last parameter. 

Q153. What is the DOM (Document Object Model)?
The DOM is a programming interface for HTML documents. It represents the page structure as a tree of objects, allowing JavaScript to manipulate content, structure, and styles dynamically.  

Q154. How do you select elements in the DOM?
Methods include: getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector() (first match), querySelectorAll() (all matches). Modern code prefers querySelector methods.  

Q155. What is the difference between querySelector() and getElementById()?
querySelector() uses CSS selectors and can select any element (more flexible). getElementById() only selects by ID but is slightly faster for simple ID selection. 

Q156. How do you change element content in the DOM?
Use innerHTML (sets HTML content), textContent (sets text only, safer), or innerText (considers styling, returns visible text only).  

Q157. How do you change element styles in JavaScript?
Access the style property: element.style.color = ‘red’. For multiple styles, use element.style.cssText or add/remove CSS classes with classList.add(), classList.remove(), classList.toggle().  

Q158. How do you create and remove DOM elements?
Create: document.createElement(‘div’). Add to DOM: parent.appendChild(child) or parent.insertBefore(). Remove: element.remove() or parent.removeChild(child).  

Q159. What is event handling in JavaScript?
Events are actions like clicks, key presses, or mouse movements. Event handlers respond to these actions. Add handlers with addEventListener() or inline attributes (not recommended).  

Q160. What is addEventListener() and how does it work?
addEventListener() attaches event handlers to elements: element.addEventListener(‘click’, function). It allows multiple handlers per event and supports options like once, capture.  

Q161. What is event bubbling?
Event bubbling is when an event triggers on a child element, then propagates upward through parent elements. Click a button inside a div, both button and div click events fire. 

Q162. What is event delegation?
Event delegation attaches a single event listener to a parent element instead of multiple children. It uses event bubbling to handle events from dynamically created elements efficiently. 

Q163. What is the preventDefault() method?
preventDefault() stops the default browser behavior for an event. Common uses: preventing form submission, stopping link navigation for custom handling. 

Q164. What is local storage?
Local storage is a web API that stores key-value pairs in the browser with no expiration. Data persists even after closing the browser. Use localStorage.setItem(), getItem(), removeItem().  

Q165. What is session storage?
Session storage is similar to local storage but data is cleared when the browser tab closes. Use sessionStorage.setItem(), getItem(), removeItem().  

Q166. What is the difference between cookies and local storage?
Cookies are sent with every HTTP request (4KB limit), have expiration dates, and work across all browsers. Local storage stores more data (5-10MB), doesn’t auto-send, and is JavaScript-only.  

Q167. What is JSON and why is it important?
JSON (JavaScript Object Notation) is a lightweight data format for storing and exchanging data. Use JSON.stringify() to convert objects to JSON strings and JSON.parse() to convert back. 

Q168. What is asynchronous JavaScript?
Asynchronous code executes without blocking other operations. JavaScript is single-threaded but handles async operations through callbacks, promises, and async/await for tasks like API calls.  

Q169. What is the event loop?
The event loop handles asynchronous operations in JavaScript. It continuously checks the call stack and callback queue, executing callbacks when the stack is empty.  

Q170. What are callbacks in JavaScript?
Callbacks are functions passed as arguments to other functions and executed later. Commonly used for async operations. Can lead to “callback hell” with nested callbacks.  

Q171. What are Promises in JavaScript?
Promises represent future values from asynchronous operations. They have three states: pending, fulfilled (resolved), or rejected. Use .then() for success and .catch() for errors.   

Q172. What is Promise chaining?
Promise chaining links multiple async operations sequentially using .then(). Each .then() returns a new Promise, allowing clean sequential async code without nesting.  

Q173. What is async/await?
async/await is modern syntax for handling Promises. async functions return Promises. await pauses execution until a Promise resolves, making async code look synchronous.   

Q174. What is the difference between Promises and async/await?
They both handle async operations, but async/await provides cleaner, more readable syntax. async/await is syntactic sugar over Promises, making error handling easier with try-catch.  

Q175. How do you handle errors in async/await?
Use try-catch blocks: try { await promise; } catch(error) { handle error }. This is cleaner than Promise .catch() for multiple async operations.  

Q176. What are JavaScript classes?
Classes are blueprints for creating objects with shared properties and methods. Introduced in ES6, they provide cleaner syntax for constructor functions and prototypal inheritance.  

Q177. What is a constructor in JavaScript?
Constructors are special methods that initialize new objects. In classes, use the constructor() method. It runs automatically when creating instances with new ClassName().  

Q178. What is inheritance in JavaScript?
Inheritance allows classes to inherit properties and methods from parent classes using the extends keyword. Child classes can override parent methods or add new functionality.  

Q179. What is the super keyword?
super refers to the parent class. Use super() to call the parent constructor and super.method() to call parent methods from child classes. 

Q180. What are JavaScript timers?
Timers execute code after delays. setTimeout(function, delay) executes once after delay. setInterval(function, interval) executes repeatedly. Clear with clearTimeout() and clearInterval().