An introduction to JavaScript Arrays

An array stores an ordered collection of values.

JavaScript arrays are resizable objects. They can contain values of different types:

const values = [1, 'Flavio', true, { color: 'blue' }]

Use Array.isArray() when you need to check a value:

Array.isArray(values) //true
typeof values //'object'

The MDN Array reference and the ECMAScript Array specification document every method and edge case.

Create an array

The simplest way to create an array is an array literal:

const empty = []
const numbers = [1, 2, 3]

Array.of() creates an array from its arguments:

const numbers = Array.of(1, 2, 3)

Be careful with the Array constructor. One numeric argument creates an array with that length, not an array containing the number:

const slots = Array(3)
const number = Array.of(3)

slots.length //3
number //[3]

The three positions in slots are empty slots. They do not contain undefined values.

Use fill() when you want actual values in every position:

const zeros = Array(3).fill(0)

zeros //[0, 0, 0]

Array.from() creates an array from an iterable or array-like value:

const letters = Array.from('hello')

letters //['h', 'e', 'l', 'l', 'o']

Access array items

Array indexes start at zero:

const fruits = ['banana', 'pear', 'apple']

fruits[0] //'banana'
fruits[1] //'pear'
fruits[2] //'apple'
fruits[3] //undefined

Use at() when a negative index is useful:

fruits.at(-1) //'apple'

You can assign through an index too:

fruits[1] = 'mango'

fruits //['banana', 'mango', 'apple']

Nested arrays

JavaScript does not have a separate multidimensional array type. You create one by nesting arrays:

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
]

matrix[0][0] //1
matrix[2][0] //7

Understand length

The length property is always greater than every array index. In a dense array, it is one greater than the last index.

It is not always the number of populated elements in a sparse array.

const numbers = [1, 2, 3]

numbers.length //3

Reducing length deletes values beyond the new length:

const numbers = [1, 2, 3]

numbers.length = 2
numbers //[1, 2]

Increasing it creates empty slots:

const numbers = [1, 2]

numbers.length = 4
numbers //[1, 2, <2 empty items>]

Empty slots behave differently from explicit undefined values in some array methods. Avoid creating sparse arrays unless you specifically need them.

See the MDN length reference for the exact rules.

Add items

push() adds one or more values to the end and returns the new length:

const numbers = [1, 2]

numbers.push(3, 4) //4
numbers //[1, 2, 3, 4]

unshift() does the same at the beginning:

const numbers = [1, 2]

numbers.unshift(-1, 0) //4
numbers //[-1, 0, 1, 2]

Both methods change the original array.

Remove items

pop() removes and returns the last value:

const numbers = [1, 2, 3]
const last = numbers.pop()

last //3
numbers //[1, 2]

shift() removes and returns the first value:

const numbers = [1, 2, 3]
const first = numbers.shift()

first //1
numbers //[2, 3]

Both return undefined when the array is empty.

Combine arrays

concat() returns a new shallow array:

const first = [1, 2]
const second = [3, 4]
const numbers = first.concat(second)

numbers //[1, 2, 3, 4]

Spread syntax is another common option:

const first = [1, 2]
const second = [3, 4]
const numbers = [...first, ...second]

Neither example changes first or second. Nested objects are still shared because these copies are shallow.

Find an item

find() returns the first value that passes a test:

const posts = [
  { id: 1, title: 'Learning JavaScript' },
  { id: 2, title: 'Learning CSS' }
]

const post = posts.find(post => post.id === 2)

post.title //'Learning CSS'

It returns undefined when no value matches.

findIndex() returns the first matching index, or -1:

const numbers = [10, 20, 30]

numbers.findIndex(number => number > 15) //1

findLast() and findLastIndex() search from the end.

Use includes() when you only need to check whether a value is present:

const colors = ['blue', 'green', 'red']

colors.includes('green') //true
colors.includes('blue', 1) //false

The second argument is the index where the search starts, and that index is included.

Mutating and copying methods

Some methods change the original array. Examples include push(), pop(), shift(), unshift(), sort(), reverse(), and splice().

Others return a new array. Examples include concat(), slice(), map(), and filter().

Modern JavaScript also provides copying versions of common mutating operations:

• toSorted()
• toReversed()
• toSpliced()
• with()

Use them when you need the result without changing the original array.

Related posts about js: