Arrays
Time 2.7 hrs

Difficulty Beginner
Prerequisites Loops
Departments Science
Authors Sandra Kuipers
Groupings Individual
Minimum Year Group None

### Blurb

Arrays

This work is shared under the following license: Creative Commons BY-SA-NC

### Outline

 Learner OutcomesStudents will: ... Competency Focus ... Interdisciplinary Connections ... ReflectionWhat was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used? ... CreditsAny CC attribution, thanks, credit, etc. Bracket icon by Three Six Five from the Noun Project

5 mins
Arrays
Intro
• The more code we write, the more variables we end up with!

`var thing1, thing2, thing3, thing4,... thing954;`
• Wouldn't it be nice if there was a way to put all these variables in a list?
• This is where arrays come in!
• Arrays help us store lists of things: strings, numbers, even other arrays.
• We can have lists of any length, and access the item at each location:

`var things = [];things[42] = "The Answer to Life, the Universe, and Everything";`
5 mins
Like a Bookshelf
Digging In
• A great way to think about an array is like a bookshelf.
• When you create a new array, you get a new bookshelf, but the shelves all start out empty.

• We can add things to the shelves and remove things by using an index.
• The index is the number of the shelf in the bookshelf (the allocated space inside an array).
• With an index, we could say "get the item on shelf 3" or "remove items from shelf 1 and 2".
• It's important to remember the index refers to the space itself, not what's inside the array.
• Like the example above, all array indexes start counting from 0

5 mins
Declaring Arrays
• Let's look at an example in code:
``````// This declares the array, note the square brackets
let vegetables = [];

// We can assign items to each shelf
vegetables[0] = "Cabbage";
vegetables[1] = "Turnip";
vegetables[2] = "Eggplant";
``````
• The above code creates a new array and adds three items to it.
``````// We can debug the array to see what's inside
console.log(vegetables);

// This would output
["Cabbage", "Turnip", "Eggplant"]
``````
• We can also declare an array and assign items to it at the same time:
``````// Note the square brackets and the comma between each item
let vegetables = ['Radish', 'Broccoli', 'Carrot', 'Squash'];
``````
10 mins
Accessing Arrays
• We can access items inside an array by using the index.
``````// If this is our array
let vegetables = ['Radish', 'Broccoli', 'Carrot', 'Squash'];

// We can access an item with the index
console.log(vegetables[1]);

// The debug above will output the item at index 1
Broccoli
``````
• We can also use the index to change items in the array:
``````// Remember that the index starts counting at 0
// So this code changes the second and fourth item in the array
vegetables[1] = "Tomato";
vegetables[3] = "Cauliflower";

// Then debug to see what is inside the array
console.log(vegetables);

// The debug above will output the updated array
• Try it out with a live example:
5 mins
Multiple Dimensions
Theory
• Prepare to stretch your brain into multiple dimensions ...

• What if you put an array inside an array?
• You'd get a two-dimensional array, like a bookshelf with slots vertically as well as horizontally.
• What if you put an array inside an array inside an array?
• You'd get a three-dimensional array, like a cube. Each dimension would have it's own index, such as x,y,z.

Array and axis – source O'Reilly

• Okay, then ...
• What if you put an array inside an array inside an array inside an array inside an array inside an array? Is that even possible?

• Yes! It's possible. You'd end up with a multi-dimensional array. It's hard to picture what it would look like, but the computer can store data in more than three dimensions.
• Accessing a multi-dimensional array might look like `myArray[u][v][w][x][y][z];`
• You can store data in as many dimensions as you need.
• Usually, only one or two dimensions is sufficient.
5 mins
Counting Arrays
Examples
• Sometimes we need to know the length of an array.
• To do this, we can use dot notation to call the .length method on the array.
``````let vegetables = ['Radish', 'Tomato', 'Carrot', 'Cauliflower'];

// Then debug to count the items in the array
console.log(vegetables.length);

// The debug above will output the length of the array
4
``````
• Once we know the length of the array, we can get the last item:
``````// This is the last item
vegetables[vegetables.length - 1];

// This is the first item
vegetables[0];
``````
5 mins
Looping Arrays
Examples
• We often want to do something with each item in an array.
• Display each item
• Count each item
• Randomize each item
• etc.
• To do this, we can loop over the array, starting at the first item (0) and going to the last (length - 1).
``````// This is our array
let vegetables = ['Radish', 'Tomato', 'Carrot', 'Cauliflower'];

// This will debug each item in the array
for (var i = 0; i <= length - 1; i++) {
console.log(vegetables[i]);
}
``````
• Loops often use the variable i to mean index, but you can use any variable name, i is just short and easy to remember.

120 mins
Evidence

• Check out some different types of word games:
• Mad Libs are a word game with a sentence where you ask friends to pick random nouns, verbs, etc. and then tell them what the sentence says at the end.
• Homework Excuse Generator comes up with a random creative reason for why your homework isn't done ;)
• Design Challenge Generator helps you think of random projects to do by combining different tasks and audiences.
• Random Name Generator combines lists of first and last names to come up with new random names.
• Random Plot Generator helps people come up with story ideas.
• Each of these games and apps use lists of things (nouns, verbs, names, excuses) and combine them to create a random scenario.
• Think of what kind of random generator you'd like to create. Feel free to be creative and have fun with it!
• Consider how you could use arrays and indexes (possibly even loops) to make your generator.
• Build your word generator in p5js and submit it as evidence of your learning in this unit.

## Embeds

There are no records to display.