Arrays and Tuples

Readonly Arrays

Readonly arrays make list inputs safer by preventing functions from mutating them.

readonly array `readonly number[]` describes an array that code can read but should not modify.

Readonly Arrays

extraValue
readonly.ts
Replay: real traced execution (multi-file project)
function firstTwo(values: readonly number[]): number[] {
    return values.slice(0, 2);
}

const extraValue: number = 9;
const numbers: number[] = [3, 6, extraValue];
const preview: number[] = firstTwo(numbers);
const sum: number = preview[0] + preview[1];

console.log(`preview=${preview.join(",")}`);
console.log(`sum=${sum}`);

function firstTwo(values: readonly number[]): number[] {
    return values.slice(0, 2);
}

const extraValue: number = 4;
const numbers: number[] = [3, 6, extraValue];
const preview: number[] = firstTwo(numbers);
const sum: number = preview[0] + preview[1];

console.log(`preview=${preview.join(",")}`);
console.log(`sum=${sum}`);

function firstTwo(values: readonly number[]): number[] {
    return values.slice(0, 2);
}

const extraValue: number = 12;
const numbers: number[] = [3, 6, extraValue];
const preview: number[] = firstTwo(numbers);
const sum: number = preview[0] + preview[1];

console.log(`preview=${preview.join(",")}`);
console.log(`sum=${sum}`);

  1. extraValue ← 9, numbers ← 3,6,9

    2    return values.slice(0, 2);3}45const extraValue→ 9: number = 9;  //@extraValue=4, 126const numbers→ 3,6,9: number[] = [3, 6, extraValue9];7const preview: number[] = firstTwo(numbers3,6,9);8const sum: number = preview[0] + preview[1];

  2. function firstTwo(values: readonly number[]): number[]

    1function firstTwo(values3,6,9: readonly number[]): number[] {2    return values3,6,9.slice(0, 2);3}

  3. preview ← 3,6, sum ← 9, preview[0] ← 3

    5const extraValue: number = 9;  //@extraValue=4, 126const numbers: number[] = [3, 6, extraValue];7const preview→ 3,6: number[] = firstTwo(numbers3,6,9);8const sum→ 9: number = preview[0]→ 3 + preview[1]6;910console.log(`preview=${preview3,6.join(",")}`);11console.log(`sum=${sum9}`);
    outputpreview=3,6
sum=9

  1. extraValue ← 4, numbers ← 3,6,4

    2    return values.slice(0, 2);3}45const extraValue→ 4: number = 4;6const numbers→ 3,6,4: number[] = [3, 6, extraValue4];7const preview: number[] = firstTwo(numbers3,6,4);8const sum: number = preview[0] + preview[1];

  2. function firstTwo(values: readonly number[]): number[]

    1function firstTwo(values3,6,4: readonly number[]): number[] {2    return values3,6,4.slice(0, 2);3}

  3. preview ← 3,6, sum ← 9, preview[0] ← 3

    5const extraValue: number = 4;6const numbers: number[] = [3, 6, extraValue];7const preview→ 3,6: number[] = firstTwo(numbers3,6,4);8const sum→ 9: number = preview[0]→ 3 + preview[1]6;910console.log(`preview=${preview3,6.join(",")}`);11console.log(`sum=${sum9}`);
    outputpreview=3,6
sum=9

  1. extraValue ← 12, numbers ← 3,6,12

    2    return values.slice(0, 2);3}45const extraValue→ 12: number = 12;6const numbers→ 3,6,12: number[] = [3, 6, extraValue12];7const preview: number[] = firstTwo(numbers3,6,12);8const sum: number = preview[0] + preview[1];

  2. function firstTwo(values: readonly number[]): number[]

    1function firstTwo(values3,6,12: readonly number[]): number[] {2    return values3,6,12.slice(0, 2);3}

  3. preview ← 3,6, sum ← 9, preview[0] ← 3

    5const extraValue: number = 12;6const numbers: number[] = [3, 6, extraValue];7const preview→ 3,6: number[] = firstTwo(numbers3,6,12);8const sum→ 9: number = preview[0]→ 3 + preview[1]6;910console.log(`preview=${preview3,6.join(",")}`);11console.log(`sum=${sum9}`);
    outputpreview=3,6
sum=9

Follow the Readonly Input

  1. extraValue starts as 9.
  2. numbers becomes [3, 6, 9].
  3. firstTwo(numbers) reads only the first two values.
  4. preview becomes [3, 6].
  5. sum is 3 + 6, so the output is preview=3,6 and sum=9. | extraValue | numbers | preview | sum | | --- | --- | --- | --- | | 9 | [3, 6, 9] | [3, 6] | 9 | | 4 | [3, 6, 4] | [3, 6] | 9 | | 12 | [3, 6, 12] | [3, 6] | 9 |

Exercise: readonly.ts

Reproduce preview=3,6 and sum=9, then use the pinned extraValue variants 4 and 12 to predict why the output still stays preview=3,6 and sum=9.