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
Learn JavaScript array basics from scratch: creation, indexing, length, iteration, mutation vs copy, and real-world patterns. 30+ examples with outputs.
Arrays are the backbone of JavaScript programming. Whether you're building a to-do list, a product catalog, or a data dashboard — arrays are everywhere. This guide walks you through every fundamental concept with clear diagrams, practical examples, and interview-ready answers.
Creating Arrays
1. Array Literal (✅ Recommended)
Example
// Empty array
const empty = [];
console.log(empty); // []
console.log(empty.length); // 0
// Numbers
const scores = [95, 87, 76, 100];
console.log(scores); // [95, 87, 76, 100]
// Strings
const cities = ["Delhi", "Mumbai", "Bangalore"];
console.log(cities); // ["Delhi", "Mumbai", "Bangalore"]
// Mixed types
const mixed = [42, "hello", true, null, { name: "JS" }];
console.log(mixed);
Output
[]
0
[95, 87, 76, 100]
["Delhi", "Mumbai", "Bangalore"]
[42, "hello", true, null, {name: "JS"}]2. Array Constructor
Example
// ⚠️ Gotcha: single number = empty slots
const trap = new Array(3);
console.log(trap); // [empty × 3]
console.log(trap.length); // 3
console.log(trap[0]); // undefined
// Multiple arguments = array elements
const arr = new Array(1, 2, 3);
console.log(arr); // [1, 2, 3]
Output
[empty × 3] 3 undefined [1, 2, 3]
3. Array.from()
Converts iterables (strings, Sets, NodeLists) into arrays:
Example
// From a string
const chars = Array.from("Hello");
console.log(chars); // ["H","e","l","l","o"]
// From Set (removes duplicates)
const unique = Array.from(new Set([1, 2, 2, 3]));
console.log(unique); // [1, 2, 3]
// With transform function
const squares = Array.from({ length: 5 }, (_, i) => (i + 1) ** 2);
console.log(squares); // [1, 4, 9, 16, 25]
Output
["H","e","l","l","o"] [1, 2, 3] [1, 4, 9, 16, 25]
4. Array.of()
Fixes the single-number gotcha of new Array():
Example
console.log(Array.of(5)); // [5] — element, not empty slots
console.log(Array.of(1, 2, 3)); // [1, 2, 3]
Output
[5] [1, 2, 3]
5. Spread Operator
Example
const original = [1, 2, 3];
const copy = [...original]; // shallow copy
console.log(copy); // [1, 2, 3]
// Merge arrays
const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
console.log(merged); // [1, 2, 3, 4]
Output
[1, 2, 3] [1, 2, 3, 4]
Accessing Array Elements
Standard Index Access
Example
const colors = ["Red", "Green", "Blue", "Yellow"];
// [0] [1] [2] [3]
console.log(colors[0]); // "Red"
console.log(colors[2]); // "Blue"
console.log(colors[colors.length - 1]); // "Yellow" — last element
console.log(colors[10]); // undefined — out of bounds
Output
"Red" "Blue" "Yellow" undefined
Array.at() — ES2022 (Supports Negative Index)
Example
const arr = [10, 20, 30, 40, 50];
console.log(arr.at(0)); // 10 — first
console.log(arr.at(-1)); // 50 — last
console.log(arr.at(-2)); // 40 — second from end
Output
10 50 40
Example
Visual: Positive vs Negative Indexing
Array: [10, 20, 30, 40, 50]
Positive: [0] [1] [2] [3] [4]
Negative: [-5] [-4] [-3] [-2] [-1]
Array Length Property
Example
const items = ["a", "b", "c", "d"];
console.log(items.length); // 4
// ✂️ Truncate by setting length
items.length = 2;
console.log(items); // ["a", "b"]
// 📏 Extend (creates holes)
items.length = 5;
console.log(items); // ["a", "b", empty × 3]
console.log(items[4]); // undefined
Output
4 ["a", "b"] ["a", "b", empty × 3] undefined
Key Rule:lengthis always one more than the highest index.arr.length - 1gives you the last index.
Modifying Array Elements
Example
const nums = [1, 2, 3, 4, 5];
// Update by index
nums[2] = 99;
console.log(nums); // [1, 2, 99, 4, 5]
// Add a new element beyond current length
nums[7] = 100;
console.log(nums); // [1, 2, 99, 4, 5, empty × 2, 100]
console.log(nums.length); // 8
// Delete (leaves a hole — prefer splice() instead)
delete nums[2];
console.log(nums); // [1, 2, empty, 4, 5, empty × 2, 100]
Output
[1, 2, 99, 4, 5] [1, 2, 99, 4, 5, empty × 2, 100] 8 [1, 2, empty, 4, 5, empty × 2, 100]
Iterating Arrays
for Loop (Classic)
Example
const fruits = ["Apple", "Banana", "Cherry"];
for (let i = 0; i < fruits.length; i++) {
console.log(i, fruits[i]);
}
Output
0 Apple 1 Banana 2 Cherry
for...of Loop (Modern — Recommended)
Example
const fruits = ["Apple", "Banana", "Cherry"];
for (const fruit of fruits) {
console.log(fruit);
}
Output
Apple Banana Cherry
forEach()
Example
const prices = [100, 200, 300];
prices.forEach((price, index) => {
console.log(`Item ${index + 1}: ₹${price}`);
});
Output
Item 1: ₹100 Item 2: ₹200 Item 3: ₹300
entries() — Index + Value
Example
const langs = ["HTML", "CSS", "JS"];
for (const [index, lang] of langs.entries()) {
console.log(`${index}: ${lang}`);
}
Output
0: HTML 1: CSS 2: JS
Multidimensional Arrays
Example
// 2D array (matrix)
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[1][2]); // 6 (row 1, col 2)
console.log(matrix[0][0]); // 1 (row 0, col 0)
// Iterate 2D array
for (const row of matrix) {
console.log(row.join(" | "));
}
Output
6 1 1 | 2 | 3 4 | 5 | 6 7 | 8 | 9
Example
Visual: 2D Array
col0 col1 col2
row 0 [ 1, 2, 3 ]
row 1 [ 4, 5, 6 ] ← matrix[1][2] = 6
row 2 [ 7, 8, 9 ]
Arrays are Reference Types
This is one of the most important — and most misunderstood — concepts in JavaScript:
Example
// Reference type behavior
const a = [1, 2, 3];
const b = a; // b points to the SAME array!
b.push(4);
console.log(a); // [1, 2, 3, 4] ← a changed too!
console.log(b); // [1, 2, 3, 4]
// To make an independent copy, use spread or slice
const c = [...a];
c.push(99);
console.log(a); // [1, 2, 3, 4] ← unchanged
console.log(c); // [1, 2, 3, 4, 99]
Output
[1, 2, 3, 4] [1, 2, 3, 4] [1, 2, 3, 4] [1, 2, 3, 4, 99]
Example
Memory Diagram: Reference vs Copy
const a ──────────────► [ 1, 2, 3 ]
const b = a ────────────────↑ (same memory address)
const c = [...a] ───────► [ 1, 2, 3 ] (new memory address)
Real World Use Cases
Example
// 1. Shopping cart
const cart = ["Laptop", "Mouse", "Keyboard"];
cart.push("Monitor");
console.log(`Cart has ${cart.length} items`);
// Cart has 4 items
// 2. Student scores
const scores = [78, 92, 65, 88, 95];
const passing = scores.filter(s => s >= 70);
const average = scores.reduce((sum, s) => sum + s, 0) / scores.length;
console.log("Passing:", passing);
console.log("Average:", average);
// Passing: [78, 92, 88, 95]
// Average: 83.6
// 3. Menu items
const menu = [
{ name: "Burger", price: 120 },
{ name: "Pizza", price: 250 },
{ name: "Fries", price: 60 }
];
const names = menu.map(item => item.name);
console.log(names);
// ["Burger", "Pizza", "Fries"]
Output
Cart has 4 items Passing: [78, 92, 88, 95] Average: 83.6 ["Burger", "Pizza", "Fries"]
Common Mistakes
| ❌ Wrong | ✅ Correct | Why |
|---|---|---|
const arr = new Array(5) when you want [5] | Array.of(5) or [5] | Constructor treats single number as length |
const b = a for a copy | const b = [...a] | Assignment copies the reference, not the data |
arr[arr.length] for last | arr[arr.length - 1] or arr.at(-1) | Length is 1 more than last index |
delete arr[i] to remove | arr.splice(i, 1) | delete leaves a hole |
| Accessing index on empty array | Always check arr.length > 0 first | Returns undefined, not an error |
Cheat Sheet
Example
Create: const arr = [1, 2, 3]
Access: arr[0] → first element
Last element: arr[arr.length - 1] or arr.at(-1)
Length: arr.length
Add to end: arr.push(value)
Remove end: arr.pop()
Add to front: arr.unshift(value)
Remove front: arr.shift()
Copy: [...arr] or arr.slice()
Check type: Array.isArray(arr) → true
Iterate: for (const item of arr) {}
Interview Questions
Q1. What is an array in JavaScript and how does it differ from an object?
An array is an ordered, indexed collection of values. Objects use string keys; arrays use numeric indices starting from 0. Internally, arrays are objects — typeof [] === "object" — but Array.isArray([]) returns true.
Q2. What is the difference between const a = arr and const a = [...arr]?
const a = arr copies the reference — both variables point to the same array. Changing one changes the other. const a = [...arr] creates a shallow copy — a new array with the same values. Changes to a don't affect arr.
Q3. Why does new Array(5) create empty slots instead of [5]?
When new Array() receives a single numeric argument, it treats it as the desired length, not as an element. Use Array.of(5) or [5] to create an array containing the number 5.
Q4. What is zero-based indexing?
Arrays start counting from 0. The first element is arr[0], the second is arr[1], and the last is arr[arr.length - 1]. Accessing arr[arr.length] returns undefined.
Q5. What is a sparse array?
A sparse array has "holes" — indices with no assigned value. Example: const a = [1, , , 4]. a[1] is undefined. Sparse arrays are created by delete arr[i] or arr.length = bigNumber. Most array methods skip holes.
Q6. How do you check if a variable is an array?
Use Array.isArray(variable). Don't use typeof because typeof [] returns "object".
Q7. What is the difference between arr.at(-1) and arr[arr.length - 1]?
Both return the last element. arr.at(-1) is cleaner and supports negative indexing natively (ES2022). arr[arr.length - 1] works in all environments.
Q8. Can arrays hold different data types in JavaScript?
Yes. JavaScript arrays are heterogeneous — they can hold numbers, strings, booleans, objects, functions, null, undefined, and other arrays all in the same array.
Key Takeaways
- Arrays are ordered, zero-indexed collections of any data type
- Use array literals
[]— notnew Array()— to avoid the length gotcha - Arrays are reference types — assignment copies the pointer, not the data
- Use
Array.isArray()to check if something is an array - Use
arr.at(-1)for the last element (ES2022+) deleteleaves holes — usesplice()to properly remove elementslengthis always one more than the highest index
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for JavaScript Array Basics - Complete Beginner.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.
Search Terms
javascript-complete-guide, javascript master course, javascript, complete, guide, arrays, array, basics
Related JavaScript Master Course Topics
Continue learning this concept
ArraysJavaScript Array Methods - Complete Reference Guide with ExamplesComprehensive guide to all JavaScript array methods: push, pop, splice, slice, sort, flat, map, filter, reduce, ES2023 methods with examples, outputs, and performance tips.ArraysJavaScript Array Programs - 20+ Practice Problems with SolutionsMaster JavaScript arrays with 20+ practical programs: sum, max, reverse, duplicates, sorting, searching, matrix operations, and real-world coding patterns.ArraysJavaScript Arrays Basics - Complete Guide with Examples & DiagramsMaster JavaScript arrays from scratch. Learn array creation, indexing, iteration, multidimensional arrays, reference types, and memory behavior with 30+ examples.ArraysJavaScript Array filter() Method - Complete Tutorial with ExamplesMaster JavaScript array filter() method: syntax, callback, filtering objects, chaining, remove falsy values, duplicates, real-world use cases, and interview Q&A.ArraysJavaScript filter() Method — Complete Guide with Examples 2026Master the JavaScript Array filter() method with detailed syntax, 6+ code examples with output, comparison with find() and forEach(), common mistakes, interview questions, and FAQ. Beginner-friendly guide in English with detailed explanations.ArraysJavaScript Array find() Method - Complete Tutorial with ExamplesLearn JavaScript find(), findIndex(), findLast() with syntax, examples, object search, comparison tables, common mistakes, real-world use cases, and interview Q&A.