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 v27.0.00dev

Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
Copyright © Gibbon Foundation 2010-2024 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
Created under the GNU GPL | Credits | Translators | Support