Mastery Vault
Accessing Level 99 Full Stack Intelligence
JavaScript Core + Advanced
1. What is Event-Driven Architecture?
A design pattern where system flow is determined by events like user actions, sensor outputs, or messages from other programs. It uses an event loop to handle these triggers asynchronously without blocking the main execution thread.
System Detail & Playground
console.log("System Initialized...");
setTimeout(() => {
console.log("Event Triggered: User Clicked Login");
}, 1000);
console.log("Waiting for events...");
2. What is Event Bubbling and Capturing?
Bubbling triggers events from the target element up to the root, while capturing flows from the root down to the target. These phases allow developers to manage nested interactions and implement event delegation patterns.
System Detail & Playground
console.log("Phase 1: Capturing (Root -> Target)");
console.log("Phase 2: Target (Executing Logic)");
console.log("Phase 3: Bubbling (Target -> Root)");
console.log("Delegation active: Parent handled child event.");
3. How does the JavaScript event loop work?
The event loop is a constant process that monitors the call stack and the task queue. If the stack is empty, it takes the first task from the queue and pushes it onto the stack, enabling non-blocking I/O operations.
System Detail & Playground
console.log("Step 1: Script Start");
setTimeout(() => console.log("Step 3: Macrotask (Loop Cycle 2)"), 0);
Promise.resolve().then(() => console.log("Step 2: Microtask (Loop Cycle 1)"));
console.log("Step 1: Script End");
5. What is hoisting?
Hoisting is a behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase. This allows functions to be used before they are formally defined in the code.
System Detail & Playground
console.log("Hoisted Var:", myVar); // undefined
var myVar = "Loaded";
sayHello(); // Works due to function hoisting
function sayHello() {
console.log("System: Hello from the bottom!");
}
8. What are closures?
A closure is a function that remembers its outer scope even after that scope has finished executing. It provides a way to create private variables and maintain state across multiple function calls.
System Detail & Playground
function createVault() {
let balance = 0;
return (amount) => {
balance += amount;
return "Vault Balance: $" + balance;
};
}
const myVault = createVault();
console.log(myVault(100));
console.log(myVault(50));
4. What are microtasks and macrotasks?
Microtasks (like Promises) have higher priority and execute immediately after the current script, while macrotasks (like setTimeout) wait for the next event loop check. This distinction ensures that critical asynchronous logic runs before the browser performs rendering or handles user input.
System Detail & Playground
console.log("1. Start");
setTimeout(() => console.log("4. Macrotask (setTimeout)"), 0);
Promise.resolve().then(() => console.log("3. Microtask (Promise)"));
console.log("2. End");
6. What is the Global Execution Context?
The base environment where any JavaScript code starts its execution, creating the global object (window in browsers) and the 'this' keyword. It sets up the memory heap and call stack before any specific functions are called.
System Detail & Playground
console.log("Global context active.");
console.log("Window object defined:", typeof window !== 'undefined');
var globalId = "SYS_99";
console.log("Available in context:", globalId);
7. What is lexical scope?
Lexical scope means that the accessibility of variables is determined by their physical location within the source code during the nesting phase. An inner function always has access to the variables defined in its outer physical parent scope.
System Detail & Playground
const outer = "Outer Power";
function checkScope() {
const inner = "Inner Energy";
console.log("Accessing:", outer); // Lexical access
console.log("Accessing:", inner);
}
checkScope();
9. What are closure pitfalls inside loops?
When using 'var' inside loops, closures capture the same variable reference, often leading to all iterations sharing the final loop value. Using 'let' fixes this by creating a unique block-level binding for every single iteration of the loop.
System Detail & Playground
console.log("Testing Loop with 'var' (Buggy):");
for (var i = 1; i <= 3; i++) {
setTimeout(() => console.log("Var Output:", i), 100);
}
// Fix with let after delay...
10. var, let, and const differences?
'var' is function-scoped and hoisted, 'let' is block-scoped and non-reassignable if using 'const'. Modern development prioritizes 'const' for stability and 'let' only when value reassignment is strictly necessary.
System Detail & Playground
const system = "VAULT";
let status = "Online";
status = "Deploying"; // OK
try {
system = "HACKED"; // Error
} catch(e) {
console.log("System locked:", e.message);
}
console.log("Current Status:", status);
11. call, apply, and bind?
'call' and 'apply' execute a function immediately with a specific 'this' context, while 'bind' creates a new function copy for later use. 'apply' specifically takes arguments as an array, whereas 'call' takes them individually.
System Detail & Playground
const player = { name: "Vimal" };
function greet(rank) {
console.log(`Shadow, ${this.name}! Rank: ${rank}`);
}
greet.call(player, "S-Tier"); // Immediate execution
12. What is debouncing and throttling?
Debouncing ensures a function only runs after a specific period of inactivity, while throttling limits a function to running once Every 'X' milliseconds. Both techniques are used to optimize performance by controlling how often expensive functions execute.
System Detail & Playground
console.log("Simulating Scroll...");
let count = 0;
const throttle = () => {
count++;
console.log(`Execution ${count}: Logic processed!`);
};
throttle(); // Runs
throttle(); // In real use, this would be blocked
console.log("Limit reached: Throttling active.");
13. What are polyfills and transpilers?
A polyfill is code that provides modern functionality on older browsers that do not natively support it, while a transpiler (like Babel) converts modern syntax into a version compatible with those older environments. Together, they allow developers to use the latest language features everywhere.
System Detail & Playground
console.log("Checking for modern feature...");
if (!Array.prototype.customMsg) {
console.log("Polyfill injected: customMsg is now available.");
Array.prototype.customMsg = () => "System Mapped";
}
console.log([1].customMsg());
14. What is Babel and why is it used?
Babel is a toolchain that mainly converts ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. It allows you to use 'Arrow Functions', 'Classes', and 'Modules' without worrying about browser support.
System Detail & Playground
const modernFn = () => "ES6 Arrow Logic";
console.log("Feature Test:", modernFn());
console.log("Babel would transpile this to 'function() { return ... }'");
15. map, filter, reduce, and forEach?
'map' creates a new array by transforming elements, 'filter' creates a subset based on a condition, and 'reduce' boils an array down to a single value. 'forEach' simply iterates through the array without returning a new one.
System Detail & Playground
const data = [10, 20, 30];
const total = data.reduce((acc, val) => acc + val, 0);
const doubled = data.map(n => n * 2);
console.log("Sum result:", total);
console.log("Doubled array:", doubled);
16. How do you remove duplicate objects?
The most efficient way is using a 'Map' or 'Set' to track unique IDs while filtering the array in O(n) time. Alternatively, one can use 'filter' combined with 'findIndex', though it is less efficient for very large datasets.
System Detail & Playground
const users = [{id: 1}, {id: 2}, {id: 1}];
const unique = [...new Map(users.map(u => [u.id, u])).values()];
console.log("Cleaned system users:", unique);
React Mastery Hub
1. What is React Fiber?
Reconciliation engine for incremental rendering.
System Detail
2. useMemo vs useCallback?
useMemo: Cached Value. useCallback: Cached Function.
System Detail
3. Virtual DOM & Reconciliation?
Lightweight DOM copy + Diffing algorithm.
System Detail
17. First non-repeating character?
Finding the first unique character in a string involves iterating through it once to build a frequency map and then a second time to identify the first character with a count of one. This is a classic O(n) algorithmic problem used to test string manipulation skills.
System Detail & Playground
const s = "shadow_assassin";
const counts = {};
for (let c of s) counts[c] = (counts[c] || 0) + 1;
const unique = s.split('').find(c => counts[c] === 1);
console.log("Analyzing:", s);
console.log("First Unique Char:", unique);
18. How does garbage collection work?
JavaScript uses an automatic memory management process called Garbage Collection, primarily employing the 'Mark-and-Sweep' algorithm. It identifies and reclaims memory that is no longer reachable from the root object, preventing memory leaks.
System Detail & Playground
let data = { info: "Massive Cache" };
console.log("Allocating memory for data...");
data = null; // Reference broken
console.log("System target: Data is now eligible for GC.");
19. Mutable vs Immutable data?
Mutable data can be changed after creation (like objects and arrays), whereas immutable data (like strings and numbers) cannot be modified and requires a new copy. Immutability is a core principle in modern libraries like React to ensure predictable state updates.
System Detail & Playground
const original = { level: 99 };
const updated = { ...original, level: 100 }; // Immutable way
console.log("Original Level:", original.level);
console.log("New Level:", updated.level);
console.log("Same object?", original === updated);
Node Engine node
1. Node.js Event Loop work?
Phases: Timers -> I/O -> Poll -> Check -> Close.
System Detail
Database Intelligence
1. Types of Joins?
Inner, Left, Right, Full Outer.
System Detail
2. SQL vs MongoDB?
Relational/Fixed Schema vs Document/Flexible Schema.
System Detail
Security & Ops
1. What is XSS?
Cross-Site Scripting (Injecting malicious JS).
System Detail
Practical Task Lab
1. First Non-Repeating Character
function firstUnique(s) {
const counts = {};
for (const c of s) counts[c] = (counts[c] || 0) + 1;
for (const c of s) if (counts[c] === 1) return c;
return null;
}2. Duplicates and Unique Values
function findStats(arr) {
const map = {}, dups = [], unique = [];
arr.forEach(n => map[n] = (map[n] || 0) + 1);
Object.keys(map).forEach(n => map[n] > 1 ? dups.push(n) : unique.push(n));
return { dups, unique };
}6. Remove Duplicate Objects (Optimized)
function removeDups(arr) {
const seen = new Set();
return arr.filter(obj => {
const k = obj.id;
return seen.has(k) ? false : seen.add(k);
});
}