📘 JavaScript Complete Interview Notes (In-Depth)

JavaScript Overview
JavaScript Engine & Runtime
Execution Context
Hoisting
Scope & Scope Chain
Closures
Data Types
Type Coercion
Equality Operators
this Keyword
call, apply, bind
Arrow Functions
Functions
Higher Order Functions
Array Methods
Object Internals
Prototype & Prototypal Inheritance
Classes
Shallow vs Deep Copy
Asynchronous JavaScript
Event Loop
Debouncing & Throttling
Currying
Memoization
Error Handling
Strict Mode
Memory Management
Modules
Browser APIs
Security Concepts
Performance Optimization
Common Tricky Interview Questions
Polyfills
Event Delegation
DOM Manipulation
JavaScript Design Patterns
ES6+ Features

1. JavaScript Overview

What is JavaScript?

JavaScript is a high-level, interpreted, dynamically typed, single-threaded programming language used primarily for web development.

Key Characteristics

Interpreted (JIT-compiled by engines like V8)
Dynamically typed
Prototype-based OOP
Single-threaded with async capabilities
Event-driven
Garbage collected

Where JavaScript Runs

Browsers (V8, SpiderMonkey)
Server (Node.js)
Mobile (React Native)
Desktop (Electron)

2. JavaScript Engine & Runtime

JavaScript Engine

Parses code
Compiles to bytecode
Executes code

Example Engines

V8 (Chrome, Node.js)
SpiderMonkey (Firefox)

JavaScript Runtime Components

Call Stack
Heap
Web APIs
Callback Queue
Microtask Queue
Event Loop

Flowchart: JavaScript Runtime

The engine only has a call stack and a heap, everything asynchronous is handled by the runtime around it.

3. Execution Context

What is Execution Context?

An environment where JavaScript code is evaluated and executed.

Types

Global Execution Context
Function Execution Context
Eval Execution Context (rare)

Phases

Creation Phase
Execution Phase

Creation Phase

Memory allocation
Hoisting happens here

Execution Phase

Code execution line by line

Flowchart: Execution Context Lifecycle

Every function call gets its own context with the same two phases as the global one.

4. Hoisting

What is Hoisting?

JavaScript moves declarations (not initializations) to the top of their scope.

Variable Hoisting

console.log(a); // undefined
var a = 10;

let & const

console.log(b); // ReferenceError
let b = 20;

Reason: Temporal Dead Zone (TDZ)

Function Hoisting

hello(); // works
function hello() {
  console.log("Hello");
}

Flowchart: How Declarations Are Hoisted

All three are hoisted during the creation phase, but they start in different states.

5. Scope & Scope Chain

Scope Types

Global Scope
Function Scope
Block Scope

{
  let x = 10;
}
console.log(x); // Error

Scope Chain

JavaScript searches variables from inner scope to outer scope.

Flowchart: Scope Chain Lookup

Lookup only ever goes outward, never inward.

6. Closures

Definition

A function that remembers its lexical scope even after execution.

Example

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const counter = outer();
counter(); // 1
counter(); // 2

Use Cases

Data hiding
Currying
Memoization
Event handlers

Flowchart: How a Closure Keeps Its Scope

outer() is finished, but inner still points at its scope, so count is never freed.

7. Data Types

Primitive Types

String
Number
Boolean
Undefined
Null
Symbol
BigInt

Non-Primitive

Object
Array
Function

typeof null; // "object" (JS bug)

8. Type Coercion

Implicit Coercion

"5" + 1; // "51"
"5" - 1; // 4

Truthy & Falsy Values

Falsy:

false
0
""
null
undefined
NaN

9. Equality Operators

== vs ===

5 == "5"; // true
5 === "5"; // false

Always prefer ===

10. this Keyword

Value Depends On Invocation

Context	this
Global	window / undefined (strict)
Object Method	Object
Function	window / undefined
Arrow Function	Lexical this

Example

const obj = {
  name: "JS",
  greet() {
    console.log(this.name);
  },
};
obj.greet(); // JS

Flowchart: What Is this?

this is decided by how the function is called, except for arrow functions, which never get their own.

11. call, apply, bind

call

fn.call(obj, arg1, arg2);

apply

fn.apply(obj, [arg1, arg2]);

bind

const boundFn = fn.bind(obj);

12. Arrow Functions

Differences

No this
No arguments
Cannot be used as constructors

const add = (a, b) => a + b;

13. Functions

Function Declaration

function test() {}

Function Expression

