Arrays are JavaScript's fundamental ordered data structure. They let you group related values into a single, ordered list that can be accessed by index, resized dynamically, and iterated with modern loop patterns.
1Creating Arrays with Square Brackets
An array is an ordered collection created with square brackets []. Each value is separated by a comma. JavaScript arrays are dynamic — no fixed size declaration — and can hold any mix of types: strings, numbers, booleans, objects, and even other arrays.
2Zero-Based Indexing and Bracket Notation
Every element in an array has a numeric position called an index, starting at 0. Access any element with bracket notation: arr[0] for the first, arr[arr.length - 1] for the last. Accessing an index that doesn't exist returns undefined — no error is thrown.
3The .length Property — Dynamic Size Tracking
Every array has a .length property that automatically reflects the current element count. Push an item and length increases. Pop one and it decreases. The last element is always at arr[arr.length - 1], or use the modern arr.at(-1) (ES2022).
4push, pop, shift, unshift — Stack & Queue Patterns
Four methods control the ends of an array. push() adds to the end, pop() removes from the end — this is the stack pattern (last in, first out). unshift() adds to the start, shift() removes from the start — this is the queue pattern (first in, first out). All four mutate the original array.
5splice() — Insert, Remove, or Replace at Any Position
splice() is the most versatile mutation method. It takes three types of arguments: the start index, the number of items to delete, and items to insert. With these you can remove from the middle, insert at any position, or swap elements.
6slice vs splice — Immutable Copy vs Mutable Edit
slice() copies a portion of the array into a new array — the original is never touched (immutable). splice() modifies the original array directly (mutable). Mnemonic: the p in splice means it permanently changes the array.
7Iterating Arrays: for...of and forEach
for...of iterates directly over values — clean, modern, and supports break. .forEach() takes a callback receiving (value, index, array) — ideal when you need the index. forEach always returns undefined and cannot use break.
