Arrays

Our first mutable data type.

Vocabulary: mutable

mu·ta·ble /ˈmyo͞odəb(ə)l/

adjective: liable to change.

Vocabulary: immutable

im·mu·ta·ble /i(m)ˈmyo͞odəb(ə)l/

adjective: unchanging over time or unable to be changed.

Numbers, booleans, and strings are all immutable data types.

A given value never changes.

We can compute new values from existing values but the existing values stay what they are.

For instance

const s = 'foobar';
const s2 = s.substring(1).toUpperCase()

We computed the value 'OOBAR' and assigned it to s2.

But the value of s is still 'foobar'.

Variables can vary tho

let s = 'foobar';
let s2 = s;

Clearly s and s2 have the same value.

Now we do this.

s = s.substring(1);

What do you think the values of s and s2 are now?

» s

'oobar'

s has changed.

» s2

'foobar'

s2 has not changed.

This is why it’s so important to understand the difference between values and variables.

Values exist somewhere in the computer.

Variables are names that refer to those values.

Changing what a name refers to doesn’t have any effect on the value itself.

The values of mutable data types can change

Arrays

Arrays represent a collection of values.

Each element of the collection can be independently changed.

Syntax

[1, 2, 3, ‘foo’, true]

An array with five elements.

Values are enclosed in []s and separated by commas.

An empty array

[]

Index operator

Same as with strings: [].

const xs = [1, 2, 3, true, 'foo'];
xs[0] ⟹ 1
xs[1] ⟹ 2
xs[2] ⟹ 3
xs[3] ⟹ true
xs[4] ⟹ 'foo'

That we use []s both in the syntax for making an array and in the index operator, is either unfortunate or mnemonic, depending on your point of view.

Assigning to an element of an array

Assign to the first element of xs.

xs[0] = 'x'

After the assignment:

xs[0] ⟹ 'x'

xs ⟹ ['x', 2, 3, true, 'foo']

Arrays have a length property just like strings

» xs.length

5

» xs[xs.length - 1]

'foo'

I.e. the last element of the array

You can also add elements to an array

xs.push('another value')
xs ⟹ ['x', 2, 3, true, 'foo', 'another value']

push is a method on arrays but unlike substring, toLowerCase, and toUpperCase it modifies the value it is called on.

It also returns a value, namely the new length of the array.

And you can remove elements

xs.pop() ⟹ 'another value'
xs ⟹ ['x', 2, 3, true, 'foo']

pop is another method on arrays. Like push, it modifies the value it is called on and also returns a value, namely value being removed from the end of the array.

There are a bunch more methods on arrays.

MDN documentation

You don’t need to know any of these except the ones I’ve taught you about but you may find some of them useful as you start writing more complicated programs.

Arrays can be nested to create multidimensional arrays.

const ticTacToe = [
  [ 'X', 'O', 'O' ],
  [ 'O', 'X', '' ],
  [ 'X', '', 'O' ],
];

» ticTacToe[0]

['X', 'O', 'O']

» ticTacToe[0][0]

'X'

Some questions

What happens if you access an element of an array with [] that doesn’t exist?

What happens if you assign to an element of an array that doesn’t exist?

How does it effect the length?

What happens if you use a negative number as an index into an array?

What happens if you use a string as an index into an array?

Up next

Objects