Interview Q&A

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.

Proxy allows you to intercept and redefine fundamental operations on objects.

Example:

const user = { name: "Alice" };

const proxy = new Proxy(user, {

get: (target, prop) => `${prop} -> ${target[prop]}`

});

console.log(proxy.name); // name -> Alice

✅ Used in data validation, reactive frameworks (like Vue.js).

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]

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) => 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: calc() performs dynamic calculations for CSS values. Example: div { width: calc(100% - 50px); padding: calc(1em + 5px); } Follow me on LinkedIn: Key Takeaway: calc() mixes units and adjusts layouts dynamically.

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

Answer: Via CDN: &lt;link href=" p.min.css" rel="stylesheet"&gt; Or via NPM: npm install bootstrap Intermediate

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: Generators are special functions that can pause and resume execution using the function* syntax and yield. Example: function* counter() { yield 1; yield 2; } const gen = counter(); console.log(gen.next().value); // 1

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: Objects store data in key-value pairs. Example: const user = { name: "Alice", age: 25 }; console.log(user.name); // Alice

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

Answer: Set equal height and width and use border-radius: 50%. Example: .circle { width: 100px; height: 100px; background: teal; border-radius: 50%; } Key Takeaway: Equal dimensions + border-radius: 50% = perfect circle.

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: It completely hides the element — it’s not visible and doesn’t take up space in the layout. Example: .hidden { display: none; } Key Takeaway: display: none removes the element from the document flow.

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.

Use the W3C HTML Validator to check your markup.

To fix errors:

• Close all tags properly.
• Avoid duplicate ids.
• Ensure attributes are correctly formatted.
• Use only valid HTML elements.

Example:

✅ Correct:

<img src="logo.png" alt="Company Logo">

❌ Incorrect:

<img src="logo.png" alt=Company Logo>

Follow me on LinkedIn:

Key Takeaway:

Clean, valid HTML ensures better rendering, SEO, and accessibility.

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

The <meta> tag provides metadata — like page description, author, and viewport settings.

Example:

<meta name="description" content="Learn web development with real

examples.">

<meta name="viewport" content="width=device-width,

initial-scale=1.0">

Key Takeaway:

Meta tags are essential for SEO and responsive design.

Currying transforms a function that takes multiple arguments into a sequence of functions

that take one argument each.

Example:

function add(a) {

return b => a + b;
}

console.log(add(5)(3)); // 8

✅ Useful for function reusability and functional composition.

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.

const arr1 = [1, 2, 3]; const arr2 = new Array(1, 2, 3);

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.