JavaScript Arrays

Introduction to JavaScript Arrays

A JavaScript array is an ordered, integer-indexed collection of values. Unlike objects, which store keyed properties in no guaranteed order, an array keeps its items in a specific sequence and lets you reach any item by its position (its index). Indexes start at 0, so the first element is at index 0, the second at index 1, and so on.

Arrays are one of the most-used data structures in the language because they can hold a mix of any value type — numbers, strings, booleans, objects, even other arrays — and they grow or shrink automatically as you add and remove items. This page covers how to create arrays, change their contents, loop over them, transform and search them, and the practices that keep array-heavy code readable.

Creating and Initializing Arrays

The most common way to create an array is the array literal syntax — a comma-separated list inside square brackets:

let fruits = ["Apple", "Banana", "Cherry"];

You can also use the new Array() constructor, though it is rarely used and has a confusing edge case: when you pass a single number, it sets the array's length rather than adding that number as an element.

Because of that pitfall, prefer the literal syntax for everything except deliberately pre-sizing an array.

Accessing Elements and Length

Read or replace an element by its index, and read the total count with the length property. Assigning to an index beyond the current end extends the array.

Adding and Removing Elements

Four methods cover the two ends of an array. Note which value each one returns — this is a common source of bugs.

• push() — adds one or more elements to the end and returns the new length.

• pop() — removes the last element and returns that element.

• unshift() — adds one or more elements to the beginning and returns the new length.

• shift() — removes the first element and returns that element.

Inserting and Removing in the Middle with splice()

push/pop/shift/unshift only touch the ends. To add, remove, or replace items anywhere, use splice(start, deleteCount, ...itemsToInsert). It changes the array in place and returns an array of the removed items.

Copying a Section with slice()

slice(start, end) returns a shallow copy of part of the array without modifying the original. The end index is not included.

Iterating Over Elements

There are several ways to loop over an array. Use a for...of loop or forEach() when you just want each value; reach for index-based loops only when you actually need the index. (See the loops chapter for the full set of loop forms.)

• for...of — the cleanest way to read each value in order.

• forEach() — runs a callback once per element, receiving the value, index, and the array itself.

Transforming Arrays

These methods return a new array (or value) instead of mutating the original, which makes them ideal for predictable, chainable data processing.

• map() — builds a new array by transforming every element.

• filter() — builds a new array with only the elements that pass a test.

• reduce() — boils the whole array down to a single value by accumulating a result. It takes a callback (accumulator, current) and an initial value.

Because map and filter each return an array, you can chain them:

Searching Arrays

• includes() — returns true/false for whether a value exists. indexOf() returns the value's index, or -1 if it is not found.

• find() and findIndex() — return the first element (or its index) that satisfies a test callback.

Sorting Arrays

sort() orders the elements in place and returns the same array.

Converting Arrays to Strings

The join() method combines all elements into a single string, using the separator you pass (a comma by default).

Advanced Array Operations

Multi-Dimensional Arrays

Because an array can hold other arrays, you can model grids and matrices. Use two indexes — matrix[row][column] — to reach an inner value.

The Spread Operator

The spread operator (...) expands an iterable — an array or string — into individual elements wherever multiple values are expected. It is the modern way to combine and copy arrays. (For the related collecting form, see rest parameters and spread syntax.)

• Combining arrays:

• Copying an array (a shallow copy, so the original is untouched):

• Passing array items as function arguments:

Array Destructuring

Destructuring unpacks array values into separate variables in one statement. (The same idea applies to objects — see destructuring assignment.)

• Swapping variables without a temporary variable:

• Default values fill in when a position is missing:

Best Practices for Using Arrays

• Declare with const when the array reference won't change. const only prevents reassigning the variable — you can still push, pop, and edit elements, because the array's contents are not frozen.

• Prefer map, filter, and reduce over manual loops for transforming data — they describe intent and return new arrays instead of mutating shared state.
• Use the spread operator to copy before mutating when you want to avoid changing the original array.
• Always pass a compare function to sort() for numbers.

Conclusion

Arrays are the backbone of data handling in JavaScript: ordered, index-based, and dynamically sized. Once you know which methods mutate the array (push, pop, splice, sort) versus which return new values (map, filter, slice, reduce), you can manipulate collections confidently. Combine that with the spread operator and destructuring for concise, readable code. Next, explore the full array methods reference and how arrays compare with JavaScript objects.

Practice