This post is simply a mirror of the GitHub Gist I’ve written on this topic. It’s a nice reference for the occasionally confusing syntax of destructuring assignment in JavaScript.

Visit the Gist page

Find proper documentation on MDN:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Some general destructuring rules:

• If the right side of a colon is an identifier, the identifier is brought into scope (an alias) and refers to the object on the left side. (eg. see a2)
• If the right side of a colon is an object expression O, the left side refers to O’s name (key) within its parent object. (eg. see b1)
• If no alias is given, the identifier used to access the property is brought into scope.
• If we access a child of object O, and want to bring O into scope as well, we have to reference it separately from where we access its child. (see b3)

// object used for examples
const comment = {
  parent: {
    id: "0001",
    name: "issue1",

    author: {
      id: "01",
      name: "user1",
    },
  },

  body: "hello!",
};

/**************************
 * SECTION A: TOP LEVEL
 ***************************/

/** a1 - no alias **/
function a1() {
  const { parent, body } = comment;
  console.log(parent); // { id: '0001', name: 'issue1', author: { id: '01', name: 'user1' } }
  console.log(body); // hello!
}
// a1();

/** a2 - with alias for parent **/
function a2() {
  const { parent: commentParent, body } = comment;
  console.log(commentParent); // { id: '0001', name: 'issue1', author: { id: '01', name: 'user1' } }
  console.log(body); // hello!
  // console.log(parent);             // (ReferenceError: parent is not defined) - not brought into scope, since we access deeper than the level it exists on
}
// a2();

/**************************
 * SECTION B: SECOND LEVEL
 ***************************/

/** b1 - no aliases **/
function b1() {
  const {
    parent: { name },
    body,
  } = comment;
  console.log(name); // issue1
  console.log(body); // hello!
  // console.log(parent);             // (ReferenceError: parent is not defined)
}
// b1();

/** b2 - with alias for parent issue's name, and comment body **/
function b2() {
  const {
    parent: { name: issueName },
    body: commentBody,
  } = comment;
  console.log(issueName); // issue1
  console.log(commentBody); // hello!
  // console.log(parent);             // (ReferenceError: parent is not defined)
}
// b2();

/** b3 - alias on issue's name, bring parent into scope by referencing it separately **/
function b3() {
  const {
    parent,
    parent: { name: issueName },
  } = comment;
  console.log(issueName); // issue1
  console.log(parent); // { id: '0001', name: 'issue1', author: { id: '01', name: 'user1' } }
}
// b3();

/** b3 - alias on issue's name, and on separate reference to parent object **/
function b4() {
  const {
    parent: theParent,
    parent: { name: issueName },
  } = comment;
  console.log(issueName); // issue1
  console.log(theParent); // { id: '0001', name: 'issue1', author: { id: '01', name: 'user1' } }
}
// b4();

/**************************
 * SECTION C: THIRD LEVEL
 ***************************/

/** c1 - no aliases **/
function c1() {
  const {
    parent: {
      author: { name },
    },
    body,
  } = comment;
  console.log(name); // user1
  console.log(body); // hello
  // console.log(parent);             // (ReferenceError: parent is not defined)
}
// c1();

/** c2 - with alias for parent issue's author's name **/
function c2() {
  const {
    parent: {
      author: { name: authorName },
    },
    body,
  } = comment;
  console.log(authorName); // user1
  console.log(body); // hello!
  // console.log(parent);             // (ReferenceError: parent is not defined)
}
// c2();

/** c3 - alias everything **/
function c3() {
  const {
    parent: {
      author: { name: authorName, id: authorID },
    },
    body: commentBody,
  } = comment;
  console.log(authorID); // 01
  console.log(authorName); // user1
  console.log(commentBody); // hello!
  // console.log(parent);             // (ReferenceError: parent is not defined)
}
// c3();

/** c4 - oh no **/
function c4() {
  const {
    parent: theParent,
    parent: {
      name: issueName,
      id: issueID,
      author: issueAuthor,
      author: { name: authorName, id: authorID },
    },
    body: commentBody,
  } = comment;
  console.log(theParent); // { id: '0001', name: 'issue1', author: { id: '01', name: 'user1' } }
  console.log(issueName); // issue1
  console.log(issueID); // 0001
  console.log(issueAuthor); // { id: '01', name: 'user1' }
  console.log(authorName); // user1
  console.log(authorID); // 01
  console.log(commentBody); // hello!
}
// c4();