React Interview Guide

─── JAVASCRIPT & FOUNDATIONS ───

Q1: Object Reference Puzzle (Output-Based)

Question: What is the output of the following code and why?

const obj = { test: "Priyansh" };
const obj2 = obj;
obj2.test = "Khatri";

console.log(obj, obj2);

• The Perfect Answer: Both obj and obj2 will print { test: "Khatri" }.

• The Core Concept: In JavaScript, non-primitive data types like objects are assigned by reference, not by value. When we write const obj2 = obj, both variables point to the exact same memory address. Therefore, modifying a property via obj2 directly alters the shared object in memory, affecting obj as well.

• Follow-up (How to avoid this): This is called a shallow copy issue. To avoid mutating the original object, we can create a deep copy using JSON.parse(JSON.stringify(obj)), structural cloning (structuredClone(obj)), or a shallow clone using the spread operator ({ ...obj }) if there are no nested objects.

Q2: Array Methods: every() vs some()

Question: What is the difference between the every() and some() array methods?

• The Perfect Answer:

• every() checks if all elements in the array satisfy the given condition. It returns true only if the callback returns true for every single item; otherwise, it returns false.

• some() checks if at least one element in the array satisfies the condition. It short-circuits and returns true the moment it finds a single matching element; it returns false only if all elements fail the condition.

Q3: Promises: .then() vs .finally()

Question: What is the difference between .then() and .finally() in Promise handling?

• The Perfect Answer:

• .then() is executed conditionally based on the fulfillment of the promise. It takes a callback to handle the successfully resolved data.

• .finally() is executed deterministically, regardless of whether the promise was resolved or rejected. It is typically used for clean-up tasks (like stopping a loading spinner) because it is guaranteed to run after the promise settles.

• Follow-up (Rejection): Rejections should be handled specifically using the .catch() block.

Q4: Function Scoping: Normal Functions vs Arrow Functions

Question: What is the difference between a normal function and an arrow function?

• The Perfect Answer:

• Syntactic Conciseness: Arrow functions provide a shorter syntax and implicit returns for single-line statements.

• this Binding (Crucial): Normal functions have their own dynamic this context, determined by how the function is invoked. Arrow functions do not have their own this binding; instead, they lexically inherit this from their surrounding parent scope.

• Hoisting: Normal function declarations are fully hoisted (meaning they can be called before they are declared in the code). Arrow functions are typically assigned to let or const variables, meaning they are bound by variable hoisting rules and reside in the Temporal Dead Zone (TDZ) until execution reaches their declaration.

Q5: Equality Comparison: Objects Comparison (== vs ===)

Question: What is the output of {} == {} and {} === {} and why?

console.log({} == {});
console.log({} === {});

• The Perfect Answer: Both lines will print false.

• The Core Concept: The candidate in the video incorrectly said true. In JavaScript, primitive values are compared by their value, but objects are compared by their memory reference. Every time you write {} (an empty object literal), JavaScript allocates a brand new object at a unique location in memory. Because these two empty objects reside at completely different memory addresses, their references are unequal, causing both loose (==) and strict (===) equality checks to return false.

Q6: Event Loop Priorities: Promises vs setTimeout

Question: Asynchronous tasks run after synchronous code. Between a Promise and a setTimeout, which executes first?

• The Perfect Answer: Promises will always execute before setTimeout.

• The Core Concept: The Event Loop manages asynchronous operations through two queues: the Microtask Queue and the Macrotask Queue (or Callback Queue). Promises (.then() / .catch()) are placed into the Microtask Queue. setTimeout callbacks are web/browser APIs that get placed into the Macrotask Queue. The Event Loop is strictly prioritized to completely exhaust the Microtask Queue before moving on to pick up any tasks from the Macrotask Queue.

Q7: Variables: let, const, and var

Question: What are the key differences between let, const, and var?

• The Perfect Answer:

• Reassignment: let and var variables can be reassigned new values. const variables are constant references and cannot be reassigned.

• Redeclaration: var variables can be freely redeclared within the same scope. let and const variables will throw a syntax error if you attempt to redeclare them in the same block scope.

• Scoping: var is function-scoped, whereas let and const are strictly block-scoped (confined to the closest {}).

Q8: Closures & Lexical Scope

