Interview Q&A

Short answer: Method Returns Chainable Use Case forEach () undefin ed ❌ No Iteration map() New array ✅ Yes Transformation Example: [1,2,3].map(x => x*2); // [2,4,6]

Example code

Method Returns Chainable Use Case forEach () undefin ed ❌ No Iteration map() New array ✅ Yes Transformation Example: [1,2,3].map(x => x*2); // [2,4,6]

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 a shorter syntax for writing functions. They don’t have their own this. Example: const sum = (a, b) => a + b; Follow me on LinkedIn:

Example code

Arrow functions are a shorter syntax for writing functions. They don’t have their own this. Example: const sum = (a, b) => a + b; 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: It hints the browser that an element will soon change, so the browser can optimize rendering ahead of time.

Example code

.box { will-change: transform, opacity; } Key Takeaway: Improves animation performance but use carefully — too many can waste memory.

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: z-index controls stacking order of overlapping elements.

Example code

.box1 { z-index: 1; } .box2 { z-index: 10; } Higher values appear on top. Key Takeaway: Only works on positioned elements (position ≠ static).

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 links human-readable text with a machine-readable value — useful for analytics or scripts. Follow me on LinkedIn:

Example code

<p>Price: <data value="499">₹499</data></p> Key Takeaway: <data> helps embed structured data inside readable content.

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: <ol> = Ordered List (numbered) <ul> = Unordered List (bulleted) <dl> = Description List (term–definition pairs) Example: <ol> <li>HTML</li> <li>CSS</li> </ol> <ul> <li>Apple</li> <li>Banana</li> </ul> Follow me on LinkedIn: <dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> </dl> Key Takeaway: Choose list type based on how you want to present data.

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: Returns the type of a variable. Example: typeof "hello"; // "string" typeof 42; // "number"

Example code

Returns the type of a variable. Example: typeof "hello"; // "string" typeof 42; // "number"

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: Instead of attaching listeners to every element, attach one listener to a parent — it captures events from its children using bubbling.

Example code

document.querySelector('#list').addEventListener('click', e => { if (e.target.tagName === 'LI') console.log(e.target.textContent); }); Follow me on LinkedIn: ✅ Improves performance and memory usage.

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: == : Equality operator (converts type before comparing) === : Strict equality (no type conversion, checks type + value) Example: 5 == '5'; // true 5 === '5'; // false

Example code

== : Equality operator (converts type before comparing) === : Strict equality (no type conversion, checks type + value) Example: 5 == '5'; // true
5 === '5'; // false

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: contain tells the browser which aspects of an element’s rendering are independent from the rest of the document — reducing reflows and repaints.

Example code

.card { Follow me on LinkedIn: contain: layout paint; } Key Takeaway: Containment isolates elements for performance optimization.

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: id is unique and used for a single element. class can be used for multiple elements.

Example code

<div id="main-header"></div> <div class="card"></div> <div class="card"></div> Key Takeaway: Use id for specific targeting; class for grouping and styling.

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: .container: Fixed width, adjusts at each breakpoint. .container-fluid: Always spans 100% width.

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: Logical properties adapt layouts for different writing directions (LTR, RTL, vertical text). Physical Logical margin-le ft margin-inline-s tart padding-t op padding-block-s tart

Example code

p { padding-inline-start: 10px; /* Works for both LTR and RTL */ } Key Takeaway: Logical properties make designs multilingual and direction-aware.

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: A function is a block of reusable code that performs a task or returns a value. Example: function greet(name) { return `Hello, ${name}!`; } console.log(greet("Sandeep"));

Example code

A function is a block of reusable code that performs a task or returns a value. Example: function greet(name) { return `Hello, ${name}!`;
} console.log(greet("Sandeep"));

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 create objects, but: {} is simpler and faster. new Object() is less common and can be overridden. Example: const a = {}; // Preferred const b = new Object(); // Not preferred

Example code

Both create objects, but: {} is simpler and faster. new Object() is less common and can be overridden. Example: const a = {}; // Preferred
const b = new Object(); // Not preferred

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 event listener waits for user actions (like clicks or keypresses) and runs a function when the event occurs.

Example code

button.addEventListener("click", () => alert("Clicked!"));

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: Controls what happens when content exceeds the container’s size. Values: visible (default) hidden scroll auto

Example code

div { overflow: auto; } Key Takeaway: overflow: auto adds scrollbars only when needed.

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 collects user input and sends it to a server or script for processing.

Example code

<form action="/submit" method="POST"> <input type="text" name="username"> <button type="submit">Submit</button> </form> Key Takeaway: Forms are the foundation of user interaction on the web.

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: Variables declared inside a function are accessible only within that function.

Example code

function demo() { let x = 10; console.log(x); // 10 } console.log(x); // ReferenceError

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: ssigned 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: Type Meaning null Intentional absence of value undefin ed Variable declared but not assigned 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: Property Location Affects Background? Padding Inside border ✅ Yes Margin Outside border ❌ No

Example code

div { Follow me on LinkedIn: margin: 10px; padding: 20px; } Key Takeaway: Padding = inner spacing, Margin = outer spacing.

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: <picture> allows serving different image versions depending on device, screen size, or media type.

Example code

<picture> <source srcset="photo-large.jpg" media="(min-width: 800px)"> <source srcset="photo-small.jpg" media="(max-width: 799px)"> <img src="photo-default.jpg" alt="Beautiful landscape"> </picture> Key Takeaway: Use <picture> for art direction — showing different images per device or context.

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: <head> holds metadata (title, styles, scripts). <header> defines the visible top section of the page (logo, navigation, heading).

Example code

<head> <title>My Portfolio</title> </head> <header> <h1>Welcome to My Portfolio</h1> </header> Follow me on LinkedIn: Key Takeaway: <head> = document info; <header> = visible header area.

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: Variables declared with let or const inside curly braces {} are accessible only within that block. Example: if (true) { let y = 20; const z = 30; } // console.log(y, z); // ReferenceError

Example code

Variables declared with let or const inside curly braces {} are accessible only within that block. Example: if (true) {
let y = 20;
const z = 30;
} // console.log(y, z); // ReferenceError

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.