Skip to main content

📘 JavaScript Complete Interview Notes (In-Depth)

Table of Contents​

  1. JavaScript Overview
  2. JavaScript Engine & Runtime
  3. Execution Context
  4. Hoisting
  5. Scope & Scope Chain
  6. Closures
  7. Data Types
  8. Type Coercion
  9. Equality Operators
  10. this Keyword
  11. call, apply, bind
  12. Arrow Functions
  13. Functions
  14. Higher Order Functions
  15. Array Methods
  16. Object Internals
  17. Prototype & Prototypal Inheritance
  18. Classes
  19. Shallow vs Deep Copy
  20. Asynchronous JavaScript
  21. Event Loop
  22. Debouncing & Throttling
  23. Currying
  24. Memoization
  25. Error Handling
  26. Strict Mode
  27. Memory Management
  28. Modules
  29. Browser APIs
  30. Security Concepts
  31. Performance Optimization
  32. Common Tricky Interview Questions
  33. Polyfills
  34. Event Delegation
  35. DOM Manipulation
  36. JavaScript Design Patterns
  37. 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​

  1. Call Stack
  2. Heap
  3. Web APIs
  4. Callback Queue
  5. Microtask Queue
  6. Event Loop

3. Execution Context​

What is Execution Context?​

An environment where JavaScript code is evaluated and executed.

Types​

  1. Global Execution Context
  2. Function Execution Context
  3. Eval Execution Context (rare)

Phases​

  1. Creation Phase
  2. Execution Phase

Creation Phase​

  • Memory allocation
  • Hoisting happens here

Execution Phase​

  • Code execution line by line

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");
}

5. Scope & Scope Chain​

Scope Types​

  1. Global Scope
  2. Function Scope
  3. Block Scope
{
  let x = 10;
}
console.log(x); // Error

Scope Chain​

  • JavaScript searches variables from inner scope to outer scope.

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

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​

Contextthis
Globalwindow / undefined (strict)
Object MethodObject
Functionwindow / undefined
Arrow FunctionLexical this

Example​

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

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);
};

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) {}

21. Event Loop (CRITICAL)​

Priority​

  1. Call Stack
  2. Microtask Queue (Promises)
  3. Macrotask Queue (setTimeout)
console.log("A");
setTimeout(() => console.log("B"));
Promise.resolve().then(() => console.log("C"));
console.log("D");

// Output: A D C B

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);
  };
}

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

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")) {
  }
});

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