🟡 JavaScript Interview Preparation Notes – Key Concepts & Q/A

JavaScript is a high-level, single-threaded, interpreted language with JIT compilation, used to build dynamic and interactive web applications. Here’s a concise guide for frontend developers to ace interviews.

⚡ Why JavaScript is Fast Today

• JIT Compilation: Converts JS into optimized machine code at runtime.
• Optimized Garbage Collection: Efficient memory management.

🔹 How JavaScript Runs

• Runs inside a JavaScript engine (e.g., V8).
• Code → Parsed → Converted to bytecode → Optimized via JIT.
• Executes via Call Stack and handles async tasks using the Event Loop.

🔹 Core Concepts

Scopes
Function Scope → var
Block Scope → let & const

Hoisting

• Variables & function declarations are moved to the top.
• Functions fully initialized, variables initialized with undefined (var) or TDZ (let/const).

Closures

• Inner functions have access to outer variables even after outer function finishes execution.

Event Loop
The Event Loop in JavaScript is the mechanism that allows JavaScript to handle asynchronous operations (like timers, API calls, and promises) even though it is single-threaded.

It coordinates between:
✅ The Call Stack
✅ Web APIs (browser / Node APIs)
✅ The Task Queue (Callback Queue)
✅ The Microtask Queue (Promises)

Javascript call Stack

• Tracks which function is currently running.
• Keeps track of where to return after a function finishes.
• Manages execution context (variables, scope, etc.)

JavaScript is single-threaded, meaning it executes one piece of code at a time — and the call stack is how it manages that.

Garbage Collection & Memory Leak

• GC automatically frees memory for unreachable objects.
• Memory leaks occur when objects remain referenced.

this, call, apply, bind

function greet(age) { console.log(this.name + age); }
greet.call(obj, 25);
greet.apply(obj, [25]);
const boundFn = greet.bind(obj);

TDZ (Temporal Dead Zone)

• Accessing let/const before declaration → ReferenceError.

Generator functions
A generator is a function that can pause and resume execution using yield.
Declared using function*.
Ex. function* gen(){ yield 1; yield 2 }

🔹 Tools & Modern JS
Babel → Runs modern JS in older browsers
Webpack → Bundles multiple files into optimized, browser-ready files
Strict Mode → Enforces stricter parsing & error handling
Memory Heap → The Memory Heap is where: Arrays, Functions, Large data, Reference types are stored.

🔹Functional Programming
Currying

function add(a) { 
  return function(b) { return a + b; }; 
}
add(2)(3); // 5

Higher-Order Functions

• Functions that take or return other functions.

Arrow vs Normal Functions

• Arrow: No this, no arguments, cleaner syntax.

Resolve cross browser compatibility issue

• We can use tools like Babel thorough testing, and progressive enhancement to make sure expected behavior across the browser.

🔹 Async JavaScript

Promises

const myPromise = new Promise((resolve, reject) => {
  let success = true;
  success ? resolve("Success") : reject("Fail");
});

Promise Chaining

fetchUser()
  .then(user => fetchOrders(user.id))
  .then(orders => fetchPayments(orders))
  .then(payments => console.log(payments))
  .catch(err => console.error(err));

async/await vs Promise Chaining

• async/await → cleaner syntax, easier error handling (try/catch)

Key Difference vs Promise.all
| Feature | Promise.all | Promise.allSettled |
| ------- | --------------------------- | --------------------------- |
| Returns | Resolves if all succeed | Always resolves |
| Rejects | If any promise rejects | Never rejects |
| Result | Array of values | Array of status objects |

Microtasks vs Callback Queue

• Microtasks → .then, .catch, .finally (higher priority)
• Callbacks → setTimeout, setInterval

Race Condition

• Multiple async operations compete unpredictably.

Debounce vs Throttle

• Debounce → executes after delay
• Throttle → limits execution rate

🔹 Arrays & Iteration

Map vs forEach

• map() → returns a new array, chainable, used in React JSX
• forEach() → returns undefined, for side-effects only

slice vs splice

const arr = [1,2,3,4,5];
arr.slice(1,4); // [2,3,4], original unchanged
arr.splice(1,2); // removes 2 elements, modifies original

🔹 Object Copying

Shallow Copy

const person = { name: "Jenish", address: { city: "Mumbai" } };
const copy = { ...person };

copy.name = "Darshan";
copy.address.city = "Delhi"; // original affected

Deep Copy

const deepCopy = JSON.parse(JSON.stringify(person));
deepCopy.address.city = "Delhi"; // original untouched

🔹 Execution Context

• Creation Phase → variables/functions are hoisted
• Execution Phase → code runs step by step