Created
August 4, 2018 16:44
-
-
Save GeordieP/6cb735d0472d3654a6948b82de25e3b0 to your computer and use it in GitHub Desktop.
Helpful rules and examples for object destructuring assignment in JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Geordie P. (github/GeordieP) | |
Find proper documentation on MDN: | |
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment | |
Some general destructuring rules | |
Gist viewers: Feel free to leave a comment suggesting more, or corrections/improvements to these! | |
--------------------------------- | |
- 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(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment