Objects and Properties

Computed Properties

Build a property name from another value.

computed-property A computed property name goes inside brackets in an object literal. It lets a program decide the property name while the object is being created.

Computed Properties

example
computed_property.js
Replay: real traced execution (multi-file project)
const field = "height";
const amount = 5;
const value = ({ [field]: amount + 1 })[field];
const message = field + "=" + value;

console.log("field=" + field);
console.log("value=" + value);
console.log("message=" + message);

const field = "width";
const amount = 5;
const value = ({ [field]: amount + 1 })[field];
const message = field + "=" + value;

console.log("field=" + field);
console.log("value=" + value);
console.log("message=" + message);

const field = "depth";
const amount = 5;
const value = ({ [field]: amount + 1 })[field];
const message = field + "=" + value;

console.log("field=" + field);
console.log("value=" + value);
console.log("message=" + message);

const field = "height";
const amount = 2;
const value = ({ [field]: amount + 1 })[field];
const message = field + "=" + value;

console.log("field=" + field);
console.log("value=" + value);
console.log("message=" + message);

const field = "height";
const amount = 10;
const value = ({ [field]: amount + 1 })[field];
const message = field + "=" + value;

console.log("field=" + field);
console.log("value=" + value);
console.log("message=" + message);

  1. field ← height, amount ← 5, value ← 6, ({ [field]: amount + 1 })[field] ← 6

    1const field→ height = "height"; //@field="width", "depth"2const amount→ 5 = 5; //@amount=10, 23const value→ 6 = ({ [field]: amount + 1 })[field]→ 6;4const message→ height=6 = field→ height + "=" + value6;56console.log("field=" + fieldheight);7console.log("value=" + value6);8console.log("message=" + messageheight=6);
    outputfield=height
value=6
message=height=6

  1. field ← width, amount ← 5, value ← 6, ({ [field]: amount + 1 })[field] ← 6

    1const field→ width = "width";2const amount→ 5 = 5;3const value→ 6 = ({ [field]: amount + 1 })[field]→ 6;4const message→ width=6 = field→ width + "=" + value6;56console.log("field=" + fieldwidth);7console.log("value=" + value6);8console.log("message=" + messagewidth=6);
    outputfield=width
value=6
message=width=6

  1. field ← depth, amount ← 5, value ← 6, ({ [field]: amount + 1 })[field] ← 6

    1const field→ depth = "depth";2const amount→ 5 = 5;3const value→ 6 = ({ [field]: amount + 1 })[field]→ 6;4const message→ depth=6 = field→ depth + "=" + value6;56console.log("field=" + fielddepth);7console.log("value=" + value6);8console.log("message=" + messagedepth=6);
    outputfield=depth
value=6
message=depth=6

  1. field ← height, amount ← 2, value ← 3, ({ [field]: amount + 1 })[field] ← 3

    1const field→ height = "height";2const amount→ 2 = 2;3const value→ 3 = ({ [field]: amount + 1 })[field]→ 3;4const message→ height=3 = field→ height + "=" + value3;56console.log("field=" + fieldheight);7console.log("value=" + value3);8console.log("message=" + messageheight=3);
    outputfield=height
value=3
message=height=3

  1. field ← height, amount ← 10, value ← 11, ({ [field]: amount + 1 })[field] ← 11

    1const field→ height = "height";2const amount→ 10 = 10;3const value→ 11 = ({ [field]: amount + 1 })[field]→ 11;4const message→ height=11 = field→ height + "=" + value11;56console.log("field=" + fieldheight);7console.log("value=" + value11);8console.log("message=" + messageheight=11);
    outputfield=height
value=11
message=height=11

Name the Field at Runtime

  1. field starts as height.
  2. amount starts as 5.
  3. { [field]: amount + 1 } creates a height property.
  4. Reading [field] returns 6. | Name part | Value | | --- | --- | | field | height | | amount + 1 | 6 | | record[field] | 6 |

Exercise: computed_property.js

Create an object with a computed property name and print the selected value