MODULE 2: PROGRAMMING with JAVASCRIPT
Lesson 5: Array
Learning Objectives:
At the end of this lesson students will be able to:
represent group of data using array;
declare an array and its elements; and
manipulate array elements.
Lesson Proper
What is an Array?
An array stores multiple values in one single variable. An array is a special variable, which
can hold more than one value at a time.
If you have a list of items (a list of car names, for example), storing the cars in single
variables could look like this:
cars1="Volvo";
cars2="BMW";
cars3="Toyota";
However, what if you want to loop through the cars and find a specific one? And what if
you had not 3 cars, but 300?
The solution is to create an array! An array can hold many values under a single name,
and you can access the values by referring to an index number.
Creating an Array
Using an array literal is the easiest way to create a JavaScript Array.
Syntax:
With constant values/elements
var array_name = [item1, item2, ...];
Example 1:
var cars = ["Saab", "Volvo", "BMW"];
1
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT
MODULE 2: PROGRAMMING with JAVASCRIPT
Example 2:
var numbers = [100, 5, 20, 30, 7];
You may also declare an empty array and add an element later in the code.
Empty Array
var array_name=[];
Example:
var cars=[];
Accessing the Elements of an Array
Index refers to the location or address of an element in an array. Index starts from zero
[0].
Element refers to the content of the array.
You refer to an array element by referring to the index number.
The statement below accesses the value of the first element in array cars:
var cars = ["Saab", "Volvo", "BMW"];
var name = cars[0];
The value of name variable is now “Saab”
The statement below modifies the first element in cars:
cars[0] = "Opel";
The elements of cars array are now "Opel", "Volvo", "BMW".
The statements below display the elements of array cars:
[Link](cars[0] +“,”+cars[1]+ “,”+cars[2]);
or
[Link](cars);
Output
Opel,Volvo,BMW
2
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT
MODULE 2: PROGRAMMING with JAVASCRIPT
The length Property
The length property of an array returns the length of an array (the number of array
elements).
Example:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
[Link]; // the length of fruits is 4
Adding Array Elements
The easiest way to add a new element to an array is to use the length property:
Example:
var fruits = ["Banana", "Orange", "Apple","Mango"];
fruits[[Link]] = "Lemon";
Since length property returns the size of the array, this can be used to place the new
element at the end of the array.
The fruits array will now have the following elements: "Banana", "Orange",
"Apple","Mango","Lemon"
We can also use the push() function to add an element at the end of the array elements.
Sytax: [Link](element)
Example:
[Link] ("Langka")
The fruits array will now have the following elements: "Banana", "Orange",
"Apple","Mango","Lemon","Langka"
Removing an array element
pop() is used to remove the last element of the array.
Syntax: [Link]()
Example:
var fruits = ["Banana", "Orange", "Apple","Mango"];
[Link]()
[Link]()
in the given codes above, the first [Link]() removes the element "Mango" then the
second [Link]() removes the element "Apple". Everytime you use the pop() function it
removes the last element in the array. The array fruits will now have "Bannan" and
"Orange" elements.
3
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT
MODULE 2: PROGRAMMING with JAVASCRIPT
Loop Through an Array
To loop through and print all the values of an array, you could use a for loop like this:
Example 1: Display the elements of the cars array
<script>
var cars = ["Volvo","BMW","Toyota"];
arrlength = [Link];
for( x = 0 ; x < arrlength ; x++)
{
[Link](cars[x]+ "<br>");
}
</script>
Example 2: Ask for 5 numbers for an array and display the elements.
<script>
var num = [];
for( x = 0 ; x <5; x++)
{
[Link] (Number(prompt(“Enter a number”)))
}
[Link](num)
</script>
Activity
1. Create a program that will use an array with 10 names then display the names.
2. Create a program that will use an array with 10 names. Display all the names with
even number index.
3. Create a program that will ask for 10 numbers for an array. Compute and display
the sum and average of the elements.
4. Create a program that will ask for 10 values for an array of numbers then display
all the elements with odd number index.
5. Create a program that will ask for 10 values for an array of integer then ask for a
number to search in the array. If the number inputted is present in the array
elements display “FOUND” otherwise display “NOT FOUND”
Summary
An array stores multiple values in one single variable.
Length property returns the size of the array.
push() function is use to add an element at the end of the array elements
4
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT
MODULE 2: PROGRAMMING with JAVASCRIPT
pop() is use to remove the last element in the array
5
Edukasyon Pantulay Pangkabuhayan (E2Ps) on ICT