Arrays and Iteration

Iterating Object Keys

Walk an object's keys and read its values.

object-keys `Object.keys` returns an array of an object's property names. Looping those keys reads each value, here summing them into a total.

Iterating Object Keys

bonus
object_keys.js
Replay: real traced execution (multi-file project)
const bonus = 0;
const keys = Object.keys({ pen: 2, pad: 5, ink: 8 });
let total = 0;
for (const k of keys) {
  const price = ({ pen: 2, pad: 5, ink: 8 })[k];
  total += price + bonus;
}

console.log("count=" + keys.length);
console.log("total=" + total);

const bonus = 10;
const keys = Object.keys({ pen: 2, pad: 5, ink: 8 });
let total = 0;
for (const k of keys) {
  const price = ({ pen: 2, pad: 5, ink: 8 })[k];
  total += price + bonus;
}

console.log("count=" + keys.length);
console.log("total=" + total);

const bonus = 100;
const keys = Object.keys({ pen: 2, pad: 5, ink: 8 });
let total = 0;
for (const k of keys) {
  const price = ({ pen: 2, pad: 5, ink: 8 })[k];
  total += price + bonus;
}

console.log("count=" + keys.length);
console.log("total=" + total);

  1. bonus ← 0

    1const bonus→ 0 = 0; //@bonus=10, 1002const keys = Object.keys({ pen: 2, pad: 5, ink: 8 });

  2. keys ← pen,pad,ink

    1const bonus = 0; //@bonus=10, 1002const keys→ pen,pad,ink = Object.keys({ pen: 2, pad: 5, ink: 8 });3let total = 0;

  3. total ← 0

    1const bonus = 0; //@bonus=10, 1002const keys = Object.keys({ pen: 2, pad: 5, ink: 8 });3let total→ 0 = 0;4for (const k of keys) {

  4. price ← 2, ({ pen: 2, pad: 5, ink: 8 })[k] ← 2

    3let total = 0;4for (const k of keys) {5  const price→ 2 = ({ pen: 2, pad: 5, ink: 8 })[k]→ 2;6  total += price + bonus;
    values this steppenk

  5. total ← 2, price ← 2

    4for (const k of keys) {5  const price = ({ pen: 2, pad: 5, ink: 8 })[k];6  total += price→ 2 + bonus0;7}
    values this step2total

  6. price ← 5, ({ pen: 2, pad: 5, ink: 8 })[k] ← 5

    3let total = 0;4for (const k of keys) {5  const price→ 5 = ({ pen: 2, pad: 5, ink: 8 })[k]→ 5;6  total += price + bonus;
    values this steppadk

  7. total ← 7, price ← 5

    4for (const k of keys) {5  const price = ({ pen: 2, pad: 5, ink: 8 })[k];6  total += price→ 5 + bonus0;7}
    values this step7total

  8. price ← 8, ({ pen: 2, pad: 5, ink: 8 })[k] ← 8

    3let total = 0;4for (const k of keys) {5  const price→ 8 = ({ pen: 2, pad: 5, ink: 8 })[k]→ 8;6  total += price + bonus;
    values this stepinkk

  9. total ← 15, price ← 8

    4for (const k of keys) {5  const price = ({ pen: 2, pad: 5, ink: 8 })[k];6  total += price→ 8 + bonus0;7}
    values this step15total

  10. console.log("count=" + keys.length);

    6  total += price + bonus;7}89console.log("count=" + keys.length3);10console.log("total=" + total);
    outputcount=3

  11. console.log("total=" + total);

    9console.log("count=" + keys.length);10console.log("total=" + total15);
    outputtotal=15

  1. bonus ← 10

    1const bonus→ 10 = 10;2const keys = Object.keys({ pen: 2, pad: 5, ink: 8 });

  2. keys ← pen,pad,ink

    1const bonus = 10;2const keys→ pen,pad,ink = Object.keys({ pen: 2, pad: 5, ink: 8 });3let total = 0;

  3. total ← 0

    1const bonus = 10;2const keys = Object.keys({ pen: 2, pad: 5, ink: 8 });3let total→ 0 = 0;4for (const k of keys) {

  4. price ← 2, ({ pen: 2, pad: 5, ink: 8 })[k] ← 2

    3let total = 0;4for (const k of keys) {5  const price→ 2 = ({ pen: 2, pad: 5, ink: 8 })[k]→ 2;6  total += price + bonus;
    values this steppenk

  5. total ← 12, price ← 2

    4for (const k of keys) {5  const price = ({ pen: 2, pad: 5, ink: 8 })[k];6  total += price→ 2 + bonus10;7}
    values this step12total

  6. price ← 5, ({ pen: 2, pad: 5, ink: 8 })[k] ← 5

    3let total = 0;4for (const k of keys) {5  const price→ 5 = ({ pen: 2, pad: 5, ink: 8 })[k]→ 5;6  total += price + bonus;
    values this steppadk

  7. total ← 27, price ← 5

    4for (const k of keys) {5  const price = ({ pen: 2, pad: 5, ink: 8 })[k];6  total += price→ 5 + bonus10;7}
    values this step27total

  8. price ← 8, ({ pen: 2, pad: 5, ink: 8 })[k] ← 8

    3let total = 0;4for (const k of keys) {5  const price→ 8 = ({ pen: 2, pad: 5, ink: 8 })[k]→ 8;6  total += price + bonus;
    values this stepinkk

  9. total ← 45, price ← 8

    4for (const k of keys) {5  const price = ({ pen: 2, pad: 5, ink: 8 })[k];6  total += price→ 8 + bonus10;7}
    values this step45total

  10. console.log("count=" + keys.length);

    6  total += price + bonus;7}89console.log("count=" + keys.length3);10console.log("total=" + total);
    outputcount=3

  11. console.log("total=" + total);

    9console.log("count=" + keys.length);10console.log("total=" + total45);
    outputtotal=45

  1. bonus ← 100

    1const bonus→ 100 = 100;2const keys = Object.keys({ pen: 2, pad: 5, ink: 8 });

  2. keys ← pen,pad,ink

    1const bonus = 100;2const keys→ pen,pad,ink = Object.keys({ pen: 2, pad: 5, ink: 8 });3let total = 0;

  3. total ← 0

    1const bonus = 100;2const keys = Object.keys({ pen: 2, pad: 5, ink: 8 });3let total→ 0 = 0;4for (const k of keys) {

  4. price ← 2, ({ pen: 2, pad: 5, ink: 8 })[k] ← 2

    3let total = 0;4for (const k of keys) {5  const price→ 2 = ({ pen: 2, pad: 5, ink: 8 })[k]→ 2;6  total += price + bonus;
    values this steppenk

  5. total ← 102, price ← 2

    4for (const k of keys) {5  const price = ({ pen: 2, pad: 5, ink: 8 })[k];6  total += price→ 2 + bonus100;7}
    values this step102total

  6. price ← 5, ({ pen: 2, pad: 5, ink: 8 })[k] ← 5

    3let total = 0;4for (const k of keys) {5  const price→ 5 = ({ pen: 2, pad: 5, ink: 8 })[k]→ 5;6  total += price + bonus;
    values this steppadk

  7. total ← 207, price ← 5

    4for (const k of keys) {5  const price = ({ pen: 2, pad: 5, ink: 8 })[k];6  total += price→ 5 + bonus100;7}
    values this step207total

  8. price ← 8, ({ pen: 2, pad: 5, ink: 8 })[k] ← 8

    3let total = 0;4for (const k of keys) {5  const price→ 8 = ({ pen: 2, pad: 5, ink: 8 })[k]→ 8;6  total += price + bonus;
    values this stepinkk

  9. total ← 315, price ← 8

    4for (const k of keys) {5  const price = ({ pen: 2, pad: 5, ink: 8 })[k];6  total += price→ 8 + bonus100;7}
    values this step315total

  10. console.log("count=" + keys.length);

    6  total += price + bonus;7}89console.log("count=" + keys.length3);10console.log("total=" + total);
    outputcount=3

  11. console.log("total=" + total);

    9console.log("count=" + keys.length);10console.log("total=" + total315);
    outputtotal=315

Follow the Keys

  1. Object.keys returns pen, pad, and ink.
  2. The matching prices are 2, 5, and 8.
  3. The default bonus is 0.
  4. Each loop pass adds price + bonus.
  5. The script prints count=3 and total=15. | key | price | added with bonus 0 | | --- | --- | --- | | pen | 2 | 2 | | pad | 5 | 5 | | ink | 8 | 8 | | total | - | 15 |

Exercise: object_keys.js

Reproduce count=3 and total=15, then use the pinned bonus variants 10 and 100 to predict totals 45 and 315.