31:[] 2f:{"title":"Playing With Destructuring","cells":[{"id":0,"value":"# Playing With Destructuring","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"It helps me to learn a thing by making small examples. Here's one where I have seen libraries start to do this thing where they run a function as a creator for some code, and then pluck parts of it out via destructuring.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"Let's create a simple class that outputs attributes of a dog:\n","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"class Dog {\n constructor (name, breed, sex = \"unknown\"){\n this.name = name;\n this.breed = breed;\n this.animal = \"dog\"\n this.sex = sex;\n this.id = NID.nanoid()\n }\n\n get mood() {\n return this.genMood()\n }\n\n genMood() {\n return \"Happy\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"Now let's create a Dog instance:","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"myPet = new Dog(\"Fluffy\", \"poodle\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"Note that I didn't specify a `sex` value for the Dog class. You can specify Default values for missing params. Sweet!","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"Now we can use Object Destructuring to pluck out properties of the myPet","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"{\n const {name,breed,animal,id} = myPet; // pluck out the values\n const out = html`\n

My ${animal}'s name is ${name}, it is a ${breed}.

The number on it's tag is ${id}

\n `; // put them in an HTML string\n yield out; // return the HTML\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"This is cool! Very logical and provides a way to get values out of an object without knowing the order or having to dereference the object every time ==> `myPet.foo myPet.bar`","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"Now let's try array destructuring. Let's create a ton of Dogs!","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"makeDogs= (numDogs)=> {\n let retVal = [];\n for (let i =0; i< numDogs; i++){\n let gender = chance.gender();\n retVal[i] = new Dog(chance.name({gender: gender}), \"Dalmation\", gender)\n }\n return retVal;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"chance = new Chance()","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"dogArray = makeDogs(101)","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"Now let's get the first two dogs from the array.","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"{\n const [dog1, dog2, ...dogs] = dogArray;\n const out = html `

The first two dogs are ${dog1.name} and ${dog2.name}

`;\n yield out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"You can even use Object Destructuring on the destructured array!","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"{\n const [, , {name:name3, id:id3}, {name:name4, id:id4}, ...dogs] = dogArray;\n const out = html `\n

The third dog's name is ${name3} who's tag is ${id3}

The fourth dog's name is ${name4} who's tag is ${id4}

\n\n`;\n \n yield out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"Note you can rename the variable names so that you can pull out variables that have the same inner \"name\" but are being used together so the names don't conflict with each other. Notice I put empty commas to specify the fact that I wanted the 3rd and 4th elements, skipping the first and second.","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"I hope this has helped someone somewhere get an idea how useful and fun destructuring can be! Read more about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"NID = import('https://cdn.skypack.dev/nanoid@3.1.30?min')","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"Chance = (await import('https://cdn.skypack.dev/chance@1.1.8?min')).default","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}