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
Master JavaScript sort() method: compare function, sort numbers, strings, objects, toSorted(), stable sort, custom comparators, real-world examples, and interview Q&A.
sort() reorders the elements of an array in place. By default it converts elements to strings — which breaks numeric sorting. Mastering the compare function is the key to sorting anything correctly.
Example
Visual: Default sort (lexicographic) vs Numeric sort
Array: [10, 9, 2, 21, 1]
Default sort (wrong for numbers!):
Converts to strings: "10", "9", "2", "21", "1"
Sorts alphabetically: ["1", "10", "2", "21", "9"]
Result: [1, 10, 2, 21, 9] ← WRONG!
Numeric sort (correct):
compareFn: (a, b) => a - b
Result: [1, 2, 9, 10, 21] ← CORRECT!
Sorting Numbers
Example
const nums = [40, 100, 9, 2, 25, 10];
// ❌ Wrong — default (string) sort
const wrongSort = [...nums].sort();
console.log("Wrong:", wrongSort);
// ✅ Ascending
const asc = [...nums].sort((a, b) => a - b);
console.log("Ascending:", asc);
// ✅ Descending
const desc = [...nums].sort((a, b) => b - a);
console.log("Descending:", desc);
Output
Wrong: [10, 100, 2, 25, 40, 9] Ascending: [2, 9, 10, 25, 40, 100] Descending: [100, 40, 25, 10, 9, 2]
Sorting Strings
Example
const fruits = ["Banana", "apple", "Cherry", "Date", "elderberry"];
// Default sort (case-sensitive — uppercase first)
console.log([...fruits].sort());
// Case-insensitive sort
const caseInsensitive = [...fruits].sort((a, b) =>
a.toLowerCase().localeCompare(b.toLowerCase())
);
console.log(caseInsensitive);
// localeCompare (handles accents, locale-aware)
const words = ["résumé", "cafe", "naïve", "zebra"];
console.log(words.sort((a, b) => a.localeCompare(b)));
Output
["Banana", "Cherry", "Date", "apple", "elderberry"] ["apple", "Banana", "Cherry", "Date", "elderberry"] ["cafe", "naïve", "résumé", "zebra"]
Sorting Arrays of Objects
Example
const students = [
{ name: "Priya", grade: 88, age: 22 },
{ name: "Arjun", grade: 95, age: 20 },
{ name: "Meera", grade: 73, age: 23 },
{ name: "Rohit", grade: 88, age: 21 }
];
// Sort by grade ascending
const byGrade = [...students].sort((a, b) => a.grade - b.grade);
console.log(byGrade.map(s => `${s.name}: ${s.grade}`));
// Sort by grade descending, then name ascending (multi-key sort)
const multiSort = [...students].sort((a, b) => {
if (b.grade !== a.grade) return b.grade - a.grade; // grade desc
return a.name.localeCompare(b.name); // name asc
});
console.log(multiSort.map(s => `${s.name}: ${s.grade}`));
Output
["Meera: 73", "Priya: 88", "Rohit: 88", "Arjun: 95"] ["Arjun: 95", "Priya: 88", "Rohit: 88", "Meera: 73"]
Sorting by Date
Example
const events = [
{ name: "Launch", date: "2026-03-15" },
{ name: "Review", date: "2026-01-20" },
{ name: "Release", date: "2026-05-01" }
];
// Sort by date ascending
const sorted = [...events].sort((a, b) =>
new Date(a.date) - new Date(b.date)
);
sorted.forEach(e => console.log(`${e.date}: ${e.name}`));
Output
2026-01-20: Review 2026-03-15: Launch 2026-05-01: Release
sort() vs toSorted() (ES2023)
sort() mutates the original. toSorted() returns a new sorted array:
Example
const nums = [3, 1, 4, 1, 5, 9];
// sort() — mutates
const mutated = nums.sort((a, b) => a - b);
console.log("Original after sort:", nums); // [1, 1, 3, 4, 5, 9] — changed!
// toSorted() — non-mutating
const original = [3, 1, 4, 1, 5, 9];
const sorted = original.toSorted((a, b) => a - b);
console.log("Original after toSorted:", original); // [3, 1, 4, 1, 5, 9] — unchanged!
console.log("Sorted copy:", sorted); // [1, 1, 3, 4, 5, 9]
Output
Original after sort: [1, 1, 3, 4, 5, 9] Original after toSorted: [3, 1, 4, 1, 5, 9] Sorted copy: [1, 1, 3, 4, 5, 9]
Stable Sort (Guaranteed in ES2019+)
Since ES2019, JavaScript's sort() is guaranteed to be stable — elements with equal sort keys maintain their original relative order:
Example
const items = [
{ name: "A", priority: 2 },
{ name: "B", priority: 1 },
{ name: "C", priority: 2 },
{ name: "D", priority: 1 }
];
const sorted = items.sort((a, b) => a.priority - b.priority);
console.log(sorted.map(i => `${i.name}(${i.priority})`));
// B and D have same priority 1 → B still comes before D (stable!)
Output
["B(1)", "D(1)", "A(2)", "C(2)"]
Real World Use Cases
Example
// 1. Sort products by price (e-commerce)
const products = [
{ name: "Laptop", price: 80000 },
{ name: "Mouse", price: 500 },
{ name: "Monitor", price: 15000 }
];
const cheapFirst = products.toSorted((a, b) => a.price - b.price);
console.log(cheapFirst.map(p => `${p.name}: ₹${p.price}`));
// 2. Sort leaderboard
const leaderboard = [
{ player: "Alice", score: 4200, time: 120 },
{ player: "Bob", score: 4200, time: 115 },
{ player: "Carol", score: 5000, time: 200 }
];
const ranked = leaderboard.toSorted((a, b) =>
b.score !== a.score ? b.score - a.score : a.time - b.time
);
ranked.forEach((p, i) => console.log(`${i + 1}. ${p.player}: ${p.score} pts`));
// 3. Sort tags alphabetically
const tags = ["React", "javascript", "nodejs", "CSS", "HTML"];
const sorted = tags.toSorted((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));
console.log(sorted);
Output
["Mouse: ₹500", "Monitor: ₹15000", "Laptop: ₹80000"] 1. Carol: 5000 pts 2. Bob: 4200 pts 3. Alice: 4200 pts ["CSS", "HTML", "javascript", "nodejs", "React"]
Common Mistakes
| ❌ Wrong | ✅ Correct | Why |
|---|---|---|
arr.sort() on numbers | arr.sort((a, b) => a - b) | Default sort is lexicographic — 100 < 9 as strings |
arr.sort() and using original | [...arr].sort(...) or arr.toSorted(...) | sort() mutates the original |
(a, b) => a > b as compareFn | (a, b) => a > b ? 1 : a < b ? -1 : 0 or just a - b for numbers | compareFn must return number, not boolean |
| Forgetting case insensitivity | .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())) | Default string sort is case-sensitive |
Comparison: sort() vs toSorted()
| Feature | sort() | toSorted() (ES2023) |
|---|---|---|
| Mutates original | ✅ Yes | ❌ No |
| Returns | Same (mutated) array | New sorted array |
| Support | All browsers | Modern browsers / Node 20+ |
| Use when | You're OK mutating, or already have a copy | You want to preserve original |
Cheat Sheet
Example
Numbers ascending: arr.sort((a, b) => a - b)
Numbers descending: arr.sort((a, b) => b - a)
Strings A→Z: arr.sort((a, b) => a.localeCompare(b))
Strings case-insensitive: arr.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
Objects by number prop: arr.sort((a, b) => a.price - b.price)
Objects by string prop: arr.sort((a, b) => a.name.localeCompare(b.name))
Multi-key: arr.sort((a, b) => a.grade !== b.grade ? b.grade - a.grade : a.name.localeCompare(b.name))
No mutation: arr.toSorted(compareFn) // ES2023
Sort copy: [...arr].sort(compareFn)
Interview Questions
Q1. What is the default behavior of sort() without a compare function?
It converts all elements to strings and sorts them lexicographically (alphabetically). This causes numeric sorting to fail — [10, 9, 2] becomes [10, 2, 9] because "10" < "2" alphabetically.
Q2. How do you sort an array of numbers correctly?
Provide a compare function: arr.sort((a, b) => a - b) for ascending, (a, b) => b - a for descending.
Q3. Does sort() mutate the original array?
Yes. sort() is an in-place sort — it modifies the original array and returns it. Use [...arr].sort(fn) or arr.toSorted(fn) (ES2023) to sort without mutation.
Q4. How do you sort an array of objects by a property?
Example
users.sort((a, b) => a.age - b.age); // by number
users.sort((a, b) => a.name.localeCompare(b.name)); // by string
Q5. What is a stable sort and is JavaScript's sort stable?
A stable sort preserves the relative order of elements that compare as equal. Since ES2019, JavaScript's sort() is guaranteed to be stable in all modern engines.
Q6. What should a compare function return?
A negative number if a should come before b, zero if order doesn't matter, positive number if b should come before a. Never return a boolean.
Q7. What is toSorted() and how is it different from sort()?
toSorted() (ES2023) returns a new sorted array without modifying the original. It's the immutable/functional alternative to sort().
Key Takeaways
- Default
sort()is lexicographic — always provide a compare function for numbers sort()mutates the original array — use[...arr].sort()ortoSorted()to avoid this- Compare function returns: negative →
afirst, zero → tie, positive →bfirst (a, b) => a - b= ascending,(a, b) => b - a= descending- JavaScript's sort is stable since ES2019
- Use
localeCompare()for correct string/locale-aware sorting
Continue the lesson path
Study next in this module
01ArraysJavaScript Array shift() and unshift() - Complete Tutorial with ExamplesMaster JavaScript array shift() and unshift(): add/remove from start, queue pattern, return values, mutation, performance vs push/pop, real-world examples, and interview Q&A.02ArraysJavaScript splice() vs slice() - Complete Tutorial with ExamplesMaster JavaScript splice() and slice(): add/remove/replace elements, extract portions, mutation behavior, comparison table, real-world use cases, and interview Q&A.03ArraysJavaScript reduce() Method — Complete Deep Dive with Examples 2026Master the JavaScript Array reduce() method with step-by-step accumulator flow diagrams, 8+ real-world code examples with output, reduce vs forEach comparison, common mistakes, interview questions, and FAQ.04ArraysJavaScript Array reduce() Method - Complete Tutorial with ExamplesMaster JavaScript reduce() method: accumulator pattern, sum/count/group/flatten, reduceRight, common mistakes, no initialValue pitfall, real-world use cases, interview Q&A.