Objects and Properties

Property Access

Read object fields with dot and bracket syntax.

property-access Dot syntax reads a known property name. Bracket syntax uses a string expression to choose which property to read.

Property Access

key
property_access.js
Replay: real traced execution (multi-file project)
const key = "pages";
const title = ({ title: "Guide", pages: 120, stock: 4 }).title;
const selected = ({ title: "Guide", pages: 120, stock: 4 })[key];

console.log("title=" + title);
console.log("key=" + key);
console.log("selected=" + selected);

const key = "title";
const title = ({ title: "Guide", pages: 120, stock: 4 }).title;
const selected = ({ title: "Guide", pages: 120, stock: 4 })[key];

console.log("title=" + title);
console.log("key=" + key);
console.log("selected=" + selected);

const key = "stock";
const title = ({ title: "Guide", pages: 120, stock: 4 }).title;
const selected = ({ title: "Guide", pages: 120, stock: 4 })[key];

console.log("title=" + title);
console.log("key=" + key);
console.log("selected=" + selected);

  1. key ← pages, title ← Guide, ({ title: "Guide", pages: 120, stock: 4 }).title ← Guide

    1const key→ pages = "pages"; //@key="title", "stock"2const title→ Guide = ({ title: "Guide", pages: 120, stock: 4 }).title→ Guide;3const selected→ 120 = ({ title: "Guide", pages: 120, stock: 4 })[key]→ 120;45console.log("title=" + titleGuide);6console.log("key=" + keypages);7console.log("selected=" + selected120);
    outputtitle=Guide
key=pages
selected=120

  1. key ← title, title ← Guide, ({ title: "Guide", pages: 120, stock: 4 }).title ← Guide

    1const key→ title = "title";2const title→ Guide = ({ title: "Guide", pages: 120, stock: 4 }).title→ Guide;3const selected→ Guide = ({ title: "Guide", pages: 120, stock: 4 })[key]→ Guide;45console.log("title=" + titleGuide);6console.log("key=" + keytitle);7console.log("selected=" + selectedGuide);
    outputtitle=Guide
key=title
selected=Guide

  1. key ← stock, title ← Guide, ({ title: "Guide", pages: 120, stock: 4 }).title ← Guide

    1const key→ stock = "stock";2const title→ Guide = ({ title: "Guide", pages: 120, stock: 4 }).title→ Guide;3const selected→ 4 = ({ title: "Guide", pages: 120, stock: 4 })[key]→ 4;45console.log("title=" + titleGuide);6console.log("key=" + keystock);7console.log("selected=" + selected4);
    outputtitle=Guide
key=stock
selected=4

Dot or Brackets

  1. The object stores title, pages, and stock.
  2. Dot syntax reads the known title property.
  3. key is pages.
  4. Bracket syntax reads the property named by key. | Access | Result | | --- | --- | | .title | Guide | | [pages] | 120 | | [stock] | 4 |

Exercise: property_access.js

Read one known property with dot syntax and one selected property with bracket syntax