Loading...
Loading...
Ordered collections. Store, access, and modify lists of data.
Real programs store collections of data. Arrays hold ordered lists, objects hold named properties, and modern syntax like destructuring and spread make working with both concise. JSON connects JavaScript data to every API on the web.
JavaScript arrays store ordered lists of values — from shopping carts and todo items to rows in an API response. Learn zero-based indexing, push/pop/shift, length behavior, and why assigning an array copies a reference, not the data.
Arrays and objects are how JavaScript represents real-world data — a list of products, a user profile, a configuration file. Understanding how to create, read, update, and iterate over these structures is essential for any project.
This module covers array methods like map and filter, object property access, destructuring assignment, the spread operator, and JSON — the format every REST API speaks. Visual memory diagrams show how references and copies behave so you avoid common mutation bugs.
Arrays are the workhorse data structure in JavaScript. React renders lists from arrays, APIs return JSON arrays, and nearly every algorithm iterates over one. Misunderstanding reference sharing or off-by-one indexing causes some of the most common production bugs.
An ordered list of values, stored under a single name.
// Without arrays — tedious: const fruit1 = "apple"; const fruit2 = "banana"; const fruit3 = "cherry"; // With an array — one variable, many values: const fruits = ["apple", "banana", "cherry"];
const fruits = ["apple", "banana", "cherry"]
Arrays are zero-indexed: first element is at index 0
Multiple ways to create arrays in JavaScript.
// Array literal (most common): const colors = ["red", "green", "blue"]; // Empty array: const empty = []; // Mixed types (valid but not recommended): const mixed = [1, "hello", true, null]; // Array.from() — create from iterable: const chars = Array.from("hello"); // ["h","e","l","l","o"] // Array(n).fill() — create with default values: const zeros = Array(5).fill(0); // [0, 0, 0, 0, 0]
Use bracket notation with the index number.
const fruits = ["apple", "banana", "cherry"]; fruits[0]; // "apple" (first) fruits[1]; // "banana" (second) fruits[2]; // "cherry" (third) fruits[3]; // undefined (doesn't exist) // From the end: fruits[fruits.length - 1]; // "cherry" (last) fruits.at(-1); // "cherry" (modern)
Click an index to access:
arr[0] → 🍎
Add, remove, and change elements.
const arr = ["a", "b", "c"]; // Add to end: arr.push("d"); // ["a", "b", "c", "d"] // Remove from end: arr.pop(); // ["a", "b", "c"] // Add to beginning: arr.unshift("z"); // ["z", "a", "b", "c"] // Remove from beginning: arr.shift(); // ["a", "b", "c"] // Change by index: arr[1] = "x"; // ["a", "x", "c"]
The .length property tells you how many elements.
const arr = ["a", "b", "c", "d"]; arr.length; // 4 // Last element: arr[arr.length - 1]; // "d" // Truncate by setting length: arr.length = 2; console.log(arr); // ["a", "b"] // Check if empty: if (arr.length === 0) { console.log("Array is empty"); }
💡 .length is always one more than the highest index. Setting it smaller removes elements permanently.
Arrays are stored by reference, not copied.
const original = [1, 2, 3]; const copy = original; copy.push(4); console.log(original); // [1, 2, 3, 4] ← modified!
Assigning an array to a new variable doesn't copy it — both variables point to the SAME array.
Test your understanding.
What does [1, 2, 3].length return?
What does this output?
const arr = ['a', 'b', 'c'];
console.log(arr[1]);What does this output?
const a = [1, 2];
const b = a;
b.push(3);
console.log(a.length);What method adds an element to the end of an array?
Common questions about arrays.
Test your understanding — 3 questions
What will this log?
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[1]);