Advanced JavaScript
Arrays
• An array is a grouping of objects that can be accessed
through subscripts.
• Instead of creating many variables an array can be created
which can be referred by a common name
• an array can be thought of as a list.
Advanced JavaScript
Arrays
DECLARING AN ARRAY
// Declare an empty array of size 5
var arr = new Array(5);
DECLARING AN EMPTY ARRAY
i. Using new()
var arr = new Array(); // Array variable is created with no element
ii. var arr = [];
// The variable now contains an array of length zero.
ARRAY INDEX/SUBSCRIPT
• Each array element can be accessed using the index/subscript
• reference to an array element with a subscript in square brackets
• Index starts from 0.
• a[0] is the first element, a[1] is the second element, and so on.
Display the element at the 5th position.
STORING VALUES IN AN ARRAY
METHOD 1
var arr = new Array(10,20,30,40,50);
METHOD 2
var arr =new Array(5);
arr[0]=10;
arr[1]=20;
10 20 30 40 50
arr[2]=30;
arr[3]=40;
arr[4]=50; An array can store values of different datatypes.
Eg .
var arr=new Array(“Harry Potter”,”J.K.Rowling”,395.00)
STORING VALUES IN AN ARRAY
METHOD 3 : Accepting data using prompt()
var arr =new Array(5);
arr[0]=parseInt(prompt(“enter marks”))
Accessing Arrays in JavaScript
//Displaying Array Elements
document.write(arr[0]) // displays 10
document.write(arr[1]) // displays 20
10 20 30 40 50
//To print the entire array
document.write(arr)
Accessing & Printing Arrays in JavaScript
<script type="text/JavaScript"> Output
var myArray = new Array(); FootballBaseballCricket
myArray[0] = "Football";
myArray[1] = "Baseball";
myArray[2] = "Cricket";
document.write(myArray[0] + myArray[1] + myArray[2]);
</script>
Accessing Array elements
//Displaying Array Elements using a loop
<script language="javascript">
Output
b=new Array(10,20,30,40,50) 10
for (i=0;i<=4;i++) 20
document.write(b[i]+”<BR>”) 30
</script> 40
50
10 20 30 40 50
Printing Array elements in reverse order
<script language="javascript">
b=new Array(10,20,30,40,50) Output
for (i=4;i>=0;--i) 50
document.write(b[i]+”<BR>”) 40
</script> 30
20
10
10 20 30 40 50
Adding 2 to each array element value
<script language="javascript">
b=new Array(10,20,30,40,50)
for (i=0;i<=4;i++)
b[i]=b[i]+2
alert(b) 10 20 30 40 50
</script>
Output
12
22
32
42
52
Accepting Array elements
Accept marks of 5 subjects of a student and calculate the total and average
<script language="javascript">
b=new Array(5)
sum=0
for (i=0;i<=4;++i)
{
b[i]=parseInt(prompt(“enter the marks”))
sum=sum+b[i]
}
document.write(“the total is”+sum)
document.write(“the average is”+sum/5)
</script>
Array Properties and Methods
length It is a property . Returns the number of elements in
an array.
Eg. var x=[“h,”b”,y”,”d”]
alert(x.length)
sort() Method that Sorts an array alphabetically.
alert(x.sort());
join(delimiter) Method Returns a delimited list of the items indexed with
integers in the array. The default delimiter is a comma.
Eg. var x=[“h”,”b”,”y”,”d”]
alert(x.join(”*”)
Using length property
<script language=“javascript”>
var colors = ["green", "red", "yellow", "orange", "blue"];
for (var i=0; i < colors.length; i++)
document.write(colors[i] + "<br>");
</script>
Use a for loop to access each item in colors
//Printing elements using for..in loop
for (x in colors)
//color is the variable that marks the index position
document.write(colors[x] + "<br />");
}
Using sort()
//sort the colors array alphabetically and ascending:
<script language=“javascript”>
var colors = ["green", "red", "yellow", "orange", "blue"];
var result = colors.sort();
document.write(result); //Output blue, green, orange, red, yellow
comma is displayed by default
</script>
Accessing & Printing Arrays in JavaScript
<script type="text/javascript"> Output
var myArray2= new Array(); BaseballCricketFootball
myArray2[0] = "Football";
myArray2[1] = "Baseball";
myArray2[2] = "Cricket";
myArray2.sort();
document.write(myArray2[0] + myArray2[1] + myArray2[2]);
</script>
join()
join(delimiter) - Returns a delimited list of the items
indexed with integers in the array. The default
delimiter is a comma.
<script language="JavaScript">
var fruit = ["banana","apple","litchi","mango"];
document.write(fruit.join() + "<BR>");
</script>
To change the delimiter
Output document.write(fruit.join(“*”) +
"<BR>");
banana,apple,litchi,mango
Just A Minute …
Try it.
Q1
i. Create an array named cars, assign the values "Saab", "Volvo" and "BMW" to it, and display it.
ii. Display the "Volvo" item of the cars array.
iii. Change the first item of cars to "Opel" by referring to the index number, and display
the whole array.
iv.Use the length property to display the number of array items in cars.
v. Use the length property to add a new item to cars: Mercedes.
Just A Minute …
Try it.
Q2 Predict the output:
<script language="JavaScript">
var myArray = [1+1, ,3+3];
document.write(myArray.length);
document.write(myArray[0] + myArray[1] + myArray[2]);
document.write( "<BR>");
document.write( myArray[0]+' '+myArray[1]+' '+ myArray[2]);
</script>
