JavaScript Arrays- How and what!

1)- What is an array in JavaScript?

In JavaScript an array is an object. This object can contain different type of data. It can contain strings like names, key words, phrases…, numbers, boolean, another array, objects…..

Let’s take a closer look at the structure of an array.

1)- Array syntax

To create an array in JavaScript it is very simple. All we have to do is to choose a name of our variable where we’re going to store the array,

store the array data between brackets [ ], and assign the array to our variable.

Let’s create an empty array:

the name we’ll give to our variable is emptyArray

So as you can see, to create an empty array we just assign the brackets [ ] to our variable.

Now let’s create an array of strings. Let’s say that this array of strings will contain people names.

So to create an array of strings we add the names in this case inside the array brackets [ ] and we surround them with quotes. The quotes are what will tell the browser that the data inside the array is a string data.

If we want to see the results in the browser console we should add another line of code which is as follow:

So on the browser we’ll have:

Now we’ll create an array of numbers. To create an array of numbers we’ll do the same thing. We’ll add the numbers inside of the array brackets. So the code is:

As you have probably noticed, to make an array of numbers we don’t need to add the quotes to the numbers, and that is because JavaScript understands the type of the data passed to the array.

So on the console we’ll have:

Now let’s make an array of objects. In this example we will say that we have 3 people, each of them has a name and an age.

To create an array of objects simply we’ll create our objects and add them to the array. So the code for this is:

Displaying the array on the console we’ll have:

Now let’s see one final example where we can create an array inside another array.

The results we’ll get on the console are:

2)- Can JavaScript arrays contain different types of data?

Yes. In JavaScript we can add different types of data to the same array.

Let’s see an example of that. Let’s say that we want to create an array where we have people names, and some numbers, and some objects.

displaying this in the console we have:

So you can see, we have added different types of data to the same array.

3)- What can we do with an array?

1)- We can display the array elements

To start, the first thing we can do with an array is to display its elements.

Let’s go back to the string array we created at the beginning.

To display one element of the array, for example John or Tomas or Isabella, we have to specify the position of this element in the array.

For example, if we want to display John, John is at position 0 of the array. That is because in JavaScript, arrays positions start at 0 and not 1. So the first item of the array will have position 0.

If we want to display Tomas, Tomas is the second item of the array, but its position is 1.

So in short, the position of the items is:

Let’s display John on the console. To do that we’ll use the following code:

On the console we have:

If we want to display Tomas, the code will be:

And so on…

2)- We can add new elements to the array

a)- push method()

Besides displaying array elements, we can add new elements to the array.

For that we have to use the push() method.

The push() method adds new elements to the end of an array.

Let’s say that we want to add now names to our stringArray. We’ll add Liam as a name.

So to do that a line of code needs to be added before logging the results to the console.

Logging this to the browser console our array looks like:

If we want to add many elements at the same time we can do like this:

And so our array becomes:

b)-unshift method()

Unlike push() method that adds elements to the end of an array, unshift() method adds elements at the beginning of an array.

Now if we want to add a new name at the beginning of the array we’ll add the following code:

So the array now looks like this:

So in this example, Liam was added at the beginning of the array.

Same thing as for the push() method, with the unshift() method we can also add many elements at the same time.

The array looks like:

We have the same results that we had for the push() method, except that now our elements are added at the beginning of the array.

c)-splice() method

Now if we want to add elements in a specific position of the array, we can do it via the splice() method.

Let’s say that we want to add 2 other names to the array, but this time we want to add them after “Tomas”.

To do that we will add the following code:

So the splice() method takes some parameters. parameter 2 defines where the new elements will be added. In this example we want to add the elements after “Tomas”. “Tomas” is the second element of the array, so we tell the browser that the new elements will be added after the 2 second element of the array.

If we wanted to add the new elements after Isabella, then the parameter we would have passed is 3. Because Isabella is the 3rd element of the array.

Parameter 0 defines how many elements we want them to be deleted after the second element which is “Tomas”. In this example we don’t want to delete any element, so the parameter we passed is 0.

After that, the other parameters are the names we want to add to the array. We can pass as many parameters as we want. Here we passed only 2 parameters (“Kattie” and “Tim”) because we want to add just 2 names.

So on the console we’ll have:

3)- We can remove elements from the array

a)-pop() method

To remove an element from the array we’ll use the pop() method.

The pop() method removes the last element of an array.

Our array becomes then:

As you can see, Lucie, which was the last element of the array, is now removed from the array.

b)- shift() method

We can also remove elements from an array using shift() method. But shift() method, unlike pop() method, removes the first element of an array.

If we want to use it the code will be:

And so, we will have at the end an array that starts from “Tomas”.

c)-splice() method

It’s not all the time that we want to remove elements that are at the beginning or the end of an array. Sometimes we need to remove elements in a specific position of an array. So how can we do that?

Let’s say that this time we want to remove “Isabella” from the array. Isabella is not at the beginning nor at the end of this array.

So to remove “Isabella” we’ll use the splice() method as below:

To remove an element from an array splice() method takes 2 parameters:

The first parameter indicates from where the array will start adding elements. In our case the array should start adding elements at the second element which is “Tomas”.

But we don’t want to add elements, we want to delete them. So here comes the second parameter.

The second parameter specifies how many elements we want to delete. In our case we want to delete just one element which “Isabella”. So the parameter we pass is 1.

If we wanted to delete 2 elements then we would have passed 2 as parameter.

So now the array will be:

4)-We can reverse an array

In JavaScript we can also reverse an array. For that we use reverse() method.

If we want to reverse our array, the code will be:

And so on the console the array will look like:

So now, the elemnts are reversed. Instead of starting with “John”, the array starts with “Lucie”.

5)- We can concatenate arrays

Another thing we can do in JavaScript with arrays is to join them together.

the method we use for this is the concat() method.

Let’s say that we have 2 arrays and we want to concatenate them:

Here we have an array of Strings (stringArray) and an Array of numbers (numberArray).

We put the results of the concatenation in a variable called finalArray.

So after logging the results to the console we have:

4)- Conclusion

Arrays are a very important concept in JavaScript that helps you in managing your data. We can apply many methods to the arrays to arrange the data how we want.

This article has reviewed these methods and how they can be used. You also saw how to create an empty array and an array with different types of data.