JavaScript

JavaScript Interview Notes

Complete JavaScript interview notes and explanations.

📘 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

Advanced JavaScript

Patterns, pitfalls, and deeper JavaScript concepts.

Home

React

React fundamentals and core concepts.

On this page

📘 JavaScript Complete Interview Notes (In-Depth)Table of Contents1. JavaScript OverviewWhat is JavaScript?Key CharacteristicsWhere JavaScript Runs2. JavaScript Engine & RuntimeJavaScript EngineJavaScript Runtime Components3. Execution ContextWhat is Execution Context?TypesPhasesCreation PhaseExecution Phase4. HoistingWhat is Hoisting?Variable Hoistinglet & constFunction Hoisting5. Scope & Scope ChainScope TypesScope Chain6. ClosuresDefinitionExampleUse Cases7. Data TypesPrimitive TypesNon-Primitive8. Type CoercionImplicit CoercionTruthy & Falsy Values9. Equality Operators== vs ===10. this KeywordValue Depends On InvocationExample11. call, apply, bindcallapplybind12. Arrow FunctionsDifferences13. FunctionsFunction DeclarationFunction ExpressionIIFE14. Higher Order Functions15. Array Methods (VERY IMPORTANT)mapfilterreduceforEach16. Object InternalsProperty AccessObject Destructuring17. Prototype & Prototypal InheritancePrototype ChainExample18. Classes (Syntactic Sugar)19. Shallow vs Deep CopyShallow CopyDeep Copy20. Asynchronous JavaScriptCallbacksPromisesasync / await21. Event Loop (CRITICAL)Priority22. Debouncing & ThrottlingDebounceThrottle23. Currying24. Memoization25. Error Handling26. Strict Mode27. Memory ManagementGarbage Collection28. ModulesES Modules29. Browser APIs (Interview Favorite)30. Security Concepts31. Performance Optimization32. Common Tricky Interview QuestionsQuestionQuestion33. Polyfills (IMPORTANT)Example: map polyfill34. Event Delegation35. DOM Manipulation36. JavaScript Design Patterns37. ES6+ Features (Must Know)