Javascript

1. What is JavaScript?

A: A high-level, interpreted programming language primarily used to make web pages interactive.

2. Is JavaScript the same as Java?

A: No. Despite similar names, they are different languages with different designs.

3. What type of language is JavaScript?

A: Dynamically typed, weakly typed, interpreted, prototype-based, multi-paradigm.

4. How do you declare a variable in JavaScript?

let x = 5;
const y = 10;
var z =  15;

5. Difference between var, let, and const?

• var: function-scoped, hoisted, can be redeclared.
• let: block-scoped, cannot be redeclared in same scope.
• const: block-scoped, must be initialized, cannot be reassigned.

6. What does typeof do?

A: Returns the type of a variable as a string.

typeof 42; // 'number'

7. What is NaN?

A: Stands for “Not-a-Number”. Returned from invalid numeric operations.

8. How can you check if a value is NaN?

isNaN(value);

9. What is === vs ==?

• ==: compares with type coercion.
• ===: strict equality, no type coercion.

10. What is a template literal?

let name = 'Bob';
console.log(`Hello ${name}`);

Allows embedded expressions with backticks `` `.

11. What is a function?

A: A reusable block of code.

12. How to declare a function?

function add(a, b) { return a + b; }

13. What is an anonymous function?

A: A function without a name.

const sum = function(x, y) { return x + y; };

14. What is an arrow function?

const sum = (x, y) => x + y;

15. What does return do?

A: Exits the function and returns a value.

16. What is console.log?

A: Outputs messages to the browser console.

17. What are objects in JavaScript?

A: Collections of key-value pairs.

let person = { name: 'Alice', age: 25 };


### 18. How to access object properties?
```js
person.name
person['age']

19. What is an array?

A: Ordered list of values.

let arr = [1, 2, 3];

20. How to loop through an array?

for (let i of arr) console.log(i);

21. What is an if statement?

if (x > 5) { console.log('Big'); }

22. What is a ternary operator?

x > 5 ? 'big' : 'small';

23. What is a switch?

switch(color) {
  case 'red': break;
  default: break;
}

24. What are logical operators?

• &&: AND
• ||: OR
• !: NOT

25. What does ?? do?

A: Nullish coalescing operator. Returns right-hand side if left is null or undefined.

26. What is scope?

A: Determines visibility of variables.

27. Difference between global and local scope?

• Global: accessible everywhere.
• Local: inside functions or blocks.

28. What is block scope?

A: Scope within braces (created by let, const).

29. What is function scope?

A: Scope created inside a function. var is function-scoped.

30. What is a closure?

A: A function that remembers variables from its outer scope.

31. Example of closure?

function outer() {
  let x = ### 10;
  return function() { console.log(x); }
}
const inner = outer();
inner(); // prints ### 10

32. What is hoisting?

A: JavaScript moves declarations to the top. Functions fully hoisted; var is hoisted with undefined.

33. What are default parameters?

function greet(name = 'Guest') { console.log(name); }

34. What is a rest parameter?

function sum(...nums) { return nums.reduce((a,b) => a+b); }

35. What is the spread operator?

let nums = [1,2,3];
console.log(...nums); // 1 2 3

36. What does Array.push do?

A: Adds to end.

37. What does pop do?

A: Removes last item.

38. How to remove first item?

arr.shift();

39. How to add item to start?

arr.unshift(0);

40. What does slice do?

A: Returns a shallow copy of part of array.

41. What does splice do?

A: Changes array by adding/removing elements.

42. What is map?

A: Creates new array by transforming each element.

[1,2,3].map(x => x*2);

43. What is filter?

A: Creates array with elements that pass test.

44. What is reduce?

A: Accumulates array into single value.

[1,2,3].reduce((a,b) => a+b, 0);

45. How to check if array includes value?

arr.includes(2);

46. How to get string length?

'hello'.length;

47. How to find substring?

'hello'.includes('ell');

48. What does toUpperCase do?

A: Converts string to uppercase.

49. What does split do?

'1,2,3'.split(','); // ['1','2','3']

50. How to replace text?

'hello'.replace('h','y'); // 'yello'

51. What does trim() do?

A: Removes whitespace from start and end.

' hello '.trim(); // 'hello'

52. What does startsWith() do?

A: Checks if string starts with substring.

'hello'.startsWith('he'); // true

53. How about endsWith()?

A: Checks if string ends with substring.

'hello'.endsWith('lo'); // true

54. What is parseInt?

A: Converts string to integer.

