Interview Q&A

Short answer: Prefixes ensure CSS works across browsers before full support.

Example code

Follow me on LinkedIn: .box { webkit-border-radius: 10px; /* Chrome, Safari */ moz-border-radius: 10px; /* Firefox */ border-radius: 10px; /* Standard */ } Key Takeaway: Vendor prefixes provide cross-browser compatibility for experimental features. Intermediate

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: It defines the page title shown in the browser tab and search results. Example: <title>My Portfolio | </title> Key Takeaway: Make your titles descriptive for better SEO and UX. Intermediate

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Parameters: variables listed in the function definition Arguments: actual values passed to the function when calling it Example: function greet(name) { // name = parameter console.log(`Hello ${name}`); }

Example code

greet("Sandeep"); // "Sandeep" = argument

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Follow me on LinkedIn: When a function’s final action is calling another function, JS can reuse the stack frame to avoid overflow. Example: function factorial(n, acc = 1) { if (n === 0) return acc;

Example code

return factorial(n - 1, n * acc); // Tail call
}

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: An optimization technique to cache function results for repeated inputs. Example: function memoize(fn) { const cache = {}; return x => cache[x] || (cache[x] = fn(x)); }

Example code

An optimization technique to cache function results for repeated inputs. Example: function memoize(fn) { const cache = {};
return x => cache[x] || (cache[x] = fn(x));
}

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Type Description Example Synchronous Executes line by line for loop Follow me on LinkedIn: Asynchronou Doesn’t block — runs later via callbacks, promises setTimeout, fetch()

Real-world example (ShopNest)

The checkout button uses async/await to call /api/orders, shows a spinner, and catches network errors with a toast.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: A closure is a function that retains access to variables from its outer scope even after the outer function has executed. Example: function outer() { let count = 0;

Example code

return function inner() { count++; return count; }; }
const counter = outer(); console.log(counter()); // 1 console.log(counter()); // 2

Real-world example (ShopNest)

In ShopNest’s cart UI, a click handler closes over productId. Use let in loops so each button keeps the correct id.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: llowing access to outer function variables even after the outer function finishes.

Real-world example (ShopNest)

In ShopNest’s cart UI, a click handler closes over productId. Use let in loops so each button keeps the correct id.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Use a custom CSS file loaded after Bootstrap. Or customize variables via SCSS before compilation.

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: The period between variable declaration and initialization where it cannot be accessed. Example: console.log(x); // ReferenceError let x = 10;

Example code

The period between variable declaration and initialization where it cannot be accessed. Example: console.log(x); // ReferenceError let x = 10;

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Modules are separate files that export code and import it elsewhere, ensuring encapsulation and reusability.

Example code

// export.js export const PI = 3.14; // import.js import { PI } from './export.js'; Follow me on LinkedIn:

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: They provide default values when no argument is passed. Example: function greet(name = "Guest") { return `Hello, ${name}`; }

Example code

They provide default values when no argument is passed. Example: function greet(name = "Guest") { return `Hello, ${name}`;
}

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Closures work because functions remember the scope in which they were created, allowing access to outer function variables even after the outer function finishes.

Real-world example (ShopNest)

In ShopNest’s cart UI, a click handler closes over productId. Use let in loops so each button keeps the correct id.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Bootstrap 5 uses Flexbox by default for its grid system and utilities (.d-flex, .justify-content-*, .align-items-*).

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Method Add Props Modify Delete preventExtensio ns() ❌ No ✅ Yes ✅ Yes seal() ❌ No ✅ Yes ❌ No freeze() ❌ No ❌ No ❌ No

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: No own this No arguments object Cannot be used as constructors No super or new.target

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Data privacy / encapsulation Callbacks and event handlers Memoization / caching Module pattern for structuring code Example – private counter: function createCounter() { let count = 0; // private variable

Example code

return { increment: () => ++count, decrement: () => --count }; }
const counter = createCounter(); console.log(counter.increment()); // 1 console.log(counter.decrement()); // 0

Real-world example (ShopNest)

In ShopNest’s cart UI, a click handler closes over productId. Use let in loops so each button keeps the correct id.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Use margin (m-*) and padding (p-*) utilities: <div class="p-3 m-2 text-center"></div>

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Context this Refers To Follow me on LinkedIn: Global window or global Method The object owning the method Constructor The new instance Arrow function Lexical (surrounding) scope

Example code

const obj = { value: 10, show: function() { console.log(this.value); } }; obj.show(); // 10

Real-world example (ShopNest)

Prefer arrow functions for React/event callbacks in ShopNest so this is not accidentally rebound.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: A safe way to access nested properties without throwing an error if something is undefined or null. Example: console.log(user?.address?.city);

Example code

A safe way to access nested properties without throwing an error if something is undefined or null. Example: console.log(user?.address?.city);

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Arrow functions are shorter, and they don’t have their own this, arguments, or prototype. Follow me on LinkedIn:

Example code

const obj = { val: 10, normal() { console.log(this.val); }, // Works arrow: () => console.log(this.val), // Undefined (no own this) };

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Yes. Variables inside the outer function cannot be accessed directly, only via inner functions.

Example code

See createCounter() above.

Real-world example (ShopNest)

In ShopNest’s cart UI, a click handler closes over productId. Use let in loops so each button keeps the correct id.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Install React-Bootstrap (npm install react-bootstrap bootstrap). Import components: import { Button } from 'react-bootstrap'; <Button variant="primary">Click</Button>

Real-world example (ShopNest)

ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Both execute dynamic code, but: eval() executes in the current scope (less safe). Function() executes in a new scope (safer). Example: eval("var a = 5"); const b = new Function("return 5;"); ⚠ Both are discouraged due to security and performance issues. Bootstrap Interview Questions

Example code

Both execute dynamic code, but: eval() executes in the current scope (less safe). Function() executes in a new scope (safer). Example: eval("var a = 5");
const b = new Function("return 5;"); ⚠ Both are discouraged due to security and performance issues. Bootstrap Interview Questions

Real-world example (ShopNest)

In ShopNest’s cart UI, a click handler closes over productId. Use let in loops so each button keeps the correct id.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Use try...catch inside async functions or .catch() for Promises. Example: async function loadData() { try { const res = await fetch('/data'); return await res.json(); } catch (err) { console.error("Error:", err); } Follow me on LinkedIn: } Advanced

Example code

Use try...catch inside async functions or .catch() for Promises. Example: async function loadData() { try { const res = await fetch('/data');
return await res.json(); } catch (err) { console.error("Error:", err); } Follow me on LinkedIn: } Advanced

Real-world example (ShopNest)

The checkout button uses async/await to call /api/orders, shows a spinner, and catches network errors with a toast.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.