Northcentral Technical College Introduction To Programming
10-152-310
Introduction to Programming with JavaScript NTC 10-152-310

Learning Plan 6 Introduction to Arrays

# Introduction to Arrays

#### File: /Learning Plan 6/introToArrays.html

### Variables

- Remember this?

    53711: Males: 5 Females: 2
    53712: Males: 9 Females: 9
    53713: Males: 11 Females: 3
    53714: Males: 4 Females: 6
    53716: Males: 1 Females: 0

    Total Males: 30
    Total Females: 20

- In order to do this program we needed variables something like this:
- What would happen if our data changed?
- What would happen if we got a very large file and we didn't know what zip codes were in the file? (Like one of the project 5 parts...)
- We need a more flexible data storage system!

### Arrays - A More Flexible Data Storage System

- All modern programming languages have ways to store data in variables that are flexible, adaptable, easy to use, and very similar to every other programming language.
- The first of these storage systems we are going to learn is called `Arrays`.
- This line of code creates a single variable and assigns one piece of data to it.
- Here is an `array` of zip codes. The code is creating a variable and assigning an empty array to it.
- We use a set of square brackets (`[]`), that does not have a space between them, to make a new array.
- What does this really create? Well, an `Array` is an object. You will learn lots more about objects in the coming semesters. For now, think of an Array as a piece of running JavaScript code that lets us add data to it.
- Remember this image of a variable? We said that this code creates a container that's named `count` and assigns the number 5 to it.

- This line of code creates a container, too. However, it's a container that can hold other containers.
- After this line of code the array is not holding any other variables, yet. Let's see how to add another container to the array:
- Arrays are indexed by numbers that start at zero. The first container is named `studentNumbers[0]`.
- Let's add another line of code to the above code that adds another student number:
- We now have two student numbers in our array. What would a picture of this look like?
- Each individual student number in the array is called an `array element`.
- Do they really all have the same name?
- Yes!
- In an array all the variables have the same name. We have to identify them with a number, an `index`. Our indexes start at zero and just go up from there.
- With people, we assign more names to a person to identify them. But, with arrays we assign numbers.
- Once you get used to it, it all makes sense.

### Working With Arrays

- Let's look at a detailed little example.

Wisconsin Area Codes

- Line 6: This declares an empty array the will hold area code variables.
- Line 9: A variable for the output HTML element.
- Lines 12-17: Here's where we assign elements of the array with data. Each element is a separate JavaScript variable that is all part of one array. We can just keep adding new variables to JavaScript arrays, they don't have a size limit.
- Line 20: Get the output HTML element.
- Lines 24-29: Here we access each element of the array and add the output to the display list. Do you notice a pattern? What changes in each of those lines? Could we do this differently?

#### Version Two

- Since the only thing that changes in lines 24-29 in the above version, we could make a loop!

Wisconsin Area Codes

- The output looks the same! This is good!
- This is much more flexible. We can add more zip codes and the output code won't have to change.
- This little piece of code is what makes that possible:
- We can determine how many elements are in an array with the `length` property of the array.
- That means our loop will automatically keep going until the end of the array
- Then this piece of code is the next thing that makes this possible:
- We can put a variable inside the square brackets. This lets us plug in a value for the index. `Very flexible!`
- Are we done yet? Could we make this any smaller?
- Sure!
- There is another block of code that is repetitive.
- Here's a line of code that does that same thing:
- Let's confirm that!

#### Version Three

- Here's the next version with all the short code we did above:

Wisconsin Area Codes

- Same output!
- Smaller code that is also readable. That's a good goal as long as the code is still flexible.
- Could we just output the whole array?

#### Version Four

- Sure we can!

Wisconsin Area Codes

- Huh! It looks just the line that added the data to the array in the first place.

#### One More of My Versions

- How about adding more elements to an array that already exists? There are several ways to do this. Let's look at two of them.
- First, look at the relationship of the `index` of an array element and the `length` of the array.
- Hmm, the `index` is zero and the `length` is one bigger. Is this always true?

- This is very good! That means we can do this to add another array element and it will always work:
- So, whenever we want to add a new element to an array we just have to use the length of the array as the index!
- Is that the only way?
- Nope!
- We can also use this function to add an element to an array:
- The `push()` function just adds the new element to the end of the array.
- Which one should you use?
- Whichever one you'd like, they do the same thing and work just as well as each other.

#### Now Your Version!

- Yup, that means a lab.
  - 6.2 Lab 1
    - 6.2 Assignment 1

### Arrays Summary

- Let's take a moment to list some of the most useful ways we work with Arrays we just covered.

#### Declaring an Array

#### Adding Elements to an Array

- Or

#### Declaring and Populating an Array at the Same Time

#### Accessing an Element in an Array

#### Looping Through an Array