🟡 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

• JS is single-threaded. Event Loop allows non-blocking operations (e.g., API calls, timers).

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.

🔹 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

🔹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)

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