Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with JavaScript Arrays

In this article I will cover the concept of JavaScript Array. I will discuss how use some methods and properties and write some examples to demonstrate the functionality.

Introduction:

JavaScript provide facility to store multiple values in a single variable. This special variable can hold more than one value at a time and you can access the values by referring to an array index number.

Here is an example before going in to deep: Suppose that you have a list of country names. If you have to update or store data, manually you will update data one by one if you don’t have knowledge of array. If the list is containing 100, 200 or 20000 items, then it becomes hard to handle this. At this point concept of array will be used. Arrays are one way of keeping a program more proper. They allow you to do lots of operation that are difficult without them. Arrays are usually a group of the same variable type that use an index number to distinguish them from each other

there are few worthy points for array in JavaScript, you must be remember these points.

  • Values are stored into an array by using the array name and by stating the index in the array you wish to store the value in brackets. Example: name_of_array[1] = "India is A Secular Country";
  • Values in an array are accessed by the array name and index of the value. Example: name_of_array[1];.
  • JavaScript has built-in functions for arrays, only we have to use the library code.

Creating Array:

Array creation is different in some way form creating normal variable. Because JavaScript has variables and properties associated with arrays, you have to use a special function to create a new array. Listed section will give the idea of creating array storing values in to it, and accessing these values. There are three basic methods to create an array object.

var country_name=new Array();
country_name[0]="india";
country_name[1]="pakistaan";
country_name[2]="Shree lanka";
country_name[3]="Bangladesh"
var country_name=new Array("india","pakistaan","shree lanka","bangladesh");
var country_name=["india","pakistaan","shree lanka","bangladesh"];

Listing 1: Creating an Array and using it

<html>
<HEAD>
<title>Mrbool.com Tutorials  - JavaScript Array</title>
<SCRIPT language="JavaScript"> 
function display_ArrayItem() 
{ 
var ArrayItem= new Array(5) 
ArrayItem[0]="First item of array  -Its index is 0"; 
ArrayItem[1]="Second item of array -Its index is 1"; 
ArrayItem[2]="Third item of array  -Its index is 2"; 
ArrayItem[3]="Fourth item of array -Its index is 3"; 
ArrayItem[4]="Fifth item of array  -Its index is 4"; 
var x=0; 
for (x=0; x<5; x++) 
{ 
alert(ArrayItem[x]); 
} 
} </SCRIPT> 
</HEAD> 
<BODY> 
<A href="javascript:display_ArrayItem()">Click here to see the all element stored in array</A> 
</BODY> 
</html> 
output of simple array script in which stored item in array will pop up after clicking on the button

Figure 1: Above figure is output of simple array script in which stored item in array will pop up after clicking on the button.

There are various methods and properties related to JavaScript, Some of them like concatenation, sorting will cover in this tutorial separately and for the rest of the methods and properties you will gets an idea.

Array Sorting

We can sort the JavaScript array elements by using the sort() method of Array class in JavaScript. Following script will show you how to work with sorting in JavaScript.

Listing 2: Script to Sort an Array in Alphabetical Order

<html>
   <head>
<title>Mrbool.com Tutorials  - JavaScript Array</title>
   <script type="text/javascript">
  var arr = new Array(5);
  arr[0]="Delhi is capital of India (0) ";
  arr[1]="Jeneva is capital of switzerland (1)";
  arr[2]="Dhaka is capital of bangldesh (2)";
  arr[3]="perth is capital of Australia (3)";
  arr[4]="Ishlamabaad is capital of pakistaan (4) ";
  document.write("<strong>This is original array</strong>=>"+arr+"<br>");
  document.write("<strong>This is a Sorted array </strong>=>"+arr.sort()+"<br> ");
   </script>
</head>
<body>
   <h3>
  This was basic demonstration of sorting technique in javascript in which sorted and unsorted values both are printed
   </h3>
</body>
</html>
 
output of sorting script in which original array contains (0) (1) (2) (3) (4) sequence and after sorting alphabetically sorted array is in sequences of (0) (2) (4) (1) (3)

Figure 2: Above figure is output of sorting script in which original array contains (0) (1) (2) (3) (4) sequence and after sorting alphabetically sorted array is in sequences of (0) (2) (4) (1) (3)

Array Concatenation:

You can precisely add two arrays to a single array with the use of concat() method in JavaScript. This method uses the following syntax as given below:

Concatenated_Array = oneArray.concat( secondArray, thirdArray, ...); 

The JavaScript array concat() method takes two or more values of array and adds them to the termination of array. Following example will clear the idea of adding array.

Listing 3: Array concatenation script

<html>
<head>
<title>Mrbool.com Tutorials  - JavaScript Array</title>
<script type="text/javascript">
var firstArray = new Array(3);
   firstArray[0]="111";
   firstArray[1]="@@@";
   firstArray[2]="NNN";
   firstArray[3]="OOO";
var secondArray = new Array(2);
  secondArray[0]="ABCDE";
  secondArray[1]="PQRST";
var finalArray = firstArray.concat(secondArray);
document.write("<strong>First array is</strong>=>"+firstArray+"<br> ");
document.write("<strong>Second array is</strong> =>"+secondArray+"<br> ");
document.write("<strong>Concatenated array is</strong> =>"+finalArray+"<br> ");
</script>
</head>
<body >
<body>
<h3>Concatenation of Two Array</h3>
</body>
</html> 
output of concatenating array string in which concat () method takes two array value and adds in a final array.

The example takes two array object firstArray and secondArray.

Figure 3: Above figure is output of concatenating array string in which concat () method takes two array value and adds in a final array. The example takes two array object "firstArray" and "secondArray". firstArray contains four elements and secondArray contains two elements and values are merged in finalArray.

Conclusion :

There are various methods and properties available in JavaScript like array print, reverse, shift, join and slice etc. This tutorial covered basic concepts of JavaScript array which will help you to explore more functions and properties. If you have any queries please comment at Mrbool site.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login