Interview Q&A

Master technical and career interviews with structured answers—short definition, real examples, pitfalls, and how to answer in 60–90 seconds.

4608 total questions 4508 technical 100 career & HR 4272 from PDF library

Showing 26–50 of 126

Career & HR topics

By tech stack

Junior PDF
What is the difference between var, let, and const?

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…

JavaScript Read answer
Junior PDF
What is the difference between min-width and max-width?

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…

JavaScript Read answer
Junior PDF
What is hoisting?

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…

JavaScript Read answer
Junior PDF
What is the difference between shallow and deep equality?

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…

JavaScript Read answer
Junior PDF
What is BEM (Block Element Modifier) methodology?

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">…

JavaScript Read answer
Junior PDF
What is the purpose of the <head> tag?

Short answer: The &lt;head&gt; tag contains metadata — information about the document that isn’t displayed on the page (like title, styles, or scripts). Example code &lt;head&gt; &lt;title&gt;Portfolio&lt;/title&gt; &lt;…

JavaScript Read answer
Junior PDF
What is the difference between relative, absolute, and fixed positioning?

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…

JavaScript Read answer
Junior PDF
What is the rest operator?

Short answer: The rest operator ... collects multiple arguments into an array. Example code function sum(...nums) { return nums.reduce((a, b) =&gt; a + b); Follow me on LinkedIn: } console.log(sum(1, 2, 3)); // 6 Real-wo…

JavaScript Read answer
Junior PDF
What is the difference between relative, absolute, and fixed positioning?

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…

JavaScript Read answer
Junior PDF
What is the purpose of the .row and .col classes?

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…

JavaScript Read answer
Junior PDF
What is the difference between map() and forEach()?

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

JavaScript Read answer
Junior PDF
What is an arrow function?

Short answer: Arrow functions are a shorter syntax for writing functions. They don’t have their own this. Example: const sum = (a, b) =&gt; a + b; Follow me on LinkedIn: Example code Arrow functions are a shorter syntax…

JavaScript Read answer
Junior PDF
What is the will-change property?

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…

JavaScript Read answer
Junior PDF
What is the purpose of z-index?

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…

JavaScript Read answer
Junior PDF
What is the use of the <data> tag?

Short answer: It links human-readable text with a machine-readable value — useful for analytics or scripts. Follow me on LinkedIn: Example code &lt;p&gt;Price: &lt;data value=&quot;499&quot;&gt;₹499&lt;/data&gt;&lt;/p&gt…

JavaScript Read answer
Junior PDF
What is the difference between <ol>, <ul>, and <dl>?

Short answer: &lt;ol&gt; = Ordered List (numbered) &lt;ul&gt; = Unordered List (bulleted) &lt;dl&gt; = Description List (term–definition pairs) Example: &lt;ol&gt; &lt;li&gt;HTML&lt;/li&gt; &lt;li&gt;CSS&lt;/li&gt; &lt;/…

JavaScript Read answer
Junior PDF
What is typeof operator?

Short answer: Returns the type of a variable. Example: typeof &quot;hello&quot;; // &quot;string&quot; typeof 42; // &quot;number&quot; Example code Returns the type of a variable. Example: typeof &quot;hello&quot;; // &…

JavaScript Read answer
Junior PDF
What is the event delegation pattern?

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',…

JavaScript Read answer
Junior PDF
What is the difference between === and ==?

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…

JavaScript Read answer
Junior PDF
What is CSS containment?

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…

JavaScript Read answer
Junior PDF
What is the difference between id and class attributes?

Short answer: id is unique and used for a single element. class can be used for multiple elements. Example code &lt;div id=&quot;main-header&quot;&gt;&lt;/div&gt; &lt;div class=&quot;card&quot;&gt;&lt;/div&gt; &lt;div cl…

JavaScript Read answer
Junior PDF
What is the difference between .container and .container-fluid?

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…

JavaScript Read answer
Junior PDF
What is the difference between logical and physical properties?

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…

JavaScript Read answer
Junior PDF
What is a function in 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(&quot;Sandeep&quot;)); Example code A function i…

JavaScript Read answer
Junior PDF
What is the difference between new Object() and object literal {}?

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 Read answer

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;

Example code

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;

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.
Permalink & share

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

Example code

div { min-width: 200px; max-width: 600px; } Key Takeaway: Use both for responsive, constrained resizing.

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.
Permalink & share

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;

Example code

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;

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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 deep comparison. 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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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">Profile</h2> </div> Key Takeaway: BEM enforces clarity: Block = independent component Element = part of a block Modifier = variation/state

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.
Permalink & share

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).

Example code

<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.

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.
Permalink & share

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

Example code

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:

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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-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.
Permalink & share

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

Example code

div { position: absolute; top: 10px; left: 20px; } Key Takeaway: Absolute is relative to parent; fixed stays on screen. 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.
Permalink & share

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

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.
Permalink & share

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]

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.
Permalink & share

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:

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.
Permalink & share

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.

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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.
Permalink & share

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:

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.
Permalink & share

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.

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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.
Permalink & share

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.

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.
Permalink & share

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

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.
Permalink & share

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.

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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.
Permalink & share

JavaScript JavaScript Tutorial · JavaScript

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.
Permalink & share

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

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.
Permalink & share

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"));

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.
Permalink & share

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

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.
Permalink & share
Toolliyo Assistant
Ask about tutorials, ebooks, training, pricing, mentor services, and support. I use public site content only—not admin or internal tools.

care@toolliyo.com

Need callback? Share your details