Lesson 8 · 8 of 20

Arrays: lists of values · JavaScript

Store lists in JavaScript arrays: indexes from 0, length, changing elements, looping with for and for...of, and arrays of arrays.

JavaScript · Arrays: lists of values in DMarlon Studio: the example's code and its output in the terminal

An array is an ordered list of values in square brackets, separated by commas. fruits holds four strings and `length` tells you how many there are.

Each element has a position, its index, starting at 0: fruits[0] is the first and fruits[fruits.length - 1] the last. Ask for a position that does not exist, like fruits[10], and you get undefined, not an error.

The index also lets you change an element: fruits[1] = "kiwi". Notice that fruits is a const and can still be modified: const stops you assigning another array to the variable, not changing what is inside.

There are two ways to loop over an array. The classic for uses the index i from 0 to length - 1 and adds up the temperatures for the average. `for...of` gives you each value directly, without indexes, and reads better when you do not need the position, as when counting the days of 22 degrees or more.

An array can hold other arrays: the noughts and crosses board is a list of three rows, and board[1][1] is the centre square (row 1, column 1).

Code · main.js

// An array is an ordered list inside [ ].const fruits = ["apple", "banana", "cherry", "mango"];console.log(fruits);console.log("How many:", fruits.length);// Positions (indexes) start at 0.console.log("First:", fruits[0], "| Last:", fruits[fruits.length - 1]);console.log("Position 10:", fruits[10]);// Change an element through its index.fruits[1] = "kiwi";console.log("After the change:", fruits);// An array of numbers: one week of temperatures.const temps = [18, 21, 19, 24, 26, 22, 17];let sum = 0;for (let i = 0; i < temps.length; i++) {  sum += temps[i];}console.log("Average temperature:", (sum / temps.length).toFixed(1));// for...of goes through the values directly, without indexes.let warmDays = 0;for (const t of temps) {  if (t >= 22) warmDays++;}console.log("Days at 22 or more:", warmDays);// An array of arrays: a noughts and crosses board.const board = [["X", "O", "X"], [" ", "X", "O"], ["O", " ", "X"]];console.log("Centre square:", board[1][1]);for (const row of board) console.log(row);

Output · node main.js

[ 'apple', 'banana', 'cherry', 'mango' ]
How many: 4
First: apple | Last: mango
Position 10: undefined
After the change: [ 'apple', 'kiwi', 'cherry', 'mango' ]
Average temperature: 21.0
Days at 22 or more: 3
Centre square: X
[ 'X', 'O', 'X' ]
[ ' ', 'X', 'O' ]
[ 'O', ' ', 'X' ]

Key points

Indexes start at 0; the last one is length - 1.
A position that does not exist gives undefined.
A const array can be modified, but not reassigned.
for...of goes through the values without indexes.

Exercise

Add an array with five exam grades and print the highest and lowest (looping with for...of) and the average with one decimal.