An introduction to JavaScript Arrays

New Courses Coming Soon

Join the waiting lists

A gentle introduction to Arrays, a key building block of JavaScript

An array is a collection of elements.

Arrays in JavaScript are not a type on their own.

Arrays are objects.

We can initialize an empty array in these 2 different ways:

``````const a = []
const a = Array()
``````

The first is using the array literal syntax. The second uses the Array built-in function.

You can pre-fill the array using this syntax:

``````const a = [1, 2, 3]
const a = Array.of(1, 2, 3)
``````

An array can hold any value, even value of different types:

``````const a = [1, 'Flavio', ['a', 'b']]
``````

Since we can add an array into an array, we can create multi-dimensional arrays, which have very useful applications (e.g. a matrix):

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

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

You can access any element of the array by referencing its index, which starts from zero:

``````a[0] //1
a[1] //2
a[2] //3
``````

You can initialize a new array with a set of values using this syntax, which first initializes an array of 12 elements, and fills each element with the `0` number:

``````Array(12).fill(0)
``````

You can get the number of elements in the array by checking its `length` property:

``````const a = [1, 2, 3]
a.length //3
``````

Note that you can set the length of the array. If you assign a bigger number than the arrays current capacity, nothing happens. If you assign a smaller number, the array is cut at that position:

``````const a = [1, 2, 3]
a //[ 1, 2, 3 ]
a.length = 2
a //[ 1, 2 ]
``````

How to add an item to an array

We can add an element at the end of an array using the `push()` method:

``````a.push(4)
``````

We can add an element at the beginning of an array using the `unshift()` method:

``````a.unshift(0)
a.unshift(-2, -1)
``````

How to remove an item from an array

We can remove an item from the end of an array using the `pop()` method:

``````a.pop()
``````

We can remove an item from the beginning of an array using the `shift()` method:

``````a.shift()
``````

How to join two or more arrays

You can join multiple arrays by using `concat()`:

``````const a = [1, 2]
const b = [3, 4]
const c = a.concat(b) //[1,2,3,4]
a //[1,2]
b //[3,4]
``````

You can also use the spread operator (`...`) in this way:

``````const a = [1, 2]
const b = [3, 4]
const c = [...a, ...b]
c //[1,2,3,4]
``````

How to find a specific item in the array

You can use the `find()` method of an array:

``````a.find((element, index, array) => {
//return true or false
})
``````

Returns the first item that returns true. Returns undefined if the element is not found.

A commonly used syntax is:

``````a.find(x => x.id === my_id)
``````

The above line will return the first element in the array that has `id === my_id`.

`findIndex()` works similarly to `find()`, but returns the index of the first item that returns true, and if not found, it returns `-1`:

``````a.findIndex((element, index, array) => {
//return true or false
})
``````

Another method is `includes()`:

``````a.includes(value)
``````

Returns true if `a` contains `value`.

``````a.includes(value, i)
``````

Returns true if `a` contains `value` after the position `i`.

→ Get my JavaScript Beginner's Handbook
→ Read my JavaScript Tutorials on The Valley of Code
→ Read my TypeScript Tutorial on The Valley of Code