Can't believe now I get how nested object destructuring works! Reading the doc on MDN confuse the heck out of me because they didn't mention that the parent variable becomes undefined when destructuring its child object property. Good stuff 👍🏻👍🏻
I think it would've been great had you pointed out that one can of course write destructuring constructs across multiple lines. Because if you destructure nested objects and you write the destructuring the same way that you would write the object if you were to create it, it becomes very clear and easy to read.
Uaaau here I was all confused about this black magic fuckery just to find out it's actually rather simple and useful after watching this video. Kudos to Wes! You're the man.
At some point you are going to have to learn and move on, otherwise readable code means you'll end up with stagnant progress in technological innovation.
@@devincustodio2258 as someone with 20 years professional experience as a software engineer and now the director of the department at the agency I’m with, I’ve met many engineers with CS degrees who were half the programmer of some self taught developers. A degree doesn’t necessarily automatically mean someone is qualified in a real world position.
I'm testing this out on console in the same window as I'm watching the video. I love how simple and neat this is. - I was wondering how I could back up a level to get a parent of something already destructed. Kind of dummie, but if any else is wondering: *var data = { foo: { bar: 1 } };* Say we want to get to *bar* but still want *foo* to be available: *const { foo, foo: { bar } } = data;* *> foo* _{bar: 1}_ *> bar* _1_
I did not understand quite well how it helps in the example of react when you have to pass like 10 items as props.You will still have 10 lines of code.Any explanation ?
Although this is kind of cool, there are two things to consider: readabily is quite poor (which is my subjective opinion) but VERY IMPORTANT: THERE IS NO HANDLING OF UNDEFINED / FALLBACK VALUES. If you destructure only one level deep, you will get no errors if something is undefined, instead you can test it in ongoing code. When trying to destructure from undefined, you will get an error. So when working with uncertain data, like from an api, i would highly recommend NOT to do use deep nested destructuring!
Can you show how to render these nested objects into a table? I am easily able to console.log those items but I am struggling with the display of the tables. I can't use the map() function.
Great Video. Have been looking for this. Can someone help me with this question. How can i just pull only name from the items in the array. I don't need the other data just all the names inside the array.
Thanks Wes. I've been trying to send nested form input values using the window.fetch API, do I destructure the inputs or just send the form values as is?
can you suggest some good plugin for formatting the JSX code in VSCode ? I have components within components and each component have their own props, its such a waste of time manually pressing tab to fix the formatting to improve readability
Just in case anyone's wondering, the same is true for arrays like: const [ status, ...rest ] = makeItem(); Arrays have the added benefit of just being able to skip the variable entirely by just doing const [ , ...rest ] = makeItem();.
If the parent is an array with a nested object or visa versa and their children are arrays nested in objects or visa versa, it can all be so overwhelming and confusing.
Hi Wes, thanks a ton for this breakdown. I've still got a little confusion on how you make multiple variables from the same function and/or data set? For example, let's say I wanted to make *4 different variables* from the *makeItem()* function... how could I do that w/ out having to make *4 different makeItem()* functions? I put together a codepen here: codepen.io/oneezy/pen/VXWLXa?editors=0011
I do not see where your codepen is showing any changes... but if I understand your question... if it is like what is being shown here with destructuring... you could pass it an array and destructure the array `const [ one, two, three, four ] = [makeItem(), makeItem(), makeItem(), makeItem()]` Otherwise I do not know how it falls into the scope of this quick tutorial.
Wow! The most productive minutes I've spent all month. Thanks! 😀
Can't believe now I get how nested object destructuring works!
Reading the doc on MDN confuse the heck out of me because they didn't mention that the parent variable becomes undefined when destructuring its child object property.
Good stuff 👍🏻👍🏻
I needed this... Honestly I still need it, but I wish I had found these videos before writing an insane loop.
This is also great when you combine it with Spread, Rest. Makes everything a lot cleaner
instablaster...
Thanks Wes! Even when I think I know the topic I end up learning something
3:29 destructure deeper
7:29 destructure array
I was also facing this nested problems ... but from tomorrow no complain no demand
Thankyou very much sir..🙌
Thank you! I was so confused until I found this.
I think it would've been great had you pointed out that one can of course write destructuring constructs across multiple lines. Because if you destructure nested objects and you write the destructuring the same way that you would write the object if you were to create it, it becomes very clear and easy to read.
You are amazing! i come back here at least once a week
Best Explanation by An Advanced Teacher
Exactly what I was looking for. Thanks!
Uaaau here I was all confused about this black magic fuckery just to find out it's actually rather simple and useful after watching this video.
Kudos to Wes! You're the man.
Never thought this is possible. Crazy.
Nested destructuring...wow! SUBSCRIBED
cool tutorial so straightforward
You're a legend Wes, thanks for all your effort 👍
Seems like sacrificing readability at the expense of compactness.
Devin Custodio true, me and a colleague were tripped up on variables of similar names + 2 helpings of destructing.
Cono 52 but what do I know. I just have a degree in computer science. I'm not qualified at all to talk about this. 😂
As someone with industry experience, I agree completely. Write code for others to read and understand, not for yourself to feel good about it.
At some point you are going to have to learn and move on, otherwise readable code means you'll end up with stagnant progress in technological innovation.
@@devincustodio2258 as someone with 20 years professional experience as a software engineer and now the director of the department at the agency I’m with, I’ve met many engineers with CS degrees who were half the programmer of some self taught developers. A degree doesn’t necessarily automatically mean someone is qualified in a real world position.
The most helpful video ever.period
Thank you. I was immediately successful. Thank you!
this was very handy for me, thanks so much
This was great! Thanks for this Wes!
Been using this technique for years... I finally know what the definition is haha
I certainly learnt a thing or two :) You are an amazing teacher. Thanks you
Very well explained topic.
Great video, well explained and loved to watch it!
Just Superb :). I love the way you explained with super energy :)
This is really useful. Thanks a ton Wes!
Wow , Really Really amazing point that you mention , I love the way and I want to use it in my daily projects
Nice, really nice. Thanks Wes!
I'm testing this out on console in the same window as I'm watching the video. I love how simple and neat this is.
- I was wondering how I could back up a level to get a parent of something already destructed. Kind of dummie, but if any else is wondering:
*var data = { foo: { bar: 1 } };*
Say we want to get to *bar* but still want *foo* to be available:
*const { foo, foo: { bar } } = data;*
*> foo*
_{bar: 1}_
*> bar*
_1_
Extremely helpful!!!
I did not understand quite well how it helps in the example of react when you have to pass like 10 items as props.You will still have 10 lines of code.Any explanation ?
Wes, How can I map through that nested array?
Thanks Wes. One question. Are Canadian shoes normal or weird or something else?
They're polite shoes!
This is super helpful 🙏
Although this is kind of cool, there are two things to consider: readabily is quite poor (which is my subjective opinion) but VERY IMPORTANT: THERE IS NO HANDLING OF UNDEFINED / FALLBACK VALUES. If you destructure only one level deep, you will get no errors if something is undefined, instead you can test it in ongoing code. When trying to destructure from undefined, you will get an error. So when working with uncertain data, like from an api, i would highly recommend NOT to do use deep nested destructuring!
Wow. That was fantastic. Thank you
This is super helpfull Wes!! 😎👍 thanks for sharing!
Great video, love it. Thank you sir!
great video. Love your enthusiasm :)
Can you show how to render these nested objects into a table? I am easily able to console.log those items but I am struggling with the display of the tables. I can't use the map() function.
This was very helpful. Thanks a lot.
Hey Wes, I was wondering what Visual Studio Code plugin you're using to display comments and attributes in a different font.
I wrote a bit of info here → wesbos.com/uses
That was a great video. very useful. thanks bro.
Your font in editor is great, what is name of that font and color scheme? as I searched many but nothing resembling this font
typeface.
I just found it on Wes's blog; it's Operator Mono, but it's $200.
Thank you.
You go Wes!
Great Video. Have been looking for this. Can someone help me with this question.
How can i just pull only name from the items in the array. I don't need the other data just all the names inside the array.
This is great. Thank you!
really good explanation 🎉
5:15 a Wild render prop Appears xD
Love the display. Especially how the attributes are in italics. Which them are you using?
Thanks for the useful one.
what if object is nested very deeply ?
i mean more than 10 items deeper ??
And we can also provide a default value for keys that are missing.
Thanks Wes. I've been trying to send nested form input values using the window.fetch API, do I destructure the inputs or just send the form values as is?
really amazing ;)
Thanks Wes!
Thank u for this awesome video
Would be nice if that nested destructuring worked on imports specifically when importing json since Webpack can now tree shake those
i am having difficulty destructuring this array
I want output as R8
below is array
var obj = [
{
title: "buy meal",
isDone: false,
},
{
title: "come office on time",
isDone: false,
},
{
title: [
"BMW",
[
{ id: 01, name: "R8" },
{ id: 02, name: "r7" },
],
"maruti",
],
isDone: true,
},
];
can you help me?
can you suggest some good plugin for formatting the JSX code in VSCode ? I have components within components and each component have their own props, its such a waste of time manually pressing tab to fix the formatting to improve readability
Very helpful, thank you
thank you
dude, thanks
hey, how would destructor the event_general part:
const events = {
event_id: 57,
name: 'Event Name',
organiser: 'John',
category: 'Music',
event_general: [
{
venue: 'unknown',
country: '2',
isVirtual: true,
story: 'null'
}
]
};
You can even omit properties/keys with rest spread and destructering.
const { status, ...rest } = makeItem()
Rest now only contains data.
Just in case anyone's wondering, the same is true for arrays like: const [ status, ...rest ] = makeItem(); Arrays have the added benefit of just being able to skip the variable entirely by just doing const [ , ...rest ] = makeItem();.
How to get only second element in the array ?
Beautiful ❤️
How to add an object to a nested array of objects dynamically using distinct properties of an object
How do I rename the item1 and item2 variables?
Cool!
how can u make a table with all keys end values
Thanks! :)
Siiiiiiick video, sick sick sick. 💪🏻
Asante.
good video
thanks Wes Bos
You may have to play this video at half the speed.
Super 👍👌
If the parent is an array with a nested object or visa versa and their children are arrays nested in objects or visa versa, it can all be so overwhelming and confusing.
how do u destructure into a variable please?
thanks bro
What if i need 2nd element of array (item2)
Is there a way to only destructure the second item in an array, without destructuring the first?
yes, arrays are just objects in js. so you could do const {1:s2}= [1,2,3]
const [,secondItem] = someArray;
So if I wanted the like the 10th index, I’d have to put 9 ‘, ‘ and then my variable?
no look at my answer.
Really cool Abdulaziz, thanks.
Good 👍
True Bos
Деструктуризация объектов и массивов
cool 😎
Hi Wes, thanks a ton for this breakdown. I've still got a little confusion on how you make multiple variables from the same function and/or data set? For example, let's say I wanted to make *4 different variables* from the *makeItem()* function... how could I do that w/ out having to make *4 different makeItem()* functions?
I put together a codepen here: codepen.io/oneezy/pen/VXWLXa?editors=0011
I do not see where your codepen is showing any changes... but if I understand your question... if it is like what is being shown here with destructuring... you could pass it an array and destructure the array `const [ one, two, three, four ] = [makeItem(), makeItem(), makeItem(), makeItem()]` Otherwise I do not know how it falls into the scope of this quick tutorial.
Not sure I fully understand the question. Are you talking about having data, item, etc. also be variables when you're four levels deep?
ur so cool
Neat but pretty hairy!