U3LA2.1: Introduction to Arrays

How can arrays help us simplify code?

Teacher Notes && Overview

In this lesson, students will be introduced to the concept of arrays.

Arrays are an important and useful concept in computer science as they allow us to easily store a lot of information in an orderly fashion. (And they will be used in many future lessons!) Arrays can be confusing to students when it comes to calling index values to access elements of the array because computers begin counting at 0. It would be good to create multiple array examples and then have students call the elements by either hard coding the number or using a variable. Students will have an opportunity to integrate through a list using a for loop in a later lesson.

Objectives

Students will be able to:

• Explain how an array can be used instead of multiple variables

• Create arrays

• Retrieve information from arrays

Suggested Duration

1-2 periods (~45-90 minutes)

NYS Standards

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

9-12.CT.7 Design or remix a program that utilizes a data structure to maintain changes to related pieces of data.

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Vocabulary

• Array - an ordered series of data

• Index - a position within an array

• Zero-Indexed - The first element of an array has an index of 0, not 1

• Element - a piece of data in an array

Planning Notes && Materials

Planning Notes	Materials
There are no specific planning notes for this lesson, but it is the first lesson students will be using media - whoo!	No special materials needed.

Resources

• Introduction to Arrays (Youtube Video)

• Colors in Arrays (Youtube Video) | Starter Code (p5 editor | repl.it)

• Arrays information - Code.org (Youtube Video)

• Getting Started With p5.js: Chapter 4. Variables (Section: Repetition)

• Learning Processing: Chapter 9. Arrays

• 7.1 What is an Array? | Code (6.1)

Assessments

Formative:

• Do Now Discussion

• Ability to Create and Read arrays during the learning activity

• Explain benefits of arrays in the Wrap Up

Summative:

• Fortune Teller (Upcoming Mini Project)

Do Now/Warm Up (~3 - 5 minutes)

Ask students to describe what makes lists useful in everyday life with the following question prompts:

• What makes a list useful?

• How would lists be useful in programming?

• How can we use lists in p5.js?

Discuss with students possible answers:

• Lists help us organize information.

• Lists help us collect all the relevant information in one place.

• Lists show that a lot of ideas are related.

• Lists help us order or prioritize ideas.

• Lists help us think about the big picture

Tell students that we will be creating and using arrays which are the same concepts of lists in real life.

What Are Arrays?: Grocery Store Example (~15 minutes)

Computer scientists spend a lot of time thinking about information. After all, computers are just tools to manipulate pieces of information in certain ways. Before computers were around, humans invented lots of different ways to store information. The library was given the Dewey Decimal system, in which numbers were associated with the information in certain books. That’s a pretty complicated way of storing information.

But one way of storing information that you’ve definitely used before is a list. Maybe you’ve made a list of people to invite to your birthday. Maybe you made a list of things to buy at the grocery store. Something useful about lists is that they’re one object themselves: you don’t have to carry around a lot of different scraps of paper containing the name of everything you want to get at the store. You can just carry the list. And lists can change - you can cross something off a list, add something to a list, or replace one element with another. So how can we translate the efficiency and usefulness of a list to coding? Simple: we use an array.

Arrays are a list in JavaScript. We typically talk about creating, reading, updating, and deleting from list, or the acronym CRUD. Today, you will focus on creating and reading.

Ask students to take thirty seconds to write down a few items they want to buy at the grocery store (or at Target, if you want more options). Then, ask students to share out a few while you make a list on chart paper/white board. Aim for the list to be ~10 items long. Title the chart paper groceryList and then explain to students that this is essentially an array - it's a list of objects that, paper permitting, could be as long as the want it to be, and have a certain and specific order.

Explain to students that this groceryList has an order that is defined by something called an index value, or the number we give to each element. Computers are interesting in that they start indexing at zero instead of one, like we may be used to. On the chart paper, number each item 0 - however many items you have. Then give this scenario to students: You're shopping with a parent and have a lot to get - they could hand you the list, or tell you 'go get bread,' but they could also say 'Go get item 2. Go get item 0' etc. If I asked you to go get item 1, what would you come back with? What about item 4?

Ask a few rounds of these ('go get item...') questions, taking student answers and asking them to explain. Using 1 and 0 may trip up students which is perfectly natural - just review and make sure they understand the numbering system used in JavaScript! When students have gotten the hang of retrieving items with an index value, ask them "What is the length of this list?" Anticipate that most students will look at the last number - for example, 9 - and say that. Remind them that there is also a 0 value and demonstrate counting how many items there are if necessary! Explain to students that a cool thing about arrays, in addition to making our code simpler by holding lots of things in one place, is that traits about them, like length, get stored in the program and we can access with simple commands that we will talk about later.

Once students have done a little practice, it's time to turn this example into code before moving to example 2. Ask students to open a blank editor and code along the following, using whatever you wrote on your chart paper as a model:

