Arrays

Arrays are lists of values. These values can be of all data types and one array can even contain different data types. It is often very useful to store multiple values inside one variable; for example, a list of students, groceries, or test scores.

Creating arrays:

The simplest way to create an array in JavaScript is enclosing a comma-separated list of values in square brackets ([]), as shown in the following

 
let myArray = [element0, element1, ..., elementN];

Array can also be created using the Array() constructor as shown in the following syntax. However, for the sake of simplicity previous syntax is recommended.

let myArray = new Array(element0, element1, ..., elementN);

let fruits = ["Apple", "Orange", "Banana", "Orange"];

Accessing elements

We can access array elements by referencing the array's index. JavaScript assigns an index to every value of the array. The first value is assigned the position of 0, the second 1, the third 2, and so on. If we want to call a specific value based on its position in the array, we can use the name of our array, add square brackets to the end, and put the index we want to access between the square brackets.

let fruits = ["Apple", "Orange", "Banana", "Orange"];
document.write(fruits [1]);  // writes Orange to the document.

Overwriting elements

The elements in an array can be overwritten. This can be done by accessing a certain element using the index and assigning a new value:

let fruits = ["Apple", "Orange", "Banana", "Orange"];
fruits [1] = "Papaya";
document.write(cars[1]); // writes Papaya to the document.

Built-in length property

Arrays have a very useful built-in property: length. This will return the number of values that the array has:

let colors = ["black", "orange", "pink"];
let fruits = ["Apple", "Orange", "Banana", "Orange"];

document.write("Length of colors:  " + colors.length); 
document.write("Length of fruits:  " + fruits.length); 

Note: The Array length is one higher than the maximum index because the index of the array starts at 0, but when determining the length, we look at the number of elements.

Use the length to access the last element of the array:

lastElement = colors[colors.length - 1];

Looping Through Array Elements

We can use for loop, for-of and for-in loops to access each element of an array in sequential order.

Using for loop:

let fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
 
// Iterates over array elements
for(let i = 0; i < fruits.length; i++) {    
    document.write(fruits[i] + "
"); // Print array element
}

Examples

function setup() {
createCanvas(600,600);
}

function draw() {
let colors = ["red", "green", "purple", "orange", "black"];
var randomNum = parseInt(random(0,5));
console.log(randomNum);
flower(random(width),random(height), colors[randomNum], random(1,4));
}

function flower(x,y, clr, scale) {
fill('yellow');
circle(x, y, 100/scale);
fill(clr);
circle(x, y - 50/scale, 50/scale);
circle(x + 50/scale, y, 50/scale);
circle(x, y + 50/scale, 50/scale);
circle(x - 50/scale, y, 50/scale);
}