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.

ta-inserter-version="2">

Let’s create an empty array:

Ezoic - wp_incontent_7 - incontent_7 -->

the name we’ll give to our variable is

="has-inline-color">emptyArray

empty array

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.

array of strings

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:

display the results on the console

So on the browser we’ll have:

Array displayed on the console

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:

Array of numbers

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:

Array displayed on the console

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:

Array of objects

Displaying the array on the console we’ll have:

Array displayed on the console

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

Nested arrays

The results we’ll get on the console are:

Nested arrays displayed

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.

Mixed array

displaying this in the console we have:

Mixed array displayed

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.

String array

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:

Array items positions

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

Displaying John on the console

On the console we have:

Position 0 of the array

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

Displaying Tomas on the console

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.

Adding Liam to the array

Logging this to the browser console our array looks like:

Liam added to the end of the array

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

Add many elements to the array one time

And so our array becomes:

Elements added to the
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:

unshift() method to add an element

So the array now looks like this:

Liam added at the beginning of the array

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.

Adding many elements at once

The array looks like:

All elements added at the beginning of the array

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:

splice() method to add elements in a specific position of the array

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:

Elements added after the 2nd element of the array

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.

Remove the last element of an array

Our array becomes then:

The last element of the array removed

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:

shift () method to remove elements from the array

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

Removing the first element of an
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:

splice() method to remove a specific element

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:

Element removed

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:

reverse() method

And so on the console the array will look like:

Array elements reversed

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:

concat() method

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:

2 arrays concatenated

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.

Get new content delivered directly to your inbox

Leave a Reply

%d bloggers like this: