Loading...
Loading...
Ordered collections. Store, access, and modify lists of data.
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.
JavaScript's core data structures are arrays (ordered lists accessed by index) and objects (key-value records accessed by name). Almost all real-world data, such as a list of products, a user profile, or an API response, is some combination of the two, so creating, reading, updating, and looping over them 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]);