Question: What is a closure? Does the parent scope have access to a child scope's variables?

• The Perfect Answer: A closure is a feature where an inner function retains access to the variables of its outer (lexical) parent scope, even after the outer function has completely finished executing.

• Scope Direction: Scope accessibility is strictly a one-way street. An inner (child) scope can look upward to access variables in the outer (parent) scope. However, a parent scope has no access to variables declared inside a child scope.

Q9: Callbacks & Higher-Order Functions (HOF)

Question: Define Callback functions and Higher-Order functions. Can a Higher-Order function take multiple function arguments?

• The Perfect Answer:

• Callback Function: A function passed as an argument into another function, intended to be executed at a later time.

• Higher-Order Function (HOF): A function that operates on other functions, either by accepting one or more functions as arguments, returning a function, or both.

• Multiple Arguments: Yes, a Higher-Order function can absolutely accept multiple functions as arguments. A classic real-world example is a custom composition function or a promise chain utility that accepts distinct success and failure callback functions.

Q10: Iteration: for...in vs for...of

Question: What is the difference between a for...in loop and a for...of loop?

• The Perfect Answer:

• for...in iterates over the enumerable keys (or property names) of an object. It is primarily used to loop through object properties.

• for...of iterates over the values generated by an iterable object (such as an Array, Map, Set, or String).

---

─── CODING LOGIC / ARRAY EXERCISE ───

Q11: Array Separation Challenge

Question: Given an array containing mixed types: [10, 20, 30, 'C', 80, 'Riyansh', 7, 'Khatri', 'J', 'L']. Write a clean function to separate numbers, single characters, and long strings into different arrays.

• The Perfect Answer:

const mixedArray = [10, 20, 30, 'C', 80, 'Riyansh', 7, 'Khatri', 'J', 'L'];

function separateData(arr) {
  const numbers = [];
  const characters = [];
  const strings = [];

  arr.forEach(item => {
    if (typeof item === 'number') {
      numbers.push(item);
    } else if (typeof item === 'string') {
      // Check length to distinguish single characters from strings
      if (item.length === 1) {
        characters.push(item);
      } else {
        strings.push(item);
      }
    }
  });

  return { numbers, characters, strings };
}

console.log(separateData(mixedArray));

---

─── REACT.JS ARCHITECTURE ───

Q12: Rendering: SSR vs CSR

Question: What is the difference between Server-Side Rendering (SSR) and Client-Side Rendering (CSR)?

• The Perfect Answer:

• CSR (Client-Side Rendering): The server sends a bare-minimum HTML file along with a large bundle of JavaScript. The user's browser executes this JavaScript to build the DOM dynamically.

• SSR (Server-Side Rendering): The server executes the components on the backend, populates the layout with real data, and compiles a fully constructed HTML page to send back to the client.

• Trade-offs: SSR provides a significantly faster First Contentful Paint (FCP). It is highly beneficial for SEO because search engine web crawlers can immediately parse the pre-rendered HTML text without having to execute complex client-side script bundles first.

Q13: State Mutability & Props

Question: Are React props and state mutable or immutable?

• The Perfect Answer: Both are strictly immutable from the perspective of the component using them.

• Props are read-only values passed down from a parent component. A child component must never directly modify its received props.

• State represents local component memory. It must never be mutated directly (e.g., writing state.value = 10 is an anti-pattern). Instead, state transitions must always be triggered via its designated setter function (e.g., setState()), which notifies React to schedule a clean re-render.

Q14: State Management: Prop Drilling vs Context API

Question: What is prop drilling and how do you prevent it?

• The Perfect Answer: Prop drilling is the process of passing down data through multiple layers of intermediate nested components solely to deliver that data to a deeply targeted child component that needs it. This clutters the intermediate components with unnecessary props.

• Prevention: We prevent this by utilizing the Context API (or global state libraries like Redux). The Context API provides a Provider wrapper that allows any deeply nested component to subscribe directly to the data stream, bypassing intermediate layers entirely.

Q15: Performance: useMemo, useCallback, and Memoization

Question: Explain Memoization. What is the difference between useMemo and useCallback?

• The Perfect Answer:

• Memoization: An optimization technique where the result of an expensive operation is cached based on its inputs. If the inputs don't change on subsequent renders, the cached result is returned directly, saving processing time.

