JS Arrays Featured Image

Understanding Javascript Arrays

Lot of people face difficulty in understanding Javascript Arrays or its usage. Through this post, i intend to describe what Arrays are and how you can use them to get keep your script clean and efficient. Arrays can be created in different ways among different scripting languages. However, for the sake of simplicity, this blog post i would use Javascript.

If you are new to Javascript and want to understand Arrays, this post is for you. However, this article is also for all those people who are already familiar but want to go through again.

Let’s Script

You must have relished the joy of buying a Box of 6 Donuts from your favorite Donut outlet. What it does have is sequentially arranged pieces of Donuts. Just like the way you see this row of donuts, our Arrays would look similar. Let us write a little syntax to demonstrate that
var boxOfDonuts = [“Death by Chocolate”, “Chocolate Frosted”, “Sprinkles”];
As you can see above, the names of different donuts are grouped  together separated by Comma(,). All these have been grouped under a single head named as “boxOfDonuts”. Now, let us see how we can print this list within a HTML page using Javascript. I created a HTML page Demo.html and wrote the following code by opening it in Notepad.

In the above code, i have created a basic HTML page structure comprising of and Tags. But the real action is happening within tag. Here I put one “Div” element with id as “demoDiv”. This is my placeholder within which i want to display some information. Next is a “script” element which contains three statements. This is important as this is where we are defining and using Arrays. Now, let us break the entire code line by line and understand the relevance of each statement

Understanding code – Statement by Statement

 

The first statement of our script goes as below. Here i have introduced a variable called “boxOfDonuts”.

It is now important to put some information within this variable. As you would know that variables are the placeholders which can contain data. This data can be a text or numbers. Generally, putting the value in variables is straight forward as you would simply mention the value against the variable name such as below

OR

However, what if i like to put the names of all three Donuts in a single variable. Create 3 variables each one for every donut? Answer is NO. What solution i have got then? Arrays is something that would come handy here. What i can do here is to put all three names of donuts separated by Comma (“,”) and surround them by square brackets.

What this would do is to make the system understand that all these 3 values are part of a collection and would store them as is within a single variable called “boxOfDonuts”.
Once the variable has this value, we can use the following statement to display its content within the DIV we created earlier.

Now, open Demo.html within browser of your choice. You should see the following screen.
demo.html page screenshot

Demo.html page

Getting single value from Array

Now let us assume, we just want to pull the name of first donut and display it on the page. We can use following statement

 Here, along with my array variable “boxOfDonuts” i have used “[0]” which indicates the subset which i want to use. The Arrays are virtually divided by subsets wherein each subset has value stored into it. Subsets, in our example, works like following:
Subset 1 : “Death by chocolate”
Subset 2 : “Chocolate Frosted”
Subset 3 : “Sprinkles”
To get the value of first subset, you would have to use the index value. The index value does not begin with 1 but 0 (zero). So, in order to get the name of first donut, i would try getting the value of first subset by specifying index. The code would be like mentioned  below

Similarly, second subset’s value can be retrieved by using [1] as the index and so on.

You can use this code to assign the values in different placeholders as you may like. In this example, i have used strings to demonstrate a very basic example of Arrays. Furthermore, you can also use Integer values with Arrays and can also do computation.

I hope you liked this introduction to Javascript Arrays. Feel free to post your comments and share your views if you have or not liked this article. I would soon post an advanced tutorial about Javascript Arrays for Intermediate and Advanced users.

Leave a Reply

Your email address will not be published. Required fields are marked *