JavaScript Arrays: Add, Remove, Loop, Copy
Working with Arrays in JavaScript

JavaScript Arrays: Add, Remove, Loop, Copy

JavaScript arrays are used to hold collection of objects. The global Array object is available for us to store numbers, strings, boolean values or even complex objects. Unlike most programming languages, JavaScript arrays are not strongly-typed. This means that you can store a mixture of data types in a JavaScript array.

In this post, we will explore the most commonly used JavaScript array operations.

Create an Array in JavaScript

Creating an array in JavaScript is very simple.

Just create a variable and construct the array using angle brackets [ ].

All items of a JavaScript array are comma-separated between the brackets.

var languages = ['JavaScript', 'HTML', 'CSS'];
console.log(languages.length);
// 3

Storing Objects in a JavaScript Array

We have been using string values in our arrays so far. We can also store numbers, objects or even arrays in a JavaScript array.

var complexArray = [150, 'Lorem ipsum', { name: 'John Doe'}, [1, 2, 3]];

As you can see above, arrays in JavaScript are pretty relaxed – you can mix and match any kind of a variable.

complexArray[3];

// [1, 2, 3]

Access an Item by Index

Every item in a JavaScript array has an index (number), which refers to the position of the item in the array.

JavaScript arrays are zero-based, which means the index of items start from zero.

var languages = ['JavaScript', 'HTML', 'CSS']; 

var myItem = languages[1];
// HTML

var last = languages[languages.length - 1];
// CSS

Loop through Items

How do you look at each item in a JavaScript array? We can achieve this by looping through the array.

There are two ways to loop through items of an array in JavaScript.

Using forEach

var languages = ['JavaScript', 'HTML', 'CSS'];

languages.forEach(function(item, index, array) {
  console.log(item, index);
});

// JavaScript 0
// HTML 1
// CSS 2

Using for

var languages = ['JavaScript', 'HTML', 'CSS'];

for (let index = 0; index < languages.length; index++) {
   const element = languages[index];
   console.log(element, index);
}

// JavaScript 0
// HTML 1
// CSS 2

Add an Item to the End – push

We can add an item to a JavaScript array with push method.

var languages = ['JavaScript', 'HTML', 'CSS'];
var newLength = languages.push('C#');
// ['JavaScript', 'HTML', 'CSS', 'C#'];
// 4

The push method of a JavaScript array returns the new array length.

The languages array above has three strings in it. When we add a new item with the push method, it returns 4.

Add to the Front – unshift

We can add an item to the front of a JavaScript array with the unshift method.

var languages = ['JavaScript', 'HTML', 'CSS'];
var newLength = fruits.unshift('C#') // add to the front
// ['C#', 'JavaScript', 'HTML', 'CSS']

Just like the push method, unshift returns the new array length.

Remove Last Item – pop

We can remove the last item of an array with the pop method.

var languages = ['JavaScript', 'HTML', 'CSS'];
languages.pop(); // remove CSS (from the end)
// ['JavaScript', 'HTML'];

When you pop an item of a JavaScript array, it will return the removed item.

Remove First Item – shift

We can remove the first item of an array with the shift method.

var languages = ['JavaScript', 'HTML', 'CSS'];
languages.shift(); // remove JavaScript from the front
// ['JavaScript'];

Just like pop, the shift method returns the removed item.

Copy a JavaScript Array – slice

It is often useful to copy or clone a JavaScript array before working with it. We can copy a JavaScript array using the slice method:

var languages = ['JavaScript', 'HTML', 'CSS'];
var copy = languages.slice(); // this is how to make a copy
// ['JavaScript', 'HTML', 'CSS']

More complex array operations such as sort mutates(modifies) the array so you want to clone it before sorting.

Summary

An array is a simple yet effective data structure in JavaScript. In this post, we have seen how easy it is to work with arrays in JavaScript.

Umut Esen

Umut is a certified Microsoft Certified Solutions Developer and has an MSc in Computer Science. He is currently working as a senior software developer for Royal London. He is the primary author and the founder of onthecode.

Leave a Reply

Close Menu

Free Template

Get your Angular Material application template to kick-start your next project.