Javascript

An Introduction to Javascript Arrays

Sponsor

Arrays in Javascript are a simple, one dimensional way to store simple sets of data. Arrays are a critical part of Javascript, and used extensively.

How to make an array

Items in an array can be of any typical Javascript type, and they can easily be defined as follows:

javascript Copy
let myArray = [ 1, 2, 3, 4, 5, 6 ];

Above, we have defined a simple array of 6 items, those being all the numbers from 1 to 6. We have now stored our data in the array format. Similarly we can also store strings:

javascript Copy
let myArray = [ 'hello', 'world' ];

Again, we've created an array containing two items: hello and world. Emojis also work:

javascript Copy
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ];

Getting the length of an array

We can get the length of an array using the length keyword, which looks like this:

javascript Copy
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]; let getArrayLength = myArray.length; // Returns 5, since there are 5 items.

Accessing properties in an array

We can easily access and reference items in an array by using square brackets []. Let's use our emoji example. When programming, we usually start counting at 0, so the first item has an index of 0, and as such the second item has an index of 1. To access the second item, we may do this:

javascript Copy
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]; let getOrange = myArray[1]; // Returns 🍊

Getting the last element of an array

Since we know the length of an array, we can use that information to get the last element in an array. That looks a bit like this:

javascript Copy
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]; let getArrayLength = myArray.length; // Returns 5, since there are 5 items. let getOrange = myArray[getArrayLength-1]; // Returns 🍠

We have to subtract 1 since the last index is one less than the array.

Iterating over an array

Now that we have an array, we can easily iterate over it using a for loop. This lets us do one thing to every item in the array. In the below example, we will console log every array item:

javascript Copy
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]; for(let i = 0; i < myArray.length; ++i) { // Since i changes +1 every time, the below line will be run for every array item // Thus every array item will be console logged for us. console.log(myArray[i]); }

Turning strings into arrays

If we have a string separated by a specific character, we can split it into an array. Imagine we have all of our fruit and vegetables in a string separated by '-'. If we apply the split() function to that string, we will get an array:

javascript Copy
let myString = "🍅-🍊-🥬-🍓-🍠"; // Returns [ '🍅', '🍊', '🥬', '🍓', '🍠' ] let myArray = myString.split('-');

Advanced Array Functionality

Arrays are a useful way to store data in Javascript. There are many use cases where you need to manipulate or retrieve data from an array, or even sometimes merge two arrays. Since there are so many things you can do with arrays, we've written a separate article.

To find out all the advanced ways to manipulate arrays, click below:

Last Updated Wednesday, 7 July 2021

Subscribe to Newsletter

Subscribe to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email