FRI | Arrays

FRI | Arrays

September 20, 2024
9:15–12:00
Room 2420 (Marsio)

Inspiration #

Arrays #

Arrays enable you to store multiple values under a single variable name. JavaScript arrays are really flexible and allow you to do many things that are not possible with arrays in many other programming languages:

Declaring #

There are two ways to declare an array

let arr = new Array();
let arr = [];

Usually, you will use the second option and you can already add elements to the array.

let cities = ["Helsinki", "Espoo", "Vantaa"];

You can get each element in the array by using its index number in square brackets:

let cities = ["Helsinki", "Espoo", "Vantaa"];
console.log(cities[0]);
console.log(cities[1]);
console.log(cities[2]);
Remember that we start counting from 0!

It is recommended to use const when you declare arrays. But I will generally just use let in this class to keep things simple. You can learn more about const here.. If you want to start following best practices right from the beginning, you can start using const with arrays, but you can also use let for now (it will work just fine in all cases that we will run into during this course) and come back to this when you feel like you are ready to start learning JavaScript on a bit more in-depth level. We will come back to this topic later, since there are some confusing things about the differences between let and const that we are not really prepared to discuss in detail yet.

For example:

const cities = ["Helsinki", "Espoo", "Vantaa"];

Modifying the array #

You can change each individual element like you would a normal variable:

let cities = ["Helsinki", "Espoo", "Vantaa"];
cities[2] = "Rovaniemi"; 
console.log(cities); // now ["Helsinki", "Espoo", "Rovaniemi"]

Or you can add a new element:

let cities = ["Helsinki", "Espoo", "Vantaa"];
cities[3] = "Inari";
console.log(cities); // now ["Helsinki", "Espoo", "Vantaa", "Inari"]

Length of the array (length) #

You can get the total length of the array using length

let cities = ["Helsinki", "Espoo", "Vantaa"];
console.log(cities.length); // prints out 3

Using for loops with arrays #

Since we learned how to use for loops in the previous lesson, we are able to loop through all of the elements in an array in a convenient way.

We can use multiple arrays to store different properties. For example, let’s try to draw a bunch of randomly placed shapes on the screen. We can create an array for the x coordinates of our shapes.

let x = [];

We can use a for loop in the setup part of our code to fill the array with random values. Note that I added another variable called num so that we can easily change how many elements we have in the array.

let num = 10;
let x = [];

// this for loop goes to the setup function:
for(let i = 0; i < num; i++){
  x[i] = random(width);
}

This seems to work, so we can do the same thing for the y and the size s of the circles.

Once we learn about objects, we can do this in a more efficient way.

Now that we have a way to keep track of the coordinates of each circle using arrays, we can start modifying those values. For example, let’s add the random walk behavior to each circle.

for(let i = 0; i < num; i++){
  x[i] = x[i] + random(-3,3);
  y[i] = y[i] + random(-3,3);
  circle(x[i], y[i], s[i]);
}

Example: Lots of bouncing balls #

References #

Homework #

Practice using the for loop and arrays. You are free to experiment with any of the things we have learned so far but combine it with the for loop. Or make adjustments to the examples we created in class.

If you don’t have any ideas on what do do, you can try to do one of the following:

  1. Use the for loop to draw a grid of shapes that each should have a unique random attribute color, size, strokeWeight etc.
  2. Do the bouncing ball example, but with 1000 shapes that change their color individually when they hit the wall.