parseInt('42', ### 10); // 42

55. What is parseFloat?

A: Parses string to floating-point number.

56. How to format number with 2 decimals?

(3.1415).toFixed(2); // '3.14'

57. What does isFinite check?

A: Whether a value is a finite number.

isFinite(10/0); // false

58. What is Math.random()?

A: Returns random float between 0 and 1.

59. How to round a number?

Math.round(4.7); // 5

60. What does Math.floor do?

A: Rounds down.

61. What does Math.ceil do?

A: Rounds up.

62. What is Math.max and Math.min?

A: Finds highest or lowest of given numbers.

63. What is this?

A: Refers to the object the function is a method of.

64. How does this work in global scope?

A: In browser, this is window.

65. What does this refer to in an object method?

A: The object itself.

66. How does this work in a function?

A: By default refers to global object (window), or undefined in strict mode.

67. What is bind?

A: Creates new function with this bound to specific object.

func.bind(obj);

68. What is call?

A: Calls function with this and arguments.

func.call(obj, arg1, arg2);

69. What is apply?

A: Same as call but takes arguments as array.

func.apply(obj, [arg1, arg2]);

70. How does this work in arrow functions?

A: Inherits this from enclosing scope (lexical this).

71. What is Object.keys?

A: Returns array of object's own property names.

72. What is Object.values?

A: Returns array of values.

73. What is Object.entries?

A: Returns array of [key, value] pairs.

74. How to merge objects?

Object.assign(target, source1, source2);

75. What is object destructuring?

const {a, b} = {a:1, b:2};

76. What is nested destructuring?

const { x: { y } } = { x: { y: ### 10 }};

77. How to clone an object?

const clone = {...original};

78. What is prototype?

A: Mechanism by which objects inherit features from one another.

79. What is prototype chain?

A: Series of links through proto allowing property lookup.

80. What is a class?

class Person {
  constructor(name) { this.name = name; }
}

Syntactic sugar over prototypes.

81. How to create subclass?

class Student extends Person {}

82. What does super do?

A: Calls parent constructor or methods.

83. What is static method?

class A { static greet() {} }

Called on class, not instance.

84. What is instanceof?

A: Tests if object is an instance of constructor.

obj instanceof Person;

85. What is hasOwnProperty?

A: Checks if property is direct (not inherited).

obj.hasOwnProperty('key');

86. What is the DOM?

A: Document Object Model, represents HTML as a tree of objects.

87. How to select element by ID?

document.getElementById('id');

88. How to select by class?

document.getElementsByClassName('cls');

89. How to use querySelector?

document.querySelector('.cls');

90. What is innerHTML?

A: Gets/sets HTML content inside element.

91. What is textContent?

A: Gets/sets text content only.

92. How to change style?

el.style.color = 'blue';

93. How to create element?

document.createElement('div');

94. How to append child?

parent.appendChild(child);

95. How to remove element?

el.remove();

96. How to add event listener?

element.addEventListener('click', handler);

97. What does preventDefault do?

A: Prevents default browser action.

98. What does stopPropagation do?

A: Stops event bubbling up.

99. What is event delegation?

A: Attach listener to parent, use event.target to handle children.

100. How to trigger click in JS?

element.click();
``
### 101. What is a Promise?
A: An object representing the eventual completion or failure of an asynchronous operation.

### 102. How to create a Promise?
```js
let p = new Promise((resolve, reject) => {
  if (success) resolve("ok");
  else reject("error");
});

103. What does .then() do?

A: Registers callbacks for promise resolution.

104. What does .catch() do?

A: Registers callback for promise rejection.

105. What does .finally() do?

A: Runs after promise settles, whether fulfilled or rejected.

106. How to run code asynchronously?

setTimeout(() => { console.log("Hi"); }, ### 1000);

107. What is async function?

A: Always returns a promise.

108. What does await do?

A: Pauses inside async until promise settles.

109. Example of async/await?

async function fetchData() {
  let res = await fetch(url);
  let data = await res.json();
}

110. What is Promise.all?

A: Runs promises in parallel, waits for all to resolve or any to reject.

111. What is Promise.race?

A: Resolves/rejects with the first settled promise.

112. What is Promise.allSettled?

A: Waits for all to finish, returns array of results {status, value/reason}.

113. What is JSON?

A: JavaScript Object Notation, lightweight data format.

114. How to parse JSON?

JSON.parse('{"x":5}');

115. How to convert to JSON?

JSON.stringify({x:5});

116. What is let and const block scope good for?

A: Avoids variable hoisting surprises of var.

117. What are template literals?

`Hello ${name}`

Support multi-line strings and interpolation.

118. What are arrow functions not suitable for?

A: Using this dynamically (lexical this).

119. What are default parameters?

function f(x=5) {}

120. What is destructuring?

const [a,b] = [1,2];
const {x,y} = {x:1,y:2};

121. What is rest operator?

function f(...args) {}

122. What is spread operator?

let arr2 = [...arr1, 4];

123. What is for...of?

for (let val of [1,2,3]) {}

Iterates values.

124. How about for...in?

A: Iterates keys of an object.

125. What are symbols?

A: Unique immutable primitive for keys.

let sym = Symbol("id");

126. What is a Set?

A: Collection of unique values.

let s = new Set([1,2,3]);

127. How to add to Set?

s.add(4);

128. How to check Set contains value?

s.has(2);

129. What is Map?

A: Key-value pairs, where keys can be any type.

let m = new Map();
m.set('a', 1);

130. How to get value from Map?

m.get('a');

131. How to iterate Map?

for (let [k,v] of m) {}

132. How to get keys from Map?

m.keys();

133. What does find do?

[1,2,3].find(x => x > 1); // 2

134. What is findIndex?

A: Returns index of first match.

135. What is some?

A: Checks if at least one element passes test.

136. What is every?

A: Checks if all elements pass test.

137. What is flat?

[1, [2, [3]]].flat(2);

138. What is flatMap?

A: Maps then flattens one level.

139. What is an ES module?

export default function() {}
import func from './file.js';

140. What does import do?

A: Loads JS code from another file.

141. What does export mean?

A: Marks values to be available for import elsewhere.

142. Difference between default and named exports?

export default x;
export { a, b };

143. What is a bundler (Webpack, Parcel)?

A: Combines multiple JS files into one for production.

144. What is Babel?

A: JavaScript compiler for transforming ES6+ to ES5.

145. What is tree shaking?

A: Eliminates unused code in bundling.

146. How to handle errors?

try { 
  riskyCode(); 
} catch(e) {
  console.error(e);
}

147. What is finally for?

A: Runs after try or catch always.

148. How to throw error?

throw new Error("fail");

149. How to set timeout?

setTimeout(() => {}, ### 1000);

150. How to clear timeout?

clearTimeout(timer);

151. What is setInterval?

A: Repeats function every delay.

setInterval(() => {}, ### 1000);

152. How to cancel interval?

clearInterval(id);

153. What is a higher-order function?

A: Takes functions as args or returns function.

154. What is pure function?

A: No side-effects, same inputs -> same output.

155. What is immutability?

A: Avoid changing data directly.

156. What is currying?

const add = x => y => x + y;
add(2)(3);

157. What is memoization?

A: Cache results of expensive calls.

158. What is typeof null?

A: 'object' (quirk).

159. What is NaN === NaN?

A: false.

160. How to check NaN reliably?

Number.isNaN(value);

161. What does delete do?

A: Removes property from object.

162. What does void operator do?

void 0; // always undefined

163. What is IIFE?

A: Immediately Invoked Function Expression.

(function(){})();

164. What is strict mode?

'use strict';

Throws more errors, disables sloppy behavior.

165. What is arguments object?

A: Array-like object of all args inside function.

166. How to get current URL?

window.location.href;

167. How to alert a message?

alert('Hi');

168. How to confirm a choice?

confirm('Are you sure?');

169. How to prompt for input?

prompt('Name?');

170. How to listen for window resize?

window.addEventListener('resize', handler);

171. How to scroll to top?

window.scrollTo(0,0);

172. How to get viewport size?

window.innerWidth;
window.innerHeight;

173. How to block context menu?

document.addEventListener('contextmenu', e => e.preventDefault());

174. What is localStorage?

A: Key-value store, persists across sessions.

175. What is sessionStorage?

A: Key-value store cleared on tab close.

176. How to set item in localStorage?

localStorage.setItem('key', 'value');

177. How to retrieve item?

localStorage.getItem('key');

178. How to remove item?

localStorage.removeItem('key');

179. What is debounce?

A: Delay running function until user stops triggering it.

180. What is throttle?

A: Run function at most once per time period.

181. Why minimize DOM manipulation?

A: Slow due to reflows/repaints.

182. What is virtual DOM?

A: Lightweight copy used to optimize re-rendering (React).

183. Why bundle/minify JS?

A: Fewer requests, faster loading.

184. What does defer in <script> tag do?

A: Runs after HTML parsed.

185. What does async do?

A: Loads script asynchronously, may run before HTML complete.

186. What is console.dir?

A: Prints an interactive listing of object.

187. How to break on debugger?

debugger;

188. What is unit testing?

A: Testing individual functions/components.

189. Popular JS test frameworks?

A: Jest, Mocha, Jasmine.

190. What is TDD?

A: Test Driven Development.

191. What is linting?

A: Static analysis to find problems (ESLint).

192. What is CORS?

A: Cross-Origin Resource Sharing, controls requests from other domains.

193. What is XSS?

A: Cross Site Scripting.

194. How to mitigate XSS?

A: Sanitize inputs, escape outputs.

195. What is transpilation?

A: Converting newer JS into older version for compatibility.

196. How to check browser support?

A: CanIUse.com or @supports.

197. What is polyfill?

A: JS that adds missing feature in older browsers.

198. What is transpiler vs compiler?

A: Transpiler: same-level languages (ES6 to ES5). Compiler: any language to machine code.

199. What is graceful degradation?

A: Build for newest, still works on old.

200. What is progressive enhancement?

A: Build for baseline, enhance with JS.

201. What is a callback?

A: A function passed to another function to be executed later.

202. What is callback hell?

A: Nested callbacks making code hard to read & maintain.

203. How does promise solve callback hell?

A: Allows chaining with .then() and better error handling.

204. What is the module pattern?

A: Uses closures to emulate private/public.

const Module = (() => {
  let privateVar = 0;
  return { increment() { privateVar++; } };
})();

205. What is the revealing module pattern?

A: Returns object literal exposing inner functions.

206. What is an immediately invoked arrow function (IIFE)?

(() => { console.log("run"); })();

207. What is function composition?

A: Combining functions so output of one becomes input of next.

208. What is partial application?

A: Pre-filling some arguments.

const add = (a,b) => a+b;
const add5 = add.bind(null, 5);
add5(3); //8

209. What is tail call optimization?

A: Reuses stack frame for recursive call (not widely supported).

210. What is monad in JS?

A: Design pattern to chain computations (seen in libraries like Ramda).

211. What is optional chaining?

let x = obj?.prop?.subprop;

Avoids errors if property doesn’t exist.

212. What is nullish coalescing?

let x = val ?? "default";

Only falls back on null or undefined.

213. What are logical assignment operators?

a ||= b; // a = a || b

214. What is Promise.any?

A: Resolves on first fulfilled promise, ignores rejections.

215. What is globalThis?

A: Cross-environment global object (browser window, Node global).

216. What is BigInt?

let big = 12345678901234567890n;

217. What is dynamic import()?

A: Loads modules on demand.

import('./module.js').then(...)

218. What is WeakRef?

A: Holds weak reference to object (used with finalization).

219. What is Intl?

A: Built-in internationalization API.

220. What is garbage collection?

A: JS automatically frees memory no longer reachable.

221. What causes memory leaks?

A: Unreleased references, listeners not removed.

222. How to find memory leaks?

A: Browser DevTools -> Memory tab.

223. What is a detached DOM tree?

A: DOM nodes kept alive by JS references even if removed from document.

224. Why sanitize user input?

A: To prevent XSS attacks.

225. What is CSP (Content Security Policy)?

A: HTTP header to restrict sources of scripts.

226. How to mitigate CSRF?

A: Use tokens tied to session.

227. Why avoid eval?

A: Runs arbitrary code, security & performance issues.

228. What is strict mode used for security?

A: Eliminates silent errors, makes assignments safer.

229. What is IntersectionObserver?

A: Asynchronously observes changes in intersection of element and viewport.

230. What is MutationObserver?

A: Watches DOM changes.

231. What is ResizeObserver?

A: Notifies when element’s size changes.

232. What is fetch API?

fetch('/data').then(res => res.json());

Modern way to make HTTP requests.

233. What is AbortController?

A: Cancels fetch requests.

let ctrl = new AbortController();
fetch(url, { signal: ctrl.signal });
ctrl.abort();

234. What is History API?

A: Lets you push/replace state to URL without reload.

235. What is navigator.geolocation?

A: Get user location.

236. What is Notification API?

A: Display system notifications.

237. What is WebSocket?

A: Persistent connection for bi-directional data.

238. What is localStorage vs indexedDB?

• localStorage: simple key-value strings.
• indexedDB: structured, larger datasets.

239. What is mocking?

A: Faking modules/APIs for tests.

240. What is snapshot testing?

A: Captures output and compares on next runs (common in Jest).

241. What is coverage?

A: % of code run by tests.

242. How to inspect event listeners in browser?

A: DevTools -> Event Listeners tab.

243. What is requestAnimationFrame?

A: Schedules animation for next repaint.

244. Why prefer over setTimeout for animations?

A: Syncs with display refresh, more efficient.

245. What is dataset?

el.dataset.id = 5;

Access data-* attributes.

246. What is classList?

el.classList.add('active');

247. What is closest?

A: Finds nearest ancestor matching selector.

248. What is focus & blur?

input.focus();
input.blur();

249. What is scrollIntoView?

A: Scrolls element into viewport.

250. What is Element.getBoundingClientRect()?

A: Returns position & size relative to viewport.

251. What is map vs forEach?

• map: returns new array.
• forEach: just iterates.

252. What is immutability good for?

A: Easier reasoning, avoids side-effects.

253. How to deeply clone object?

A: structuredClone(obj) or JSON approach.

254. What is declarative vs imperative?

• Declarative: describe what.
• Imperative: step by step how.

255. What is pure vs impure function?

• Pure: always same output, no side effects.
• Impure: relies on or modifies outside state.

256. What happens on 0.1 + 0.2 === 0.3?

A: false due to floating point precision.

257. What does [] + [] produce?

A: "" (empty string).

258. What does [] + {} produce?

A: "[object Object]".

259. What does {} + [] give?

A: 0, due to parsing as block + array.

260. What is service worker?

A: Background script enabling offline, caching.

261. What is progressive web app (PWA)?

A: Web app with offline & native-like features.

262. What is shadow DOM?

A: Encapsulated DOM tree inside component.

263. What are web components?

A: Reusable custom HTML elements.

264. What is custom event?

el.dispatchEvent(new CustomEvent('my-event', { detail: { id: 1 } }));

265. How to lazy load images?

<img loading="lazy" src="..." />

266. What is matchMedia?

A: Runs JS for media query matches.

window.matchMedia('(max-width:600px)').matches;

267. What is ResizeObserver vs MutationObserver?

• ResizeObserver: watches size.
• MutationObserver: watches DOM changes.

268. What is navigator.clipboard?

A: Async clipboard API.

269. What is document.execCommand?

A: Old synchronous clipboard commands.

270. What is performance.now()?

A: High-resolution timestamp.

271. What is event loop?

A: Handles execution of code, events & tasks.

272. What are microtasks vs macrotasks?

• Microtasks: promises, queueMicrotask.
• Macrotasks: setTimeout, setInterval.

273. Example of microtask queue order?

Promise.resolve().then(()=>console.log(1));
setTimeout(()=>console.log(2));
console.log(3);

// Output: 3 1 2

274. What is debounce vs throttle?

A: Debounce waits until stop, throttle limits calls.

275. What is observer pattern?

A: Object notifies dependents on change.

276. What is pub/sub?

A: Publisher emits events, subscribers listen.

277. What is middleware?

A: Functions that process requests in order (common in express, redux).

278. What is polyfill vs shim?

• Polyfill: implements missing feature.
• Shim: wraps existing behavior to improve it.

279. Why avoid long JS tasks?

A: Blocks UI thread.

280. How to break long loop?

setTimeout(() => nextChunk(), 0);

281. How to test DOM events?

A: Simulate with dispatchEvent or test frameworks.

282. How to mock API calls?

A: Jest mock functions or libraries like MSW.

283. How to handle timezone issues?

A: Use libraries like date-fns or Intl.

284. How to handle currency?

A: Use Intl.NumberFormat.

285. What’s your approach to optimizing performance?

A: Profile, minimize repaints, lazy load, use will-change.

286. How to debug memory leak?

A: Snapshots in Chrome Memory panel.

287. How do you handle cross-browser issues?

A: Use feature detection, polyfills, check on CanIUse.

288. How to ensure accessibility?

A: Use ARIA, semantic HTML, test with screen readers.

289. When would you use reduce vs map?

A: reduce to aggregate, map to transform array.

290. How to secure frontend?

A: Avoid inline scripts, use CSP, sanitize inputs.

291. How to lazy load JS modules?

if (needsHeavy) import('./heavy.js').then(...);

292. How to optimize bundle size?

A: Tree shaking, dynamic imports, code splitting.

293. Why prefer fetch over XMLHttpRequest?

A: Simpler, promise-based.

294. What does await block?

A: Only async function execution, not entire thread.

295. How to share data across tabs?

A: Use localStorage events or BroadcastChannel API.

296. How to create delay with promises?

const sleep = ms => new Promise(r => setTimeout(r, ms));

297. How to clone array without references?

let clone = [...original];

298. How to debounce input?

let t; input.oninput = () => {
  clearTimeout(t);
  t = setTimeout(search, 300);
};

299. What is stale closure?

A: Function captures old variables, common bug in loops or state.

300. What excites you about modern JavaScript?

A: (Open-ended: mention ESNext, async/await, PWA, WebAssembly, TypeScript...)