• useMemo: Used to memoize and cache a calculated computed value (e.g., sorting a massive dataset).

• useCallback: Used to memoize and cache a function definition itself across renders. This prevents child components from unnecessarily re-rendering when a function callback is passed down as a prop.

Q16: DOM Mechanics: Real DOM vs Virtual DOM

Question: What is the core difference between the Real DOM and the Virtual DOM?

• The Perfect Answer: The Real DOM is the browser's actual HTML node tree structure. Updating it directly is computationally expensive. The Virtual DOM is a lightweight, in-memory JavaScript object representation of the Real DOM. When state changes, React updates the Virtual DOM first, runs a diffing algorithm to compare the new Virtual DOM snapshot against the previous one, and calculates the exact minimum changes needed. It then applies only those targeted patches to the Real DOM via a batch process called reconciliation.

Q17: Higher-Order Components (HOC) & Real-World Use Case

Question: What is a Higher-Order Component (HOC)? Share a practical scenario where you have built or used one.

• The Perfect Answer: A Higher-Order Component is an advanced architectural pattern in React where a function takes a component as an argument and returns an enhanced component injected with extra features or data.

• Real-World Case: Authentication Shielding. You can create a withAuth(WrappedComponent) HOC. Inside the HOC, you evaluate if the client possesses a valid authentication session token. If authenticated, it renders the WrappedComponent (like a Protected Dashboard); if unauthenticated, it intercepts the route and uses a redirect component to steer them out to the Login Page.

Q18: Architecture Terms: DOM Storage, Babel, Webpack, & Lifting State Up

Question: Define where the DOM is stored, Babel, Webpack, and the concept of "Lifting State Up".

• The Perfect Answer: The candidate failed these completely in the video. Knowing these gives you an edge:

• Where the DOM is stored: The DOM is stored in the browser's memory heap as a structured object representation of the document.

• Babel: A JavaScript compiler/transpiler. It converts modern ECMAScript code (ES6+) and JSX syntax into backward-compatible versions of JavaScript that older web browsers can easily parse and execute.

• Webpack: A static module bundler for modern JavaScript applications. It takes all individual project dependency files (JS, JSX, CSS, images) and processes them into optimized, minified bundles for production deployment.

• Lifting State Up: A React architectural design pattern. When two or more sibling components need access to the same shared state, you "lift" that state up to their closest common parent component, passing it back down via props to ensure a single source of truth.

Q19: React Critique: SEO & Routing Challenges

Question: What are some disadvantages or structural limitations of React compared to frameworks like Next.js?

• The Perfect Answer: Standard React (CRA/Vite configurations) acts primarily as a client-side SPA library.

• SEO Limitations: Because rendering happens entirely on the client, initial pages appear empty to older web crawlers, creating SEO indexation challenges compared to Next.js's native SSR.

• Routing: React does not feature built-in routing. Developers must configure external libraries like react-router-dom manually, whereas Next.js provides file-system-based routing natively out-of-the-box.

• Dynamic Routing Hook: When performing dynamic routing (e.g., matching a path like /user/:id), React Router uses the useParams() hook to extract parameters from the URL path.

---

─── WEB HYPERTEXT & STYLING ───

Q20: HTML Tables: Layout Attributes

Question: How do you club multiple cells together in an HTML table? What is the difference between cell padding and cell spacing?

• The Perfect Answer:

• Clubbing Cells: Use the rowspan attribute to merge cells vertically across rows, and the colspan attribute to merge cells horizontally across columns.

• Cell Padding vs Cell Spacing: The candidate missed this. Cell padding controls the clear space inside a cell between its border and the content. Cell spacing controls the physical space between separate individual table cells.

Q21: HTML Typography: <em> vs <i> Tags

Question: What is the structural difference between using the <em> tag and the <i> tag?

• The Perfect Answer: The candidate missed this. While both render text in italics by default, they carry distinct semantic meanings:

• <em> (Emphasis): Carries semantic importance and structural stress. Screen readers will emphasize the spoken tone of words wrapped in this tag.

• <i> (Idiomatic/Italic): Purely typographic style choice used to differentiate text (like technical terms or idiomatic phrases) without assigning any extra semantic weight or structural emphasis.

Q22: CSS Visibility Layout: display: none vs visibility: hidden

