Arrays

Creating, accessing, and mutating ordered collections of values.

Overview

An array is an ordered list of values. In JavaScript, arrays are zero-indexed (the first item is at index 0), can hold any mix of types, and grow or shrink dynamically. They are one of the most important data structures you will use constantly. Arrays in JavaScript are actually objects typeof [] returns "object". The Array constructor and array literal syntax ([]) both create arrays, but the literal syntax is always preferred. JavaScript arrays have a rich set of built-in methods for adding, removing, finding, and transforming elements. Some methods mutate the original array (push, pop, splice, sort) while others return a new array (slice, map, filter, concat). Knowing which is which prevents surprising bugs.

Key Points

•Arrays are zero-indexed: first element is array[0], last is array[array.length - 1]
•push/pop add/remove from the end; unshift/shift add/remove from the beginning
•splice(start, deleteCount, ...items) mutates in place inserts, removes, or replaces
•slice(start, end) returns a shallow copy of a portion does not mutate
•indexOf returns the index of a value (-1 if not found); includes returns a boolean
•Arrays are objects typeof [] === "object". Use Array.isArray() to check if something is an array

Examples

Creating arrays and accessing elements

const fruits = ["apple", "banana", "cherry"];

console.log(fruits[0]);       // "apple"
console.log(fruits[2]);       // "cherry"
console.log(fruits.length);   // 3
console.log(fruits[fruits.length - 1]); // "cherry" (last)
console.log(fruits.at(-1));   // "cherry" (ES2022 shorthand)

Mutating methods: push, pop, shift, unshift, splice

const arr = [1, 2, 3];

arr.push(4);       // [1, 2, 3, 4]
arr.pop();         // [1, 2, 3]
arr.unshift(0);    // [0, 1, 2, 3]
arr.shift();       // [1, 2, 3]

// splice(index, deleteCount, ...insert)
arr.splice(1, 1, 99); // remove 1 at index 1, insert 99
console.log(arr); // [1, 99, 3]

Non-mutating: slice, concat, indexOf, includes

const nums = [10, 20, 30, 40, 50];

console.log(nums.slice(1, 3));    // [20, 30]
console.log(nums.concat([60, 70])); // [10,20,30,40,50,60,70]
console.log(nums.indexOf(30));    // 2
console.log(nums.includes(99));   // false

console.log(Array.isArray(nums)); // true
console.log(Array.isArray("hi")); // false

Common Mistakes

Off-by-one: array[array.length] is undefined (last valid index is length - 1)
Mutating an array you didn't intend to change use slice() to copy first
Using sort() on numbers without a comparator ["10","9","2"].sort() gives ["10","2","9"] (lexicographic)

Note

Array.from() and the spread operator [...array] both create shallow copies of an array. Use them to avoid mutating the original when you need to transform data.

Arrays

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What index does the first element of a JavaScript array have?