Using Arrays in JavaScript

1. Using Arrays in JavaScript

2. Goals By the end of this lecture you should understand … • … how to dimension an array in JavaScript. • … how to declare an empty array in JavaScript. • … how to add values to an array. • … how to use parallel arrays.

3. What is an Array? • An array is a data structure that can hold multiple values (unlike a variable, which can only hold 1 value at a time). • An array is useful when we work with groups of form objects, like radio buttons

4. Arrays and Memory • In a computer’s memory, an array represents multiple contiguous locations that all contain the values of the same data type. • We represent each “slot” in an array with a number: • Numbers start at zero. • An element’s position (represented by a number) is called an index (or subscript)

5. Why use Arrays? • Use an array when you need to group values by some common characteristic (e.g. – Students in a classroom). • When designing an application that performs the same processing for multiple sets of data, use an array and a looping structure.

6. Conceptual Example of Arrays Array Positions (Elements) –Each number represents the subscript (index) of its corresponding position Array Values –The value stored in contiguous memory cells Array Name = Class

7. Array Elements • Elements populate an array. • Each element is a discrete value. • We identify elements using a unique index (the element’s “address”). • Array index numbering starts with zero and increments by one for each new element.

8. Declaring an Array • To declare an array in JavaScript, we use the array constructor and assign the array to a variable. We give the constructor the size of the array as an argument:var n201Class = new Array(34); • At times, we may not know the size of the array when declaring. In such situations, we can declare an empty array:var n201Class = new Array();

9. Adding Values to an Array • To add values to an array, assign the new values while also identifying the index where you want JavaScript to store the new value: n201Class[0] = “Jennifer”; n201Class[1] = “Joseph”; n201Class[2] = “Marcus”; n201Class[3] = “Alex”;

10. Using a For Loop to Add Values • In some instances, we can use a for loop to add values:for(var i=0; i<10; i++){ var newStudent = new String(“”); newStudent = “Student”; newStudent = i.toString(); n201Class[i] = newStudent;}

11. Parallel (Corresponding) Arrays • Parallel arrays gives you the ability to store multiple pieces of information about a single entity in an application. • The indexes of each array should correspond to one another for individual entities: • Student ID • Student Name • Student Exam Score

12. Conceptual Example of Parallel Arrays Array Name = fltExam1Scores Array Name = strn201Class Array Name = strSID

13. Creating Parallel Arrays • To create parallel arrays, just create them as you would any other array:var SID = new Array();var n201Class = new Array();var examScr = new Array(); • The arrays are separate arrays in memory, but your program should treat them as one …

14. Assigning Values to Parallel Arrays • To assign values for a single entity to parallel arrays, use the same index number for each assignment:SID[5] = “025769”;n201Class[5] = “Ravi”;examScr[5] = 82;

15. The Array.length Property • Just like any JavaScript objects, arrays have properties. • One of the most useful properties is the length property, which will give you a count of how many indexes the array has.

16. The Array.length Property • Example of the Array.length property:var golfScores = new Array();var golfScrSize = 0;golfScores[0] = 72;golfScores[1] = 85;golfScores[2] = 125;//golfScrSize will get the//value of 3golfScrSize = golfScores.length;

17. Using Array.length • The following code averages the values stored in an arrayfor(var i=0; i<golfScores.length; i++){ sumScores += golfScores[i]}avgScore = sumScores/golfScores.length;

18. Array Examples Single Array Parallel Arrays

19. Questions?