Objects and Properties

Nested Objects

Read values inside an object inside another object.

nested-objects Nested objects model structured data. Each dot moves one level deeper into the shape.

Nested Objects

city
nested_objects.js
Replay: real traced execution (multi-file project)
const city = "Austin";
const userName = ({ user: { name: "Mina", profile: { city: city } } }).user.name;
const homeCity = ({ user: { name: "Mina", profile: { city: city } } }).user.profile.city;
const badge = userName + "@" + homeCity;

console.log("user=" + userName);
console.log("city=" + homeCity);
console.log("badge=" + badge);

const city = "Boston";
const userName = ({ user: { name: "Mina", profile: { city: city } } }).user.name;
const homeCity = ({ user: { name: "Mina", profile: { city: city } } }).user.profile.city;
const badge = userName + "@" + homeCity;

console.log("user=" + userName);
console.log("city=" + homeCity);
console.log("badge=" + badge);

const city = "Denver";
const userName = ({ user: { name: "Mina", profile: { city: city } } }).user.name;
const homeCity = ({ user: { name: "Mina", profile: { city: city } } }).user.profile.city;
const badge = userName + "@" + homeCity;

console.log("user=" + userName);
console.log("city=" + homeCity);
console.log("badge=" + badge);

  1. city ← Austin, userName ← Mina, ({ user: { name: "Mina", profile: { city: city } } }).user.name ← Mina

    1const city→ Austin = "Austin"; //@city="Boston", "Denver"2const userName→ Mina = ({ user: { name: "Mina", profile: { city: city } } }).user.name→ Mina;3const homeCity→ Austin = ({ user: { name: "Mina", profile: { city: city } } }).user.profile.city→ Austin;4const badge→ Mina@Austin = userName→ Mina + "@" + homeCityAustin;56console.log("user=" + userNameMina);7console.log("city=" + homeCityAustin);8console.log("badge=" + badgeMina@Austin);
    outputuser=Mina
city=Austin
badge=Mina@Austin
    values this step[object Object]({ user: { name: "Mina", profile: { city: city } } }).user[object Object]({ user: { name: "Mina", profile: { city: city } } }).user.profile

  1. city ← Boston, userName ← Mina, ({ user: { name: "Mina", profile: { city: city } } }).user.name ← Mina

    1const city→ Boston = "Boston";2const userName→ Mina = ({ user: { name: "Mina", profile: { city: city } } }).user.name→ Mina;3const homeCity→ Boston = ({ user: { name: "Mina", profile: { city: city } } }).user.profile.city→ Boston;4const badge→ Mina@Boston = userName→ Mina + "@" + homeCityBoston;56console.log("user=" + userNameMina);7console.log("city=" + homeCityBoston);8console.log("badge=" + badgeMina@Boston);
    outputuser=Mina
city=Boston
badge=Mina@Boston
    values this step[object Object]({ user: { name: "Mina", profile: { city: city } } }).user[object Object]({ user: { name: "Mina", profile: { city: city } } }).user.profile

  1. city ← Denver, userName ← Mina, ({ user: { name: "Mina", profile: { city: city } } }).user.name ← Mina

    1const city→ Denver = "Denver";2const userName→ Mina = ({ user: { name: "Mina", profile: { city: city } } }).user.name→ Mina;3const homeCity→ Denver = ({ user: { name: "Mina", profile: { city: city } } }).user.profile.city→ Denver;4const badge→ Mina@Denver = userName→ Mina + "@" + homeCityDenver;56console.log("user=" + userNameMina);7console.log("city=" + homeCityDenver);8console.log("badge=" + badgeMina@Denver);
    outputuser=Mina
city=Denver
badge=Mina@Denver
    values this step[object Object]({ user: { name: "Mina", profile: { city: city } } }).user[object Object]({ user: { name: "Mina", profile: { city: city } } }).user.profile

Walk Into the Shape

  1. The outer object has a user object.
  2. user.name is Mina.
  3. user.profile.city is Austin.
  4. The badge combines both values as Mina@Austin.
user -> name -> Mina
user -> profile -> city -> Austin

Exercise: nested_objects.js

Read a nested user name and city, then print a name-at-city badge