• 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";


• 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

• 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'];
  

• 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
  ['Radish', 'Tomato', 'Carrot', 'Cauliflower']

• Try it out with a live example:
  

• You can also check out the W3Schools page for more info about arrays.

• 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.

• 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];
  

• 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.

• 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.