Question: What is the structural difference between display: none and visibility: hidden?

• The Perfect Answer:

• visibility: hidden hides the element from view, but the element still occupies its physical space in the document layout flow. It acts like an invisible box.

• display: none completely removes the element from the document rendering tree. The element vanishes entirely, and surrounding elements collapse to fill the layout space it occupied.

Q23: CSS Specificity: Selectors Priority

Question: Rank the priority/specificity order among Universal (*), Class (.), and ID (#) selectors. Which holds the absolute least priority?

• The Perfect Answer: The priority ranking from highest specificity to lowest is:

1. ID Selector (#) - Highest Priority

2. Class Selector (.) - Medium Priority

3. Universal Selector (*) - Absolute Lowest Priority

• The Core Concept: The candidate mistakenly said class had the lowest priority first. The Universal selector (*) targets everything globally but has a specificity weight of 0, meaning any class or ID selector will easily overwrite it.

Q24: CSS Architecture: Group Selectors

Question: What is a CSS group selector?

• The Perfect Answer: A group selector is a comma-separated list used to apply the exact same set of style rules to multiple selectors simultaneously. For example: h1, h2, p, .custom-div { color: blue; }. This keeps stylesheets DRY (Don't Repeat Yourself) by preventing code duplication.

─── JAVASCRIPT TYPES & ENGINE EQUATIONS ───

Q1: Loose Equality & Falsy Values Puzzle (Output-Based)

Question: What is the output of the following checks and why?

var x = 0;
var y = "0";
var z = false;

console.log(x == y);
console.log(x == z);

• The Perfect Answer: Both expressions evaluate to true.

• The Core Concept:

• x == y: Loose equality triggers implicit type coercion. When comparing a number to a string, JavaScript converts the string to a number under the hood. "0" becomes 0, matching x, so it returns true.

• x == z: JavaScript converts boolean values to numbers during loose comparison. false converts to 0 (and true to 1). Because 0 == 0, this also evaluates to true.

Q2: null vs undefined Equality Checks

Question: What do null == undefined and null === undefined return, and what are their data types?

• The Perfect Answer:

• null == undefined evaluates to true because JavaScript explicitly treats them as loosely equal to each other.

• null === undefined evaluates to false because they are entirely different data types.

• The Types: typeof undefined is "undefined", whereas typeof null returns "object". Note: The candidate in the video incorrectly claimed that the type of null is "undefined" or an object; remember, it is treated as an object due to a historical quirk in JavaScript.

Q3: Direct Primitive Evaluation: NaN, [] + [], and {} + {}

Question: What are the evaluation outputs of typeof appointments/NaN, [] + [], and {} + {}?

• The Perfect Answer:

• typeof NaN returns "number". Even though NaN stands for "Not-a-Number", it is technically categorized under the numeric type system in JavaScript.

• [] + [] returns an empty string (""). The candidate incorrectly guessed 2 or 0. During addition, JavaScript attempts to convert arrays into primitive values. An empty array strings out to "", resulting in "" + "" which yields an empty string.

• {} + {} behaves conditionally based on context. In standard console evaluations, JavaScript interprets the first {} as an empty code block and treats + {} as a unary plus operation on an empty object, returning NaN. However, if evaluated directly as an expression (e.g., console.log({} + {})), it treats both as objects, coerces them to strings, and returns "[object Object][object Object]".

Q4: JavaScript Native Errors

Question: Name the common native error types built into JavaScript.

• The Perfect Answer: The candidate mistakenly guessed "UI Error". The native error structures are:

• ReferenceError: Thrown when referencing a variable that does not exist in the current scope.

• TypeError: Thrown when an operation is performed on an incompatible data type (e.g., invoking a string as a function).

• SyntaxError: Thrown when the interpreter encounters code that breaks standard language syntax rules.

• RangeError: Thrown when a numeric value falls outside its allowable range limits.

Q5: Understanding the Temporal Dead Zone (TDZ)

Question: Explain what the Temporal Dead Zone (TDZ) is and point out exactly where it lies in a program.

• The Perfect Answer: The Temporal Dead Zone is the specific region of a program execution block from the start of the block scope until the moment the variable is officially declared.

• The Rules: Variables declared with let and const are hoisted, but they are not initialized with a default value. Attempting to access them within this zone throws a ReferenceError.

function checkTDZ() {
  // === TEMPORAL DEAD ZONE FOR variable 'a' START ===
  console.log(a); // Throws ReferenceError!
  // === TEMPORAL DEAD ZONE FOR variable 'a' END ===
  
  let a = 10; // Variable is initialized here.
  console.log(a); // Safe to access: prints 10.
}

Q6: Function Expressions vs Anonymous Functions & Hoisting

Question: What is an anonymous function, and are function expressions or arrow functions hoisted?

• The Perfect Answer: An anonymous function is a function declaration defined without an explicit name identifier. Function expressions and arrow functions are not structurally hoisted as functions. If they are assigned to var, the variable initialization hoists as undefined. If assigned to let or const, they remain trapped inside the Temporal Dead Zone until execution reaches their assignment lines.

Q7: Mathematical Operations on Strings

Question: What does evaluation of "Raza" - "Ali" return?

• The Perfect Answer: It evaluates to NaN (Not-a-Number). The subtraction operator (-) forces arithmetic type conversion. Because standard text strings cannot be mathematically converted into numbers, the operation fails and yields NaN.

Q8: Optional Chaining Purpose (?.)

Question: Why do we use optional chaining (?.) instead of standard dot notation?

• The Perfect Answer: Optional chaining permits developers to safely read nested properties deep within an object tree without explicitly checking every step of the reference path for validity. If a reference is null or undefined, the expression short-circuits gracefully and returns undefined rather than throwing a runtime crash error.

Q9: Native Pop-up Frameworks

Question: Name the three types of native window pop-up interfaces provided by JavaScript.

• The Perfect Answer:

• alert(): Displays a simple informational modal window with an "OK" confirmation option.

• confirm(): Displays a modal interface offering conditional "OK" and "Cancel" choices, returning a boolean value.

• prompt(): Opens an input dialog window enabling users to submit text entries directly back to the script.

---

─── LIVE RUN CODING EXERCISES ───

Q10: Printing Only Negative Numbers from an Array

Question: Write a function that takes an array containing positive and negative values and returns a clean array containing only the negative entries.

• The Perfect Answer:

const mixedNumbers = [100, -200, 300, -400, 800, -800];

function extractNegatives(arr) {
  // Use filter to cleanly isolate values below 0
  return arr.filter(num => num < 0);
}

console.log(extractNegatives(mixedNumbers)); // Output: [-200, -400, -800]

Q11: Calculate a Factorial via Recursion

Question: Write a recursive function to compute the factorial of a given number (e.g., 10).

• The Perfect Answer:

function getFactorial(num) {
  // Base case termination check
  if (num === 0 || num === 1) {
    return 1;
  }
  // Recursive case: multiply number by structural decrement
  return num * getFactorial(num - 1);
}

console.log(getFactorial(10)); // Output: 3628800

Q12: Character Count Tracker

Question: Given a string string variable like "Ali Raza", write a function that returns an object mapping the total occurrences of each unique character present.

• The Perfect Answer:

const targetString = "Ali Raza";

function countCharacters(str) {
  const charMap = {};
  // Sanitize string to lowercase and remove spacing if needed
  const cleanStr = str.toLowerCase().replace(/\s+/g, '');

  for (let char of cleanStr) {
    charMap[char] = (charMap[char] || 0) + 1;
  }
  
  return charMap;
}

console.log(countCharacters(targetString)); 
// Output: { a: 3, l: 1, i: 1, r: 1, z: 1 }

---

─── STRUCTURAL HTML & STYLING ───

Q13: Image Maps & Semantic Entities

Question: What are HTML Entities and what is an HTML Image Map?

• The Perfect Answer:

• HTML Entities: Specialized string character sets (e.g.,   for non-breaking spaces or © for the copyright icon) used to display reserved characters or symbols that could otherwise interfere with HTML parsing engines.

• Image Map: A system achieved by nesting <map> and <area> tags inside an image component. It maps out coordinates over an image layout, turning specific coordinates into independent, clickable hyperlinks.

Q14: CSS Implementation Models & Specificity Priorities

Question: What are the three methods of styling, and which holds the highest specificity weight?

• The Perfect Answer: The three core integration patterns are Inline, Internal (Embedded), and External stylesheets. Inline styles (written directly inside the element's style attribute) command the highest priority weight and override rules declared externally.

Q15: Advanced Syntax Selectors: Pseudo-Classes vs Pseudo-Elements

Question: What is the distinction between a Pseudo-Class and a Pseudo-Element, and how are they syntactically denoted?

• The Perfect Answer:

• Pseudo-Class: Targets a specific state changes of an existing element (e.g., :hover, :active, :focus). They are denoted using a single colon (:).

• Pseudo-Element: Targets a specific sub-part of an element's structural content layout (e.g., ::before, ::after, ::first-line). They are denoted using a double colon (::).

─── JAVASCRIPT TYPES & ENGINE EQUATIONS ───

Q1: Loose Equality & Falsy Values Puzzle (Output-Based)

Question: What is the output of the following checks and why?

var x = 0;
var y = "0";
var z = false;

console.log(x == y);
console.log(x == z);

• The Perfect Answer: Both expressions evaluate to true.

• The Core Concept:

• x == y: Loose equality triggers implicit type coercion. When comparing a number to a string, JavaScript converts the string to a number under the hood. "0" becomes 0, matching x, so it returns true.

• x == z: JavaScript converts boolean values to numbers during loose comparison. false converts to 0 (and true to 1). Because 0 == 0, this also evaluates to true.

Q2: null vs undefined Equality Checks

Question: What do null == undefined and null === undefined return, and what are their data types?

• The Perfect Answer:

• null == undefined evaluates to true because JavaScript explicitly treats them as loosely equal to each other.

• null === undefined evaluates to false because they are entirely different data types.

• The Types: typeof undefined is "undefined", whereas typeof null returns "object". Note: The candidate in the video incorrectly claimed that the type of null is "undefined" or an object; remember, it is treated as an object due to a historical quirk in JavaScript.

Q3: Direct Primitive Evaluation: NaN, [] + [], and {} + {}

Question: What are the evaluation outputs of typeof appointments/NaN, [] + [], and {} + {}?

• The Perfect Answer:

• typeof NaN returns "number". Even though NaN stands for "Not-a-Number", it is technically categorized under the numeric type system in JavaScript.

• [] + [] returns an empty string (""). The candidate incorrectly guessed 2 or 0. During addition, JavaScript attempts to convert arrays into primitive values. An empty array strings out to "", resulting in "" + "" which yields an empty string.

• {} + {} behaves conditionally based on context. In standard console evaluations, JavaScript interprets the first {} as an empty code block and treats + {} as a unary plus operation on an empty object, returning NaN. However, if evaluated directly as an expression (e.g., console.log({} + {})), it treats both as objects, coerces them to strings, and returns "[object Object][object Object]".

Q4: JavaScript Native Errors

Question: Name the common native error types built into JavaScript.

• The Perfect Answer: The candidate mistakenly guessed "UI Error". The native error structures are:

• ReferenceError: Thrown when referencing a variable that does not exist in the current scope.

• TypeError: Thrown when an operation is performed on an incompatible data type (e.g., invoking a string as a function).

• SyntaxError: Thrown when the interpreter encounters code that breaks standard language syntax rules.

• RangeError: Thrown when a numeric value falls outside its allowable range limits.

Q5: Understanding the Temporal Dead Zone (TDZ)

Question: Explain what the Temporal Dead Zone (TDZ) is and point out exactly where it lies in a program.

• The Perfect Answer: The Temporal Dead Zone is the specific region of a program execution block from the start of the block scope until the moment the variable is officially declared.

• The Rules: Variables declared with let and const are hoisted, but they are not initialized with a default value. Attempting to access them within this zone throws a ReferenceError.

function checkTDZ() {
  // === TEMPORAL DEAD ZONE FOR variable 'a' START ===
  console.log(a); // Throws ReferenceError!
  // === TEMPORAL DEAD ZONE FOR variable 'a' END ===
  
  let a = 10; // Variable is initialized here.
  console.log(a); // Safe to access: prints 10.
}

Q6: Function Expressions vs Anonymous Functions & Hoisting

Question: What is an anonymous function, and are function expressions or arrow functions hoisted?

• The Perfect Answer: An anonymous function is a function declaration defined without an explicit name identifier. Function expressions and arrow functions are not structurally hoisted as functions. If they are assigned to var, the variable initialization hoists as undefined. If assigned to let or const, they remain trapped inside the Temporal Dead Zone until execution reaches their assignment lines.

Q7: Mathematical Operations on Strings

Question: What does evaluation of "Raza" - "Ali" return?

• The Perfect Answer: It evaluates to NaN (Not-a-Number). The subtraction operator (-) forces arithmetic type conversion. Because standard text strings cannot be mathematically converted into numbers, the operation fails and yields NaN.

Q8: Optional Chaining Purpose (?.)

Question: Why do we use optional chaining (?.) instead of standard dot notation?

• The Perfect Answer: Optional chaining permits developers to safely read nested properties deep within an object tree without explicitly checking every step of the reference path for validity. If a reference is null or undefined, the expression short-circuits gracefully and returns undefined rather than throwing a runtime crash error.

Q9: Native Pop-up Frameworks

Question: Name the three types of native window pop-up interfaces provided by JavaScript.

• The Perfect Answer:

• alert(): Displays a simple informational modal window with an "OK" confirmation option.

• confirm(): Displays a modal interface offering conditional "OK" and "Cancel" choices, returning a boolean value.

• prompt(): Opens an input dialog window enabling users to submit text entries directly back to the script.

---

─── LIVE RUN CODING EXERCISES ───

Q10: Printing Only Negative Numbers from an Array

Question: Write a function that takes an array containing positive and negative values and returns a clean array containing only the negative entries.

• The Perfect Answer:

const mixedNumbers = [100, -200, 300, -400, 800, -800];

function extractNegatives(arr) {
  // Use filter to cleanly isolate values below 0
  return arr.filter(num => num < 0);
}

console.log(extractNegatives(mixedNumbers)); // Output: [-200, -400, -800]

Q11: Calculate a Factorial via Recursion

Question: Write a recursive function to compute the factorial of a given number (e.g., 10).

• The Perfect Answer:

function getFactorial(num) {
  // Base case termination check
  if (num === 0 || num === 1) {
    return 1;
  }
  // Recursive case: multiply number by structural decrement
  return num * getFactorial(num - 1);
}

console.log(getFactorial(10)); // Output: 3628800

Q12: Character Count Tracker

Question: Given a string string variable like "Ali Raza", write a function that returns an object mapping the total occurrences of each unique character present.

• The Perfect Answer:

const targetString = "Ali Raza";

function countCharacters(str) {
  const charMap = {};
  // Sanitize string to lowercase and remove spacing if needed
  const cleanStr = str.toLowerCase().replace(/\s+/g, '');

  for (let char of cleanStr) {
    charMap[char] = (charMap[char] || 0) + 1;
  }
  
  return charMap;
}

console.log(countCharacters(targetString)); 
// Output: { a: 3, l: 1, i: 1, r: 1, z: 1 }

---

─── STRUCTURAL HTML & STYLING ───

Q13: Image Maps & Semantic Entities

Question: What are HTML Entities and what is an HTML Image Map?

• The Perfect Answer:

• HTML Entities: Specialized string character sets (e.g.,   for non-breaking spaces or © for the copyright icon) used to display reserved characters or symbols that could otherwise interfere with HTML parsing engines.

• Image Map: A system achieved by nesting <map> and <area> tags inside an image component. It maps out coordinates over an image layout, turning specific coordinates into independent, clickable hyperlinks.

Q14: CSS Implementation Models & Specificity Priorities

Question: What are the three methods of styling, and which holds the highest specificity weight?

• The Perfect Answer: The three core integration patterns are Inline, Internal (Embedded), and External stylesheets. Inline styles (written directly inside the element's style attribute) command the highest priority weight and override rules declared externally.

Q15: Advanced Syntax Selectors: Pseudo-Classes vs Pseudo-Elements

Question: What is the distinction between a Pseudo-Class and a Pseudo-Element, and how are they syntactically denoted?

• The Perfect Answer:

• Pseudo-Class: Targets a specific state changes of an existing element (e.g., :hover, :active, :focus). They are denoted using a single colon (:).

• Pseudo-Element: Targets a specific sub-part of an element's structural content layout (e.g., ::before, ::after, ::first-line). They are denoted using a double colon (::).