const test = function () {};

IIFE

(function () {
  console.log("IIFE");
})();

14. Higher Order Functions

Functions that:

Take functions as arguments OR
Return functions

const multiply = (x) => (y) => x * y;

15. Array Methods (VERY IMPORTANT)

map

arr.map((x) => x * 2);

filter

arr.filter((x) => x > 10);

reduce

arr.reduce((acc, val) => acc + val, 0);

forEach

No return

16. Object Internals

Property Access

obj.key;
obj["key"];

Object Destructuring

const { name } = obj;

17. Prototype & Prototypal Inheritance

Prototype Chain

obj.__proto__ === Constructor.prototype;

Example

function Person(name) {
  this.name = name;
}
Person.prototype.sayHi = function () {
  console.log(this.name);
};

Flowchart: Prototype Chain Lookup

A property lookup walks up the __proto__ links until it finds a match or reaches null.

18. Classes (Syntactic Sugar)

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(this.name);
  }
}

19. Shallow vs Deep Copy

Shallow Copy

const copy = { ...obj };

Deep Copy

const deep = JSON.parse(JSON.stringify(obj));

20. Asynchronous JavaScript

Callbacks

setTimeout(() => {}, 1000);

Promises

fetch(url)
  .then((res) => res.json())
  .catch((err) => {});

async / await

try {
  const data = await fetch(url);
} catch (e) {}

Flowchart: Promise States

A promise settles once, and its handlers always run as microtasks.

21. Event Loop (CRITICAL)

Priority

Call Stack
Microtask Queue (Promises)
Macrotask Queue (setTimeout)

console.log("A");
setTimeout(() => console.log("B"));
Promise.resolve().then(() => console.log("C"));
console.log("D");

// Output: A D C B

Flowchart: The Event Loop Cycle

Microtasks are drained completely, including any new ones they queue, before a single macrotask runs. That is why A D C B comes out in that order.

22. Debouncing & Throttling

Debounce

function debounce(fn, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

Throttle

function throttle(fn, limit) {
  let flag = true;
  return function () {
    if (!flag) return;
    flag = false;
    fn();
    setTimeout(() => (flag = true), limit);
  };
}

Flowchart: Debounce

The function runs only after events stop for delay milliseconds.

Flowchart: Throttle

The function runs at most once per limit milliseconds, and extra events in between are dropped.

23. Currying

const sum = (a) => (b) => (c) => a + b + c;

24. Memoization

function memoize(fn) {
  const cache = {};
  return function (x) {
    if (cache[x]) return cache[x];
    return (cache[x] = fn(x));
  };
}

25. Error Handling

try {
  throw new Error("Error");
} catch (e) {
  console.log(e.message);
} finally {
}

26. Strict Mode

"use strict";

Prevents:

Implicit globals
Silent errors

27. Memory Management

Garbage Collection

Mark & Sweep algorithm
Avoid memory leaks:
- Remove event listeners
- Clear timers
- Avoid global variables

Flowchart: Mark and Sweep

A leak is an object that is still reachable from a root, so the collector correctly keeps it.

28. Modules

ES Modules

export const x = 10;
import { x } from "./file.js";

29. Browser APIs (Interview Favorite)

localStorage
sessionStorage
cookies
fetch
IntersectionObserver
ResizeObserver

30. Security Concepts

XSS
CSRF
CORS
Same-Origin Policy

31. Performance Optimization

Debounce events
Memoization
Avoid reflows
Web Workers
Code splitting

32. Common Tricky Interview Questions

Question

let a = {};
let b = a;
b.name = "JS";
console.log(a.name); // JS

Question

[] + []; // ""
{
}
+{}; // "[object Object][object Object]"

33. Polyfills (IMPORTANT)

Example: map polyfill

Array.prototype.myMap = function (cb) {
  let res = [];
  for (let i = 0; i < this.length; i++) {
    res.push(cb(this[i], i, this));
  }
  return res;
};

34. Event Delegation

parent.addEventListener("click", (e) => {
  if (e.target.matches("button")) {
  }
});

Flowchart: Event Delegation

One listener on the parent handles every child, including ones added later.

35. DOM Manipulation

document.querySelector("#id");
element.addEventListener("click", fn);

36. JavaScript Design Patterns

Module Pattern
Singleton
Observer
Factory

37. ES6+ Features (Must Know)

let / const
Arrow functions
Spread / Rest
Destructuring
Optional chaining
Nullish coalescing

JavaScript Interview Notes

On this page