Arrays in JavaScript

4 min readDec 26, 2020

In JavaScript, an array is a data structure that contains list of elements which store multiple values in a single variable. The strength of JavaScript arrays lies in the array methods.

Array methods are functions built-in to JavaScript that we can apply to our arrays. Each method has a unique function that performs a change or calculation to our array and saves us from writing common functions from scratch.

Arrays are a neat way to store continuous items in memory in a single variable. You can access elements in the array by its index. The index of the array starts with 0.

Let us create an empty array in multiple ways.

Arrays in JavaScript are denoted by square bracket [].

To get the length of array or count of elements in the array we can use the length property.

Let us store some values in an array and access it by index

We can store anything in an array but for best performance use only one type of data in one array.

We can access the array elements by index as shown below.

Adding items to the end of an array (push method)

Let us add some items to the end of an array. We use the push() method to do so.

Adding items to the beginning of an array (unshift)

Let us add some items to the beginning of an array. We use the unshift() method to do so.

Adding items to the beginning of an array ES6 (spread operator)

Let’s move our heads towards new syntax of ES6! Spread operator is used to spread array or objects.

Adding items to the end of an array ES6 (spread operator)

The es6 approach does not mutate the array and gives a new array back.

Remove first item from the array (shift() method)

The shift() method removes the first element from an array and returns that removed element.

This method changes the length of the array. It returns undefined if the array is empty.

Remove last item from the array (pop() method)

The pop() method removes the last element from an array and returns that element. This method changes the length of the array.

This method returns a new array with specified start to end elements.

Remove portion of an array, slicing (slice() method)

The splice() method changes the contents of an array by removing existing elements and/or adding new elements. Be careful, splice() method mutates the array.

Press enter or click to view image in full size

Parameters:

Get Ragavi Venkatesh’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

start Index at which to start changing the array (with origin 0).

deleteCount (Optional)An integer indicating the number of old array elements to remove.

item1, item2, …(Optional)The elements to add to the array, beginning at the start index.

If you don’t specify any elements, splice() will only remove elements from the array.

Looping through array

There are various ways to loop through an array. Let’s see the simple example first.

For Loop

forEach Loop

The forEach loop takes a function, a normal or arrow and gives access to the individual element as a parameter to the function. It takes two parameters, the first is the array element and the second is the index.

Let’s see how we can access the index in forEach.