Time 2.7 hrs

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




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


Learner Outcomes
Students will:
  • ...
Competency Focus
  • ...
Interdisciplinary Connections
  • ...
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Any CC attribution, thanks, credit, etc.

This page requires you to be logged in to access it. Please login and try again.
5 mins
  • 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
    // 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
    // The debug above will output the item at index 1
  • 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
    // The debug above will output the updated array
    ['Radish', 'Tomato', 'Carrot', 'Cauliflower']
  • Try it out with a live example:
  • You can also check out the W3Schools page for more info about arrays.
5 mins
Multiple Dimensions
  • 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
  • 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
    // The debug above will output the length of the array
  • 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
5 mins
Looping Arrays
  • 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++) {
  • 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
Your Word Generator

  • 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.
There are no records to display.
Powered by Gibbon v26.0.00dev | © Ross Parker 2010-2023
Created under the GNU GPL at ICHK | Credits | Translators