Destructuring: opening up a data structure through a variable.
Destructuring is an amorphous idea because it can do so much in so many ways. I fumbled this idea at first until I realized you are essentially creating a mirror through a variable.
Arrays are the simplest to understand because you do exactly that. Create a variable and assign it to an array. Then assign variables in an array and have it equal to that original array. It will assign the variables in the mirror array to the variables in the destructured array.
let foo = ["this", "is", "foo", "bar"]let [that, was, faz, baz] = foo
As you can see above the new variables in line two point to the mirror values on line one. So that will be assigned to the string “this” and was is assigned to “is”. By Destructuring you create a mirror through a variable and can access that “Universe” through it.
ES6 was implemented for a reason to make the language better. That means you can predict what is going to happen. If you don’t remember what is going on in destructuring you can guess and probably be right.
var [first, second, third] = someArray; I don’t know what “someArray” is but I don’t have to. I can still tell you that first is now the value of the first element in “someArray”
Destructuring Objects is slightly different but still intuitive. If you know the key to the key:value pair you can get access directly to the value through the key.
let obj = {year: 1,"two years": "Two",foo: { foo: "bar" }}let foo = obj
Above foo will now be directly assigned to the value it contained within the object. Instead of using obj.foo to pull out the value of {foo: “bar”} you can simply use foo. This will now be directly be {foo: “bar”}. Again the idea of a mirror through a variable stands. Here the variable is the the obj itself. JavaScript will now know to look inside of obj and pull out the foo key giving you the variable.
There are a few other tricks this will provide you that are more afterthoughts. For example you with array Destructuring you can skip values you don’t want with a space and a comma.
let someArray = [1,2,3]let [first, , third] = someArray;
Now the the second item in the array will be passed over. first will be 1 and third will be 3. You can go to the MDN and get all the details if you have questions.
Beyond getting things to work its paramount to have a deep understanding of what the code is doing and why. This freecodecamp has a perfect article on just that.
This gives your a great understanding of what the code is doing. So now I can understand if I want to destructure an object I need to create an empty object literal {} to represent the object I’m destructuring. Then I literally only have to put the key into that empty object and assign it to the destructuring object. Javascript ES6 will look into the object, find the key, and assign the bare word variable to the value.
const record = { payPerHour: 100,
job: 'developer' }const { payPerHour } = recordpayPerHour
//=> 100
Now you can get the value of payPerHour by just typing it despite it being inside of the record object. Without the destructure you need to use the record.payPerHour to access the value.
