Values, Types, and Expressions

Arrays and Objects

Hold values in an array and an object.

array-object An array holds values by position and an object holds them by name. Reading an element or field returns a plain value; `JSON.stringify` shows an object as readable text.

Arrays and Objects

x
array_object.js
Replay: real traced execution (multi-file project)
const x = 3;
const point = { x: x, y: 4 };
const items = [10, 20, 30];
const shown = JSON.stringify(point);
const sum = point.x + items[2];

console.log("point=" + shown);
console.log("item=" + items[1]);
console.log("sum=" + sum);

const x = 1;
const point = { x: x, y: 4 };
const items = [10, 20, 30];
const shown = JSON.stringify(point);
const sum = point.x + items[2];

console.log("point=" + shown);
console.log("item=" + items[1]);
console.log("sum=" + sum);

const x = 7;
const point = { x: x, y: 4 };
const items = [10, 20, 30];
const shown = JSON.stringify(point);
const sum = point.x + items[2];

console.log("point=" + shown);
console.log("item=" + items[1]);
console.log("sum=" + sum);

  1. x ← 3, point ← [object Object], items ← 10,20,30, shown ← {"x":3,"y":4}

    1const x→ 3 = 3; //@x=1, 72const point→ [object Object] = { x: x3, y: 4 };3const items→ 10,20,30 = [10, 20, 30];4const shown→ {"x":3,"y":4} = JSON.stringify(point[object Object]);5const sum→ 33 = point.x→ 3 + items[2]30;67console.log("point=" + shown{"x":3,"y":4});8console.log("item=" + items[1]20);9console.log("sum=" + sum33);
    outputpoint={"x":3,"y":4}
item=20
sum=33

  1. x ← 1, point ← [object Object], items ← 10,20,30, shown ← {"x":1,"y":4}

    1const x→ 1 = 1;2const point→ [object Object] = { x: x1, y: 4 };3const items→ 10,20,30 = [10, 20, 30];4const shown→ {"x":1,"y":4} = JSON.stringify(point[object Object]);5const sum→ 31 = point.x→ 1 + items[2]30;67console.log("point=" + shown{"x":1,"y":4});8console.log("item=" + items[1]20);9console.log("sum=" + sum31);
    outputpoint={"x":1,"y":4}
item=20
sum=31

  1. x ← 7, point ← [object Object], items ← 10,20,30, shown ← {"x":7,"y":4}

    1const x→ 7 = 7;2const point→ [object Object] = { x: x7, y: 4 };3const items→ 10,20,30 = [10, 20, 30];4const shown→ {"x":7,"y":4} = JSON.stringify(point[object Object]);5const sum→ 37 = point.x→ 7 + items[2]30;67console.log("point=" + shown{"x":7,"y":4});8console.log("item=" + items[1]20);9console.log("sum=" + sum37);
    outputpoint={"x":7,"y":4}
item=20
sum=37

Follow the Values

  1. x starts at 3.
  2. point becomes {"x":3,"y":4}.
  3. items[1] reads 20 for the printed item.
  4. items[2] is 30, so sum = point.x + items[2] becomes 33.
  5. The program prints point={"x":3,"y":4}, item=20, and sum=33. | x | point text | item | sum | | --- | --- | --- | --- | | 1 | {"x":1,"y":4} | 20 | 31 | | 3 | {"x":3,"y":4} | 20 | 33 | | 7 | {"x":7,"y":4} | 20 | 37 |

Exercise: array_object.js

Reproduce sum=33, then use the pinned x values 1 and 7 to predict the point text and sum.