Arrays
An array is an ordered set of values that you refer to with a name and an index.
For example, you could have an array called employees
that contains employees'
names indexed by their numerical employee number. So employee[1]
would be
employee number one, employee[2]
employee number two, and so on.
Creating Arrays
The following statements create equivalent arrays:
const array = new Array(element0, element1, ..., elementN);const array = Array(element0, element1, ..., elementN);const array = [element0, element1, ..., elementN];
The first two cases are challenging for TypeScript unless we define a type for
the array. For instance, const array = new Array('hello', 42)
will define an
array of string
and convert the 42
to a string. However,
const array = new Array(42, 'hello')
will be a TypeScript error. These are not
recommended approaches for creating arrays.
element0, element1, ..., elementN
is a list of values for the array's
elements. When these values are specified, the array is initialized with them as
the array's elements. The array's length property is set to the number of
arguments.
The bracket syntax is called an "array literal" or "array initializer." It's shorter than other forms of array creation and so is generally preferred.
To create an array with non-zero length but without any items, the following can
be used. Note we need to give the array
variable a type since we have no
initial values.
const array: number[] = []array.length = arrayLength
Populating an array
You can populate an array by assigning values to its elements. For example:
const employees: string[] = []employees[0] = 'Casey Jones'employees[1] = 'Phil Lesh'employees[2] = 'August West'
You might be surprised that we can change the values of the entries of an array
that is defined const employees: string[] = []
. This is because the const
refers to the variable name employees
, not to the values inside the
array. What const
prevents here is a statement such as
employees = ['Peter', 'Paul', 'Mary']
.
You can have an array variable that you can neither assign a new value nor change the contents of:
const cantChangeTheseValues: ReadonlyArray<number> = [42, 100, 52]cantChangeTheseValues[0] = 1
Referring to array elements
You refer to an array's elements by using the element's ordinal number. For example, suppose you define the following array:
const myArray = ['Wind', 'Rain', 'Fire']
You then refer to the first element of the array as myArray[0]
and the second
element of the array as myArray[1]
.
The index of the elements begins with zero.
Iterating over Arrays
A common operation is to iterate over the values of an array, processing each one in some way. The simplest way to do this is as follows:
const colors = ['red', 'green', 'blue']for (let index = 0; index < colors.length; index++) {console.log(colors[index])}
Note that the index
variable is a let
since we do need to reassign it
through the loop.
The forEach()
method provides another way of iterating over an array:
const colors = ['red', 'green', 'blue']colors.forEach(function (color) {console.log(color)})
Alternatively, You can shorten the code for the forEach parameter with Arrow Functions:
const colors = ['red', 'green', 'blue']colors.forEach(color => console.log(color))
This syntax is more compact, doesn't require maintaining an
index
, and is very much like syntax we will use when discussing front-end frameworks. Thus, at SDG, we will prefer this way to iterate over arrays.
Notice that we do not have an index. If we do want an index, we can add that as the second argument in our arrow function.
Note that we do not need to apply a type to color
or to index
. TypeScript
will determine that they must be of types string
and number
respectively.
const colors = ['red', 'green', 'blue']colors.forEach((color, index) =>console.log(`The color at position ${index} is ${color}`))
For more details on how to manipulate arrays, including adding and removing elements, see the quick reference guide on arrays.