De Structuring Objects | Table O Contents

Reed Barger sez we are creating variables here … not Objects directly …

Note. The Flammarion Logo Badge in the page header above is an .svg image file set to the dimensions of 5% width, auto height, and zoom. Go ahead and test the zoom-out feature by hovering over the badge to engage the expansion of the image.

De-structuring Objects

Hint. The object assigned to const user stores the original content as key-value pairs …

The Code

const user = {
  name: "Reed",
  username: "ReedBarger",
  email: "reed@gmail.com",
  details: {
    title: "Programmer"
  }
};

// What happens to the old `const user = this object` and its contents?

// Create new variables `username` and `email`

// Store as variable `user` constant consisting of the internal elements of `username` and `email`

const { username, email } = user;

function displayUser() {
  console.log(`Username: ${username}, Email: ${email}`);
}

// Run the function
displayUser()

Display User Bio

// Original Object
const user = {
  name: "Reed",
  username: "ReedBarger",
  email: "reed@gmail.com",
  details: {
    title: "Programmer"
  }
};

const { name } = user;

function displayUserBio() {
  console.log(`${name}`);
}

// Run the function
displayUserBio()

Last Subtitle

More to come …

Note. The above synopsis was derived from a video lecture written, produced and performed by …

Reed Barger: [1].

For additional reference on the topic of De-structuring see the Mozilla Developer Network: [2]

For a working Internet development platform for Javascript Closures see Scrimba: [3]

  1. Javascript: The Complete Developer, 2020

  2. Mozilla Developer Network

  3. Scrimba Javascript Developer Platform

Support

Please support the co-workers who aggregate the Source Links for our projects.

Patreon

Like what you see in this project? If so, then support the authors and machine-elves who aggregate the source links and pages for our projects via Patreon.