JavaScript Notes
HubYour First JavaScript Program — Hello World & Beyond Complete Guide 2026History of JavaScript — Complete Timeline from 1995 to 2026How JavaScript Runs — Complete Guide to Execution, Call Stack & Event LoopJavaScript Engine Explained — V8, JIT Compilation & How Code Gets FastJavaScript Use Cases — 15 Things You Can Build with JavaScript (2026)JavaScript vs Other Languages — Complete Comparison Guide 2026What is JavaScript? Complete BeginnerWhy Learn JavaScript in 2026? Career, Salary, Scope & Benefits GuideJavaScript Break Statement Tutorial – Complete Guide with ExamplesJavaScript Break and Continue Statements – Complete Guide with ExamplesJavaScript Continue Statement Tutorial – Skip Iterations with ExamplesJavaScript Do While Loop Tutorial – Execute at Least Once with ExamplesJavaScript Do-While Loop Tutorial – Complete Guide with ExamplesJavaScript For Loop Tutorial – Complete Guide with ExamplesJavaScript If Statement Tutorial – Conditional Logic with ExamplesJavaScript If Else Statement Tutorial – Complete Guide with ExamplesJavaScript If Statement Tutorial – Complete Guide with ExamplesJavaScript Nested If Statement Tutorial – Multi-Level Conditions with ExamplesNested Loops in JavaScriptJavaScript Control Flow Practice Programs – 20+ Exercises with SolutionsJavaScript Switch Statement Tutorial – Case Matching with ExamplesSwitch Statement in JavaScriptJavaScript While Loop Tutorial – Complete Guide with ExamplesJavaScript Arrow Functions Tutorial – Syntax, Use Cases & this BindingJavaScript Callback Functions Explained – Synchronous & AsynchronousJavaScript Closures Explained – Lexical Scope, Private State & MemoryJavaScript Function Declaration Tutorial – Hoisting, Syntax & ScopeJavaScript Function Expression Tutorial – Anonymous, Named & AssignedJavaScript Higher Order Functions Tutorial – map, filter, reduce & Custom HOFsJavaScript IIFE Explained – Immediately Invoked Function ExpressionJavaScript Functions Practice Programs – 20+ Exercises with SolutionsJavaScript Recursion Tutorial – Call Stack, Base Case & Recursive PatternsJavaScript Array Basics - Complete BeginnerJavaScript Array Methods - Complete Reference Guide with ExamplesJavaScript Array Programs - 20+ Practice Problems with SolutionsJavaScript Arrays Basics - Complete Guide with Examples & DiagramsJavaScript Array filter() Method - Complete Tutorial with ExamplesJavaScript filter() Method — Complete Guide with Examples 2026JavaScript Array find() Method - Complete Tutorial with ExamplesJavaScript find() & findIndex() — Complete Guide 2026JavaScript Array map() Method - Complete Tutorial with ExamplesJavaScript map() Method — Transform Arrays Complete Guide 2026JavaScript map() vs forEach() - Key Differences with ExamplesJavaScript Array push() and pop() - Complete Tutorial with ExamplesJavaScript Array reduce() Method - Complete Tutorial with ExamplesJavaScript reduce() Method — Complete Deep Dive with Examples 2026JavaScript Array shift() and unshift() - Complete Tutorial with ExamplesJavaScript Array sort() Method - Complete Tutorial with ExamplesJavaScript splice() vs slice() - Complete Tutorial with ExamplesJavaScript Object Destructuring - Complete Guide with ExamplesJavaScript Objects - Complete Guide to Object Basics with ExamplesJavaScript Object Methods - Built-in Methods & Custom Methods Complete GuideJavaScript Object Programs - Practice Problems with SolutionsJavaScript Object Properties - Keys, Values, Descriptors & Dynamic PropertiesJavaScript Rest Operator (...) - Parameters, Destructuring & Complete GuideJavaScript Spread Operator (...) - Complete Guide with ExamplesJavaScript this Keyword - Complete Guide with Binding Rules & ExamplesJavaScript String Basics - Complete Guide to Strings with ExamplesJavaScript String Methods - Complete Reference with Examples & OutputJavaScript String Programs - Practice Problems with SolutionsJavaScript String Replacing - replace(), replaceAll() & Regex Patterns GuideJavaScript String Searching Methods - includes, indexOf, startsWith, match GuideJavaScript Template Literals (ES6) - Complete Guide with Tagged TemplatesJavaScript DOM Changing Content - textContent, innerHTML, setAttribute Complete GuideJavaScript DOM Changing Styles - CSS Manipulation, classList & getComputedStyleJavaScript DOM Creating Elements - createElement, appendChild, DocumentFragment GuideJavaScript DOM Introduction - Complete Guide to Document Object ModelJavaScript DOM Traversal - Navigate Parent, Child & Sibling NodesJavaScript DOM Forms - Form Handling, Validation & FormData Complete GuideJavaScript localStorage - Complete Guide to Web Storage APIlocalStorage vs sessionStorage - JavaScript Web Storage Comparison GuideJavaScript DOM Removing Elements - remove(), removeChild() Complete GuideJavaScript DOM Selecting Elements - querySelector, getElementById Complete GuideJavaScript sessionStorage - Complete Guide to Session-Based Web StorageJavaScript Click Event - addEventListener, Event Handler Complete GuideEvent Bubbling in JavaScript – Complete Guide with Examples (2026)Event Capturing in JavaScript – Complete Guide to Capture Phase (2026)Event Delegation in JavaScript – Complete Guide with Examples (2026)JavaScript Event Object – Complete Guide with Examples (2026)JavaScript Form Events – Complete Guide with Examples (2026)JavaScript Keyboard Events – Complete Guide to keydown, keyup & Key Properties (2026)JavaScript Mouse Events – Complete Guide with Examples (2026)JavaScript Async Await - Complete Guide with Examples & Error HandlingJavaScript Call Stack - Complete Guide with Visual Diagrams & ExamplesJavaScript Callback Queue (Task Queue) - Complete Guide with DiagramsJavaScript Callbacks - Complete Guide with Callback Hell & PatternsJavaScript Event Loop - Complete Guide with Visual Diagrams & ExamplesJavaScript Fetch API - Complete Guide with Examples, Error Handling & Async/AwaitJSON in JavaScript - Complete Guide: Parse, Stringify, Fetch & Error HandlingJavaScript Promise.all, Promise.race, Promise.any, Promise.allSettled — Complete Guide 2026JavaScript Promises - Complete Guide with Chaining, Error Handling & Event LoopSynchronous vs Asynchronous JavaScript — Complete Explanation 2026JavaScript Web APIs - Complete Guide: setTimeout, fetch, DOM Events & MoreClosures in JavaScript — Complete Guide with Examples 2026Hoisting in JavaScript — Complete Guide with Examples 2026Prototype in JavaScript — Complete Guide with Examples 2026Scope in JavaScript — Complete Guide with Examples 2026Browser Object Model (BOM) in JavaScript — Complete GuideCanvas API in JavaScript — Complete Drawing & Animation GuideDrag and Drop API in JavaScript — Complete TutorialGeolocation API in JavaScript — Get User Location TutorialHistory API in JavaScript — SPA Routing & pushState GuideNotification API in JavaScript — Push Notifications TutorialService Workers in JavaScript — Offline, Caching & PWA GuideWeb Storage API in JavaScript — localStorage & sessionStorage GuideWeb Workers in JavaScript — Multithreading & Background Tasks GuideJavaScript Interview — Behavioral Questions and Soft Skills Guide 2026Common JavaScript Interview Mistakes — What to Avoid 2026JavaScript Interview Tips — Strategy and Preparation Guide 2026JavaScript Mock Interview — Practice Questions with Solutions 2026JavaScript System Design — Frontend Architecture Interview Guide 2026JavaScript apply() Method - Complete Guide with ExamplesJavaScript bind() Method - Complete Guide with ExamplesJavaScript call() Method - Complete Guide with ExamplesJavaScript call() vs apply() vs bind() - Complete Comparison GuideJavaScript Currying - Complete Guide with ExamplesJavaScript Debounce - Complete Guide with Timeline DiagramsJavaScript Execution Context - Complete Guide with Stack DiagramsJavaScript Garbage Collection - Memory Lifecycle & Mark-and-Sweep GuideJavaScript Generators - Complete Guide with yield and IterationJavaScript Hoisting - Complete Guide with var, let, const & FunctionsJavaScript Iterators - Complete Guide with Iterator ProtocolJavaScript Lexical Scope - Complete Guide with Scope Chain DiagramsJavaScript Memory Management - Complete Guide with Lifecycle DiagramsJavaScript Modules - Complete Guide with import export ExamplesJavaScript Scope - Complete Guide with var, let, const & Scope ChainJavaScript Symbols - Complete Guide with Well-Known SymbolsJavaScript Throttle - Complete Guide with Timeline DiagramsJavaScript Comments Complete Guide – Single Line, Multi-line & JSDoc with ExamplesJavaScript Data Types Complete Guide – Primitives, Objects & typeof with ExamplesJavaScript Input and Output Complete Guide – console.log, prompt, alert & DOM with ExamplesJavaScript Keywords Complete Guide – Reserved Words List with Examples for BeginnersJavaScript null vs undefined – Complete Guide with Differences, Examples & Interview Q&AJavaScript Operators Complete Guide – Arithmetic, Comparison, Logical & More with ExamplesJavaScript Strict Mode Complete Guide – JavaScript Type Conversion Complete Guide – Explicit & Implicit Coercion with ExamplesJavaScript var vs let vs const – Complete Guide with Scope, Hoisting & Best PracticesJavaScript Variables Complete Guide – Declaration, Naming Rules & Memory Model for BeginnersDeque (Double-Ended Queue) in JavaScript — Complete GuideLinked List in JavaScript — Nodes, Pointers & Operations GuideJavaScript Map — Key-Value Data Structure Complete GuideJavaScript Numbers — IEEE 754, Precision, and Number Methods GuidePriority Queue in JavaScript — Min Heap Implementation GuideQueue Data Structure in JavaScript — FIFO, Enqueue & Dequeue ExplainedJavaScript Set — Unique Values Data Structure GuideSorting Algorithms in JavaScript — Bubble, Merge, Quick Sort GuideStack Data Structure in JavaScript — LIFO, Push, Pop ExplainedJavaScript Typed Arrays — ArrayBuffer, Int32Array, Float64Array GuideJavaScript WeakMap — Weak References, Memory Management GuideJavaScript WeakSet — Complete Guide with Examples 2026Applications of JavaScript — Where JS is Used in 2026 Complete GuideJavaScript Backend Frameworks — Node.js, Express, NestJS Complete Guide 2026JavaScript Frontend Libraries — React, Vue, Angular, Svelte Complete Overview 2026JavaScript Full-Stack Frameworks — Next.js, Remix, Astro Complete Guide 2026JavaScript Career Paths & Jobs — Salary, Roles & Roadmap 2026JavaScript Libraries vs Frameworks — Difference & Examples Complete Guide 2026JavaScript Custom Errors – Extend Error Class, Custom Error Types & instanceofJavaScript Debugging – console Methods, DevTools, Breakpoints & Error Stack TracesJavaScript throw Statement – Throw Errors, Custom Messages & Error TypesJavaScript Try Catch Finally – Error Handling Complete GuideTop 30 JavaScript Closure Interview Questions & Answers 2026Top 30 JavaScript Coding Interview Questions 2026 (With Solutions)Top 25 JavaScript Event Loop Interview Questions & Answers 2026Top 50 JavaScript Interview Questions & Answers 2026Top 30 JavaScript Promise Interview Questions & Answers 202650 Tricky JavaScript Output Questions 2026 (With Answers)Build a JavaScript Calculator - Step by Step Project TutorialBuild a JavaScript Image Carousel - Step by Step Project TutorialBuild a JavaScript Counter Application - Step by Step Project TutorialBuild a JavaScript Digital Clock - Step by Step Project TutorialBuild a Dynamic Resume Builder in JavaScript - Step by Step TutorialBuild a JavaScript Email Validator - Step by Step Project TutorialBuild a JavaScript Employee Database Management App - Step by Step TutorialBuild a JavaScript Expense Tracker - Step by Step Project TutorialBuild a GitHub Profile Search App in JavaScript - Step by Step TutorialBuild a JavaScript Image Slider - Step by Step Project TutorialBuild a JavaScript Multi-Step Progress Bar - Step by Step TutorialBuild JavaScript Nested Chat Comments - Step by Step Project TutorialBuild a JavaScript Notes App - Step by Step Project TutorialBuild a JavaScript OTP Input Field - Step by Step Project TutorialBuild a JavaScript Palindrome Checker - Step by Step Project TutorialBuild a JavaScript Price Range Slider - Step by Step Project TutorialBuild a JavaScript Prime Number Checker - Step by Step Project TutorialBuild a JavaScript QR Code Generator - Step by Step Project TutorialBuild a JavaScript QR Code Scanner - Step by Step Project TutorialBuild a JavaScript Quiz App - Step by Step Project TutorialBuild a JavaScript Random Number Generator - Step by Step TutorialBuild a JavaScript Random Password Generator - Step by Step TutorialJavaScript Image Resize & Compress — Canvas API Project 2026JavaScript Responsive Admin Dashboard — DOM & CSS Project 2026JavaScript Show/Hide Password Toggle — Beginner DOM Project 2026JavaScript Sortable Filterable Table — DOM & Array Methods Project 2026JavaScript Stopwatch Project — setInterval & DOM Tutorial 2026JavaScript Student Grade Calculator — Arrays & Logic Project 2026JavaScript Task Scheduler Project — CRUD & localStorage Tutorial 2026JavaScript Tic-Tac-Toe Game — DOM Manipulation Project Tutorial 2026JavaScript Toast Notification Project — Custom Alerts Tutorial 2026Build a Todo App in JavaScript - Step by Step Project TutorialJavaScript Unicode Character Value Finder — charCodeAt & fromCharCode Project 2026JavaScript Weather App Project — Fetch API & DOM Complete Tutorial 2026JavaScript Cheat Sheet 2026 — Complete Quick ReferenceImportant JavaScript Concepts Every Developer Must Know in 2026JavaScript One Shot Notes 2026 — Complete JS in One PageJavaScript Quick Revision Notes — Interview Prep in 30 Minutes 2026Abstraction in JavaScript OOP – Hide Complexity, Expose SimplicityJavaScript Classes Tutorial – ES6 Class Syntax, Inheritance & MoreJavaScript Constructor Functions – new Keyword, Prototype & OOP PatternsEncapsulation in JavaScript – Private Fields, Getters, Setters & Data ProtectionJavaScript Inheritance – extends, super, and Prototype-Based InheritanceObject-Oriented Programming in JavaScript – OOP Concepts Complete GuideJavaScript OOP Projects – Build Real-World Apps with Classes & OOPPolymorphism in JavaScript – Method Overriding, Duck Typing & Many FormsJavaScript Prototype Chain – How Property Lookup Works in JavaScriptJavaScript Prototypes – Prototype-Based Inheritance, Object.create & prototype PropertyJavaScript Advanced Practice Problems — 15+ Interview-Level Challenges 2026JavaScript Assignments — 10 Project-Based Learning Tasks 2026JavaScript Beginner Practice Problems — 20+ Coding Exercises 2026JavaScript Coding Challenges — 25 Interview-Style Problems 2026JavaScript Intermediate Practice Problems — 20+ Coding Challenges 2026JavaScript MCQs — 50 Multiple Choice Questions with Answers 2026JavaScript Regex Character Classes – [abc], [^abc], Ranges & ShortcutsJavaScript Regex Email Validation – Pattern, Edge Cases & Best PracticesJavaScript Regex Flags – g, i, m, s, u, y Flags Explained with ExamplesJavaScript Regex Groups – Capturing, Non-Capturing & Named GroupsJavaScript Number Validation with Regex — Complete Patterns & Examples 2026JavaScript Password Validation with Regex — Strength Checker & Patterns 2026JavaScript Regex Quantifiers – *, +, ?, {n,m}, Greedy vs Lazy MatchingJavaScript Regex Basics – Regular Expressions Tutorial for BeginnersJavaScript Regex Projects — 10 Practical Mini-Projects with Code 2026JavaScript URL Validation with Regex — Complete Patterns & Examples 2026JavaScript Username Validation with Regex — Patterns & Form Examples 2026JavaScript TutorialJavaScript Lazy Loading — Images, Modules & Components Complete Guide 2026JavaScript Performance Optimization — Speed Up Your Code Complete Guide 2026JavaScript Unit Testing with Jest — Complete Guide for Beginners 2026
Complete guide to the switch statement in JavaScript. Learn switch-case syntax, fall-through behavior, break usage, default clause, and when to choose switch over if-else with practical examples.
The switch statement provides a clean way to execute different code blocks based on the value of a single expression. It's an alternative to long if-else if chains when you're comparing one variable against multiple possible values.
What is a Switch Statement?
A switch statement evaluates an expression and matches its value against multiple case labels. When a match is found, the corresponding code block executes. If no match is found, the optional default block runs.
Example
┌─────────────────────────────┐
│ Evaluate Expression │
└─────────────┬───────────────┘
│
┌─────────┼──────────────────────────┐
│ │ │ │
▼ ▼ ▼ ▼
┌────────┐┌────────┐┌────────┐ ┌──────────┐
│ Case 1 ││ Case 2 ││ Case 3 │... │ Default │
│ Match? ││ Match? ││ Match? │ │ (no match│
└───┬────┘└───┬────┘└───┬────┘ └────┬─────┘
│ │ │ │
▼ ▼ ▼ ▼
[Block 1] [Block 2] [Block 3] [Default Block]
│ │ │ │
└─────────┴─────────┴───────────────┘
│
▼
Continue Program
Syntax
Example
switch (expression) {
case value1:
// code block 1
break;
case value2:
// code block 2
break;
case value3:
// code block 3
break;
default:
// code block if no case matches
}
How Switch Works — Step by Step
- The
expressionis evaluated once. - The result is compared with each
casevalue using strict equality (===). - If a match is found, the code after that
caseexecutes. - The
breakstatement exits the switch block. - If no match is found, the
defaultblock executes (if present).
Basic Examples
Example 1: Day of the Week
Example
let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
case 4:
console.log("Thursday");
break;
case 5:
console.log("Friday");
break;
case 6:
console.log("Saturday");
break;
case 7:
console.log("Sunday");
break;
default:
console.log("Invalid day number");
}
Output
Wednesday
Example 2: Fruit Color
Example
let fruit = "banana";
switch (fruit) {
case "apple":
console.log("Apple is red or green.");
break;
case "banana":
console.log("Banana is yellow.");
break;
case "grape":
console.log("Grape is purple.");
break;
default:
console.log("Unknown fruit.");
}
Output
Banana is yellow.
The Break Statement
The break statement is critical in switch. Without it, execution "falls through" to the next case.
Without Break (Fall-Through Behavior)
Example
let num = 2;
switch (num) {
case 1:
console.log("One");
case 2:
console.log("Two");
case 3:
console.log("Three");
case 4:
console.log("Four");
default:
console.log("Default");
}
Output
Two Three Four Default
All cases after the match execute because there's no break!
With Break (Correct Behavior)
Example
let num = 2;
switch (num) {
case 1:
console.log("One");
break;
case 2:
console.log("Two");
break;
case 3:
console.log("Three");
break;
default:
console.log("Default");
}
Output
Two
Intentional Fall-Through (Grouped Cases)
Sometimes fall-through is intentional — to group multiple cases that share the same code:
Example
let day = "Saturday";
switch (day) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
console.log("It's a weekday. Time to work!");
break;
case "Saturday":
case "Sunday":
console.log("It's the weekend. Time to relax!");
break;
default:
console.log("Invalid day.");
}
Output
It's the weekend. Time to relax!
Grouped Cases with Different Actions
Example
let month = 4;
let season;
switch (month) {
case 12:
case 1:
case 2:
season = "Winter";
break;
case 3:
case 4:
case 5:
season = "Spring";
break;
case 6:
case 7:
case 8:
season = "Summer";
break;
case 9:
case 10:
case 11:
season = "Autumn";
break;
default:
season = "Invalid month";
}
console.log("Month " + month + " is in " + season);
Output
Month 4 is in Spring
The Default Clause
The default clause handles cases when no case matches. It can be placed anywhere in the switch, but convention places it last.
Example
let color = "purple";
switch (color) {
case "red":
console.log("Stop!");
break;
case "yellow":
console.log("Caution!");
break;
case "green":
console.log("Go!");
break;
default:
console.log("Unknown traffic signal color: " + color);
}
Output
Unknown traffic signal color: purple
Switch Uses Strict Equality (===)
Switch comparisons use strict equality — no type coercion occurs:
Example
let value = "1";
switch (value) {
case 1:
console.log("Number 1");
break;
case "1":
console.log("String '1'");
break;
default:
console.log("No match");
}
Output
String '1'
Switch with Expressions
The switch expression can be any valid JavaScript expression:
Example
let score = 85;
switch (true) {
case score >= 90:
console.log("Grade A");
break;
case score >= 80:
console.log("Grade B");
break;
case score >= 70:
console.log("Grade C");
break;
case score >= 60:
console.log("Grade D");
break;
default:
console.log("Grade F");
}
Output
Grade B
This pattern uses switch(true) to evaluate boolean expressions in cases, similar to if-else chains.Practical Programs
Program 1: Simple Calculator
Example
let a = 10, b = 5;
let operator = "*";
switch (operator) {
case "+":
console.log(`${a} + ${b} = ${a + b}`);
break;
case "-":
console.log(`${a} - ${b} = ${a - b}`);
break;
case "*":
console.log(`${a} * ${b} = ${a * b}`);
break;
case "/":
if (b !== 0) {
console.log(`${a} / ${b} = ${a / b}`);
} else {
console.log("Error: Division by zero");
}
break;
case "%":
console.log(`${a} % ${b} = ${a % b}`);
break;
default:
console.log("Invalid operator: " + operator);
}
Output
10 * 5 = 50
Program 2: Month Days Counter
Example
let month = 2;
let year = 2024;
let days;
switch (month) {
case 1: case 3: case 5: case 7: case 8: case 10: case 12:
days = 31;
break;
case 4: case 6: case 9: case 11:
days = 30;
break;
case 2:
days = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 29 : 28;
break;
default:
days = -1;
}
if (days > 0) {
console.log(`Month ${month} of ${year} has ${days} days.`);
} else {
console.log("Invalid month!");
}
Output
Month 2 of 2024 has 29 days.
Program 3: HTTP Status Code Handler
Example
let statusCode = 404;
switch (statusCode) {
case 200:
console.log("OK - Request successful");
break;
case 201:
console.log("Created - Resource created successfully");
break;
case 301:
console.log("Moved Permanently - Resource relocated");
break;
case 400:
console.log("Bad Request - Invalid syntax");
break;
case 401:
console.log("Unauthorized - Authentication required");
break;
case 403:
console.log("Forbidden - Access denied");
break;
case 404:
console.log("Not Found - Resource doesn't exist");
break;
case 500:
console.log("Internal Server Error");
break;
default:
console.log("Unknown status code: " + statusCode);
}
Output
Not Found - Resource doesn't exist
Program 4: Role-Based Access
Example
let userRole = "editor";
switch (userRole) {
case "admin":
console.log("Access: Full system control");
console.log("Can: Create, Read, Update, Delete users");
break;
case "editor":
console.log("Access: Content management");
console.log("Can: Create, Read, Update content");
break;
case "viewer":
console.log("Access: Read only");
console.log("Can: View content");
break;
case "guest":
console.log("Access: Limited");
console.log("Can: View public content only");
break;
default:
console.log("Access: Denied - Unknown role");
}
Output
Access: Content management Can: Create, Read, Update content
Program 5: Direction Commands
Example
let command = "north";
let x = 0, y = 0;
switch (command.toLowerCase()) {
case "north":
case "up":
y++;
console.log("Moving north...");
break;
case "south":
case "down":
y--;
console.log("Moving south...");
break;
case "east":
case "right":
x++;
console.log("Moving east...");
break;
case "west":
case "left":
x--;
console.log("Moving west...");
break;
default:
console.log("Unknown command!");
}
console.log(`Position: (${x}, ${y})`);
Output
Moving north... Position: (0, 1)
Switch vs If-Else: When to Use Which
| Feature | Switch | If-Else |
|---|---|---|
| Best for | Comparing ONE variable to many values | Complex conditions, ranges |
| Comparison type | Strict equality only (===) | Any comparison operator |
| Readability | Better for 4+ equality checks | Better for 2-3 conditions |
| Range checks | Not directly supported | Natural fit |
| Multiple variables | Not ideal | Works well |
| Performance | Potentially faster (jump table) | Sequential evaluation |
Example
// ✅ Use switch: one variable, many exact values
switch (status) {
case "pending": /* ... */ break;
case "active": /* ... */ break;
case "closed": /* ... */ break;
}
// ✅ Use if-else: ranges and complex conditions
if (score >= 90) { /* ... */ }
else if (score >= 80 && attendance > 75) { /* ... */ }
else { /* ... */ }
Common Mistakes
Mistake 1: Forgetting Break
Example
let fruit = "apple";
// ❌ Missing breaks causes fall-through
switch (fruit) {
case "apple":
console.log("Apple");
case "banana":
console.log("Banana");
case "cherry":
console.log("Cherry");
}
Output
Apple Banana Cherry
Mistake 2: Using Loose Equality Expectations
Example
let input = "2"; // string
// ❌ This won't match because switch uses ===
switch (input) {
case 2:
console.log("Matched number 2");
break;
default:
console.log("No match - types differ!");
}
Output
No match - types differ!
Mistake 3: Declaring Variables Without Block Scope
Example
let action = "create";
// ❌ Variable declarations in cases share scope
// switch (action) {
// case "create":
// let message = "Created"; // SyntaxError if 'let' in another case too
// break;
// case "delete":
// let message = "Deleted"; // Duplicate declaration!
// break;
// }
// ✅ Use blocks {} for each case
switch (action) {
case "create": {
let message = "Created";
console.log(message);
break;
}
case "delete": {
let message = "Deleted";
console.log(message);
break;
}
}
Output
Created
Best Practices
- Always include
breakunless fall-through is intentional (and documented). - Always include
defaultto handle unexpected values. - Use block scoping
{}in cases when declaring variables. - Comment intentional fall-throughs for clarity.
- Consider object lookup for simple value mapping instead of switch.
- Keep switch cases focused — extract complex logic into functions.
Example
// Object lookup alternative to switch
const dayNames = {
1: "Monday",
2: "Tuesday",
3: "Wednesday",
4: "Thursday",
5: "Friday",
6: "Saturday",
7: "Sunday"
};
let dayNum = 5;
console.log(dayNames[dayNum] || "Invalid day");
Output
Friday
Interview Questions
Q1: What comparison does switch use — == or ===?
Answer: Switch uses strict equality (===). There is no type coercion. case "1" will NOT match the number 1.
Q2: What happens if you omit the break statement?
Answer: Without break, execution "falls through" to the next case regardless of whether it matches. All subsequent cases execute until a break or the end of the switch block is reached.
Q3: Can the default case be placed anywhere in a switch?
Answer: Yes, default can be placed anywhere. However, if placed before other cases without a break, fall-through applies. Convention places it last.
Q4: Can you use expressions in case labels?
Answer: Case labels must be constant expressions evaluated at compile time. However, you can use switch(true) and put expressions in case labels: case (x > 5):.
Q5: How is switch different from if-else performance-wise?
Answer: For many cases with equality checks, some engines can optimize switch into a jump table (O(1) lookup) vs sequential if-else checks (O(n)). In practice, the difference is negligible for small numbers of cases.
Q6: Can you use switch with strings?
Answer: Yes, switch works with any type including strings, numbers, booleans. Comparison is always strict equality.
Q7: What is the scope of variables declared inside a switch?
Answer: Variables declared with var are function-scoped. Variables with let/const are block-scoped to the entire switch (not individual cases), which can cause issues. Use {} blocks in cases to create separate scopes.
Q8: When should you use switch(true)?
Answer: switch(true) is useful when you need range comparisons or complex conditions but prefer switch syntax. Each case contains a boolean expression, and the first truthy one executes.
Q9: Can switch handle multiple values for one action without fall-through?
Answer: Grouped cases (stacking case labels without code between them) is the idiomatic way: case "a": case "b": case "c": /* action */ break;
Q10: What are modern alternatives to switch?
Answer: (1) Object/Map lookup for value mapping, (2) Array methods like find() for condition matching, (3) Strategy pattern for complex behaviors, (4) Optional chaining with nullish coalescing for simple defaults.
Q11: Can you use return inside a switch within a function?
Answer: Yes, return exits the function and implicitly exits the switch, making break unnecessary when returning values.
Q12: How do you handle TypeScript's exhaustive checking with switch?
Answer: TypeScript can verify all enum/union cases are handled. Assign the variable to never type in default: if a case is missing, TypeScript shows a compile error. This ensures type safety.
Continue the lesson path
Study next in this module
01Control FlowJavaScript Switch Statement Tutorial – Case Matching with ExamplesLearn the JavaScript switch statement with syntax, fall-through behavior, grouped cases, default clause, real-world examples, common mistakes, and interview Q&A for beginners.02Control FlowJavaScript While Loop Tutorial – Complete Guide with ExamplesMaster the JavaScript while loop with syntax, execution flow, use cases, infinite loop prevention, practical programs, and interview questions for complete understanding.03Control FlowJavaScript Control Flow Practice Programs – 20+ Exercises with SolutionsPractice JavaScript control flow with 20+ programs covering if-else, loops, switch, break, and continue. Each exercise has a clear problem statement, solution, and output.04Control FlowNested Loops in JavaScriptMaster nested loops in JavaScript. Learn how to work with multi-dimensional data, create patterns, implement algorithms with nested iterations, and understand time complexity with practical examples.