var groceryList = ["bread", "orange juice", "pasta", "rice", "beans",
"pizza", "bananas", "coconut", "potatoes", "spinach"]

Explain the pieces needed to make this array. By now, you should understand what a variable is. It’s a name that you give to a piece of data or information. You can change the value of the variable, but the name will always stay the same. With arrays, we can store many separate values in one variable name. To indicate that a variable holds an array, we put all of the items inside square brackets, with each element separated by a comma. Arrays themselves are a data type that can hold many different types of data - this one is currently holding strings, but they could hold colors, numbers, objects, even other arrays!

If students need more of an example of how arrays work, consider this:

Diagram of an array explaining name, elements, values, etc.

Please note for students: the elements in this array are strings, or letter characters all put together, which is why they are in quotation marks. If we were storing numbers, p5.js colors, or other specific data types, the quotations wouldn't be needed!

Once the array is in your code, review with students how you can call items of an array using the array name and the index value, like so: groceryList[3]. You can do this either with console.log() or text(), depending on your preference and what works best for your classroom.

var groceryList = ["bread", "orange juice", "pasta", "rice", "beans",
"pizza", "bananas", "coconut", "potatoes", "spinach"]

function setup() {
  createCanvas(400, 400);
  console.log(groceryList[0]) //console.log option
}

function draw() {
  background(220);
  text(groceryList[3], 200,200) //text function option
}

Run a few times, changing out the index value each time. Before running, always ask students to predict what will display.

Similarly to the chart paper example, after a few iterations of calling single items from the list, demonstrate that you can also pull other data from the list by trying things like this:

console.log(groceryList.length)

It's okay if students don't see a ton of use in this feature yet - you can brainstorm some places where that might be useful, or just let it ride until future lessons.

Once they feel comfortable, it's time to hit them with another example!

What are arrays?: Building Example (15 minutes)

Since arrays are a whole new code concept, we like to give students a few ways to process them in hopes that one will resonate and stick around in their brains. Explain to students that you are going to put the grocery list aside for a moment and think about arrays in a different way.

Think of variables and arrays like buildings. Let’s say you want to count the number of people on each floor of a building. If the building only has one floor, it’s easy, right? You can just say “The building has 30 people in it.” But if we’re thinking about the Empire State Building, it’s harder than that. You need to find a way to talk about the number of people on each floor of the Empire State Building.

So how would you say that in real life? You’d probably say something like “There are 20 people on the first floor, 30 people on the second floor, 32 people on the third floor…” and so on. And we all know you’re talking about the same building, the Empire State Building, you’re just referring to each floor separately.

So you can think of an array as something similar. It’s a bunch of different values, but with the same name. And we write it in a similar way as we would talk about buildings with floors. If we had a variable that held the number of people on the ground floor of a single-story building, the declaration might look something like this: let building = 30 But if we’re talking about a building with many floors, our array might look like this: building[0] = 25; building[1] = 40, building[2] = 30.

Notice the ‘[ ]’ after the name of our variable? That’s where we put the index, or number, of the element, or specific value within the array, that we want to access or change.

Image of simplified building with floor numbers labeled and people on each floor.

Using the syntax, and assuming this is the building we’re talking about, what would building[3] be equal to? What about building[1]?

You may have noticed something weird. When I was declaring values in the array, I started with building[0]. Why did I do that, and not start with building[1]? Because in p5, arrays are zero-indexed, which means they start at zero. Think of it like a building that counts the ground floor as zero and starts counting at one after you’ve gone up a floor.

If we wanted to make an array that held the amount of people per building floor, it might look like this:

let buildingPop = [50,0,20,40,10]

...and we could then call those numbers in our program to control whatever we wanted!

Color in Arrays && Practice (20 - 30 min)

After all of those examples, it's time to see one last application of arrays - this time instead of numbers or strings, let's try putting colors into an array. For this activity, we are going to imagine we are making a color palette for a design project (something that graphic artists, fashion designers, and even event planners have to do often) using Adobe Color Picker.

Share students on this starter code (p5 editor | repl.it). Then demonstrate Adobe Color Picker and select a palette of your choosing. With students, show them how they could create and use an array of colors via the following code along. Note: the color() feature is p5.js specific (it is essentially creating a color object) and so this array, while the variable still needs to be declared globally, above setup, must be given values inside the setup function for the colors to register. Creating the array would look like this:

let palette1;

function setup(){
 createCanvas(400,400)
 
 palette1 = [color(252,214,202), color(217,138,124), 
 color(240,101,89), color(219,117,116), color(255,28,82)]
}

You would then use the colors as we have called other items in the array. Students will need to choose primary and secondary/accent colors based on the palette they create:

fill(palette1[2])
rect(10,50,200,50)

Wrap-Up (~5 minutes)

Ask students to post their project links in a forum such as Slack or the Google Classroom. Then, have them view and comment on two other projects, leaving a glow and grow for each

Guiding questions:

1. How are arrays useful?

2. Describe how to can an array be used on p5.js?