Arrays

Our first mutable data type.

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 x = 1 + 2

When we added 1 and 2 and got 3 neither the 1 nor the 2 changed to 3.

Strings are also immutable

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 though

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 it used to refer to.

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.

Mutability

Make an array and assign it to a variable.

const array1 = ['foo'];

Assign the same value to a new variable.

const array2 = array1;

Now mutate the array.

array1.push('bar');

» array1

['foo', 'bar']

array1 has changed, as we would expect.

» array2

['foo', 'bar']

array2 has also changed because it's just another name for the same array.

Another change

array2.push('baz');

» array1

['foo', 'bar', 'baz']

Sames as before: becaues array1 and array2 are just different names for the same array, changes made via one name are visible via the other.

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'

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.