Master technical and career interviews with structured answers—short definition, real examples, pitfalls, and how to answer in 60–90 seconds.
Short answer: var: function-scoped, can be redeclared. let: block-scoped, cannot redeclare in the same scope. const: block-scoped, cannot be reassigned. Example: var x = 10; let y = 20; const z = 30; Example code var: fu…
Short answer: Property Description min-wid th Element won’t shrink below this width max-wid th Element won’t grow beyond this width Example code div { min-width: 200px; max-width: 600px; } Key Takeaway: Use both for resp…
Short answer: Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope. Example: console.log(a); // undefined var a = 5; Example code Hoisting is JavaScript’s behavior of m…
Short answer: Shallow equality: Compares only top-level properties. Deep equality: Compares nested values recursively. Example code {a:1} === {a:1} // false (different refs) Use libraries like Lodash’s _.isEqual() for de…
Short answer: BEM is a naming convention for writing scalable and reusable CSS. Structure: .block__element--modifier Example code <div class="card card--featured"> <h2 class="card__title">…
Short answer: The <head> tag contains metadata — information about the document that isn’t displayed on the page (like title, styles, or scripts). Example code <head> <title>Portfolio</title> <…
Short answer: bsolut Nearest positioned ncestor ✅ Yes Fixed Viewport ❌ No div { position: absolute; top: 10px; left: 20px; } Key Takeaway: bsolute is relative to parent; fixed stays on screen. Follow me on LinkedIn: bsol…
Short answer: The rest operator ... collects multiple arguments into an array. Example code function sum(...nums) { return nums.reduce((a, b) => a + b); Follow me on LinkedIn: } console.log(sum(1, 2, 3)); // 6 Real-wo…
Short answer: Position Based On Moves with Page Scroll? Relative Its normal position ✅ Yes Absolut Nearest positioned ancestor ✅ Yes Fixed Viewport ❌ No Example code div { position: absolute; top: 10px; left: 20px; } Key…
Short answer: Follow me on LinkedIn: .row → Groups columns and manages horizontal alignment .col → Defines how many columns an element spans Real-world example (ShopNest) ShopNest’s browser cart uses modern JavaScript: f…
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 forEa…
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…
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 performanc…
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 ≠ st…
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>…
Short answer: <ol> = Ordered List (numbered) <ul> = Unordered List (bulleted) <dl> = Description List (term–definition pairs) Example: <ol> <li>HTML</li> <li>CSS</li> </…
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"; // &…
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',…
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 (co…
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 p…
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 cl…
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, mod…
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-inl…
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 i…
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 o…
JavaScript JavaScript Tutorial · JavaScript
Short answer: var: function-scoped, can be redeclared. let: block-scoped, cannot redeclare in the same scope. const: block-scoped, cannot be reassigned. Example: var x = 10; let y = 20; const z = 30;
var: function-scoped, can be redeclared. let: block-scoped, cannot redeclare in the same scope. const: block-scoped, cannot be reassigned. Example: var x = 10;
let y = 20;
const z = 30;
In ShopNest’s cart UI, a click handler closes over productId. Use let in loops so each button keeps the correct id.
JavaScript JavaScript Tutorial · JavaScript
Short answer: Property Description min-wid th Element won’t shrink below this width max-wid th Element won’t grow beyond this width
div { min-width: 200px; max-width: 600px; } Key Takeaway: Use both for responsive, constrained resizing.
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope. Example: console.log(a); // undefined var a = 5;
Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope. Example: console.log(a); // undefined var a = 5;
Prefer arrow functions for React/event callbacks in ShopNest so this is not accidentally rebound.
JavaScript JavaScript Tutorial · JavaScript
Short answer: Shallow equality: Compares only top-level properties. Deep equality: Compares nested values recursively.
{a:1} === {a:1} // false (different refs) Use libraries like Lodash’s _.isEqual() for deep comparison. Follow me on LinkedIn:
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: BEM is a naming convention for writing scalable and reusable CSS. Structure: .block__element--modifier
<div class="card card--featured"> <h2 class="card__title">Profile</h2> </div> Key Takeaway: BEM enforces clarity: Block = independent component Element = part of a block Modifier = variation/state
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: The <head> tag contains metadata — information about the document that isn’t displayed on the page (like title, styles, or scripts).
<head> <title>Portfolio</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> Follow me on LinkedIn: Key Takeaway: Think of <head> as your page’s control room.
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: bsolut Nearest positioned ncestor ✅ Yes Fixed Viewport ❌ No div { position: absolute; top: 10px; left: 20px; } Key Takeaway: bsolute is relative to parent; fixed stays on screen. Follow me on LinkedIn: bsolut Nearest positioned ncestor ✅ Yes Fixed Viewport ❌ No
div { position: absolute; top: 10px; left: 20px; } Key Takeaway: bsolute is relative to parent; fixed stays on screen. Follow me on LinkedIn: bsolut Nearest positioned ncestor ✅ Yes Fixed Viewport ❌ No Example: div { position: absolute; top: 10px; left: 20px; } Key Takeaway: bsolute is relative to parent; fixed stays on screen. Follow me on LinkedIn: bsolut Nearest positioned ncestor ✅ Yes Fixed Viewport ❌ No Example: div { position: absolute; top: 10px; left: 20px; } Key Takeaway: bsolute is relative to parent; fixed stays on screen. Follow me on LinkedIn:
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: The rest operator ... collects multiple arguments into an array.
function sum(...nums) { return nums.reduce((a, b) => a + b); Follow me on LinkedIn: } console.log(sum(1, 2, 3)); // 6
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: Position Based On Moves with Page Scroll? Relative Its normal position ✅ Yes Absolut Nearest positioned ancestor ✅ Yes Fixed Viewport ❌ No
div { position: absolute; top: 10px; left: 20px; } Key Takeaway: Absolute is relative to parent; fixed stays on screen. Follow me on LinkedIn:
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: Follow me on LinkedIn: .row → Groups columns and manages horizontal alignment .col → Defines how many columns an element spans
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
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]
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]
JavaScript JavaScript Tutorial · JavaScript
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:
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:
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: It hints the browser that an element will soon change, so the browser can optimize rendering ahead of time.
.box { will-change: transform, opacity; } Key Takeaway: Improves animation performance but use carefully — too many can waste memory.
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: z-index controls stacking order of overlapping elements.
.box1 { z-index: 1; } .box2 { z-index: 10; } Higher values appear on top. Key Takeaway: Only works on positioned elements (position ≠ static).
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: It links human-readable text with a machine-readable value — useful for analytics or scripts. Follow me on LinkedIn:
<p>Price: <data value="499">₹499</data></p> Key Takeaway: <data> helps embed structured data inside readable content.
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
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.
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: Returns the type of a variable. Example: typeof "hello"; // "string" typeof 42; // "number"
Returns the type of a variable. Example: typeof "hello"; // "string" typeof 42; // "number"
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: Instead of attaching listeners to every element, attach one listener to a parent — it captures events from its children using bubbling.
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.
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: == : Equality operator (converts type before comparing) === : Strict equality (no type conversion, checks type + value) Example: 5 == '5'; // true 5 === '5'; // false
== : Equality operator (converts type before comparing) === : Strict equality (no type conversion, checks type + value) Example: 5 == '5'; // true
5 === '5'; // false
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
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.
.card { Follow me on LinkedIn: contain: layout paint; } Key Takeaway: Containment isolates elements for performance optimization.
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: id is unique and used for a single element. class can be used for multiple elements.
<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.
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
Short answer: .container: Fixed width, adjusts at each breakpoint. .container-fluid: Always spans 100% width.
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
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
p { padding-inline-start: 10px; /* Works for both LTR and RTL */ } Key Takeaway: Logical properties make designs multilingual and direction-aware.
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
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"));
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"));
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
JavaScript JavaScript Tutorial · JavaScript
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
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
ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling.
Install Toolliyo like an app Free
Home-screen access to tutorials, coding practice & career tools — no app store needed.
On iPhone/iPad: tap Share then Add to Home Screen.