JavaScript Arrays 101

We learnt already how to declare variables and constants and store values in JavaScript in first blog of our JavaScript Introduction Series, but what if we need to group values together or if we want create some sort of list or collection of some sort how do do that?

One answer can be declaring multiple variables of similar names, for example check the code snippet below :

But there are multiple problems with this method of collection, can you spot them?

• There is a lack of obvious cohesiveness , at one quick glance one might not realize this is a collection.

• we need to repeatedly declare a new variable in new line again and again, which becomes repetitive and extra time consuming.

Also think what if it was not just a personal favorite fruit list, what if the requirements was to store thousands of usernames? or other kind of real data? That would be impossible to create variable for every single one of them by hand.

Arrays

To solve that exact set of issues or problems, JavaScript provides us with a datatype called Array . This data type enables us to store multiple items that are related together in a same collection under one variable name at the same time.

Let's understand it with an example

Not only this gives a intuitiveness and a better readability, but also in a single variable you can store multiple values. How nice that is!
Not only these arrays can scale to millions or even higher but also you can very easily read, write and update values in the Array.

Create an Array

There are more than one ways to create Arrays in JavaScript, but to not overwhelm you with all the ways you can create an Array let's learn the most used and intuitive ones.

Literal

The most literal way to declare and array as you saw already above is to use brackets or [ sign.

Constructor

Another way to create arrays in JavaScript is to use Array() constructor in JavaScript.

Access array elements

The values we store in an Array is also known as elements of the array. These elements can be accessed using index values. Let's see what that means

First you write the name of the Array variable then immediately after that the index of the element you want to use within [ brackets ].

The index of the elements inside an array always start from 0 and it is a convention and the index change in increasing order like the figure shown below.

Update Array elements

Using the index you can not only access the element but also update it's value.

As you can see in the above example we updated the 4th element's value to be "Brown".

Array length Property

When you create and Array in JavaScript you get a set of methods and properties attached to it. One of those properties is called length , and as you may have guessed .. this property tells us the length of the Array or simply said the number of elements currently stored inside the array.

You can use it like following

Iterating the Array

You can go through every element of the array from start to end, using loops. There are multiple ways you can do so, let's see them one by one.

For loop

You can use a simple for loop to access all the elements of an array in order from beginning to the end like following:

ForEach loop

This is a method that comes with the array itself, when you create an Array in JavaScript you by default get this method attached to it. This method expects a function as a parameter and performs the steps inside that function on every element of the Array one by one.

For...of loop

This loop takes each and every element of an array and performs some operation on them one by one.

These were all the basic ways how we can simply loop over an Array and perform some operation on every item of the Array .

Conclusion

So this is all the basics of Array in JavaScript you need to know for know and hopefully now you can confidently create and use Arrays in JavaScript.