Interview Q&A

They let you embed audio and video files directly in HTML without plugins like Flash.

Example:

<audio controls>

<source src="music.mp3" type="audio/mpeg">

</audio>

<video controls width="320">

<source src="movie.mp4" type="video/mp4">

</video>

Follow me on LinkedIn:

Key Takeaway:

HTML5 makes multimedia playback native, fast, and accessible.

Keyword Scope Re-declar

Re-assig

Hoisted?

var 	Functio

✅ Yes ✅ Yes ✅ Yes (undefined)

let Block ❌ No ✅ Yes 🚫 Temporarily dead

zone

const Block ❌ No ❌ No 🚫 Temporarily dead

zone

Example:

Follow me on LinkedIn:

let x = 10; const y = 20; var z = 30;

Answer: Property Description min-wid th Element won’t shrink below this width max-wid th Element won’t grow beyond this width Example: div { min-width: 200px; max-width: 600px; } Key Takeaway: Use both for responsive, constrained resizing.

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Answer: Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope during compilation. Example: console.log(a); // undefined var a = 5; Here, var a is hoisted but not initialized.

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Answer: Shallow equality: Compares only top-level properties. Deep equality: Compares nested values recursively. Example: {a:1} === {a:1} // false (different refs) Use libraries like Lodash’s _.isEqual() for deep comparison. Follow me on LinkedIn:

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

BEM is a naming convention for writing scalable and reusable CSS.

Structure:

.block__element--modifier

Example:

<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

The <head> tag contains metadata — information about the document that isn’t displayed

on the page (like title, styles, or scripts).

Example:

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

Answer: 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:

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

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

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Position Based On Moves with Page

Scroll?

Relative Its normal position ✅ Yes

Absolut

Nearest positioned

ancestor

✅ Yes

Fixed Viewport ❌ No

Example:

div { position: absolute; top: 10px; left: 20px; }

Key Takeaway:

Absolute is relative to parent; fixed stays on screen.

Follow me on LinkedIn:

Answer: Follow me on LinkedIn: .row → Groups columns and manages horizontal alignment .col → Defines how many columns an element spans

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

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]

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

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:

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

It hints the browser that an element will soon change, so the browser can optimize

rendering ahead of time.

Example:

.box {

will-change: transform, opacity;

}

Key Takeaway:

Improves animation performance but use carefully — too many can waste memory.

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

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

It links human-readable text with a machine-readable value — useful for analytics or scripts.

Follow me on LinkedIn:

Example:

<p>Price: <data value="499">₹499</data></p>

Key Takeaway:

<data> helps embed structured data inside readable content.

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

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

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Instead of attaching listeners to every element, attach one listener to a parent — it

captures events from its children using bubbling.

Example:

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.

Answer: Operator Description Example == Compares values after type conversion '5' == 5 → true === Compares values and types '5' === 5 → false Follow me on LinkedIn:

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

contain tells the browser which aspects of an element’s rendering are independent

from the rest of the document — reducing reflows and repaints.

Example:

.card {

Follow me on LinkedIn:

contain: layout paint;

}

Key Takeaway:

Containment isolates elements for performance optimization.

• id is unique and used for a single element.
• class can be used for multiple elements.

Example:

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

Answer: .container: Fixed width, adjusts at each breakpoint. .container-fluid: Always spans 100% width.

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Answer: async/await makes asynchronous code look synchronous. It works with Promises. Follow me on LinkedIn: Example: sync function fetchData() { const data = await fetch("/api"); return data.json(); }

What interviewers expect

• A clear definition tied to JavaScript in JavaScript projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production JavaScript application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in JavaScript architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

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:

p {

padding-inline-start: 10px; /* Works for both LTR and RTL */

}

Key Takeaway:

Logical properties make designs multilingual and direction-aware.