Arrays and Iteration

Spread Append

Add an element by building a new array.

spread-append The spread `...` copies an array's elements into a new array. Appending this way leaves the original array unchanged.

Spread Append

extra
spread_append.js
Replay: real traced execution (multi-file project)
const extra = 5;
const base = [1, 2, 3];
const grown = [...base, extra];

console.log("base=" + base.join(","));
console.log("grown=" + grown.join(","));
console.log("baseSize=" + base.length);

const extra = 1;
const base = [1, 2, 3];
const grown = [...base, extra];

console.log("base=" + base.join(","));
console.log("grown=" + grown.join(","));
console.log("baseSize=" + base.length);

const extra = 9;
const base = [1, 2, 3];
const grown = [...base, extra];

console.log("base=" + base.join(","));
console.log("grown=" + grown.join(","));
console.log("baseSize=" + base.length);

  1. extra ← 5, base ← 1,2,3, grown ← 1,2,3,5

    1const extra→ 5 = 5; //@extra=9, 12const base→ 1,2,3 = [1, 2, 3];3const grown→ 1,2,3,5 = [...base1,2,3, extra5];45console.log("base=" + base1,2,3.join(","));6console.log("grown=" + grown1,2,3,5.join(","));7console.log("baseSize=" + base.length3);
    outputbase=1,2,3
grown=1,2,3,5
baseSize=3

  1. extra ← 1, base ← 1,2,3, grown ← 1,2,3,1

    1const extra→ 1 = 1;2const base→ 1,2,3 = [1, 2, 3];3const grown→ 1,2,3,1 = [...base1,2,3, extra1];45console.log("base=" + base1,2,3.join(","));6console.log("grown=" + grown1,2,3,1.join(","));7console.log("baseSize=" + base.length3);
    outputbase=1,2,3
grown=1,2,3,1
baseSize=3

  1. extra ← 9, base ← 1,2,3, grown ← 1,2,3,9

    1const extra→ 9 = 9;2const base→ 1,2,3 = [1, 2, 3];3const grown→ 1,2,3,9 = [...base1,2,3, extra9];45console.log("base=" + base1,2,3.join(","));6console.log("grown=" + grown1,2,3,9.join(","));7console.log("baseSize=" + base.length3);
    outputbase=1,2,3
grown=1,2,3,9
baseSize=3

Follow the Spread

  1. base starts as [1, 2, 3].
  2. extra starts as 5.
  3. [...base, extra] copies the base values into a new array.
  4. The new grown array becomes [1, 2, 3, 5].
  5. base is unchanged, so baseSize stays 3. | value | output text | | --- | --- | | base | base=1,2,3 | | grown | grown=1,2,3,5 | | base.length | baseSize=3 |

Exercise: spread_append.js

Reproduce base=1,2,3, grown=1,2,3,5, and baseSize=3, then use the pinned extra variants 9 and 1 to predict grown=1,2,3,9 and grown=1,2,3,1 while base stays unchanged.