A quick video detailing how destructuring works with nested objects and arrays. Check out my ES6.io course for more!
Жүктеу.....
Пікірлер: 117
@JohannesBrodwall6 жыл бұрын
Wow! The most productive minutes I've spent all month. Thanks! 😀
@shafiq_ramli6 ай бұрын
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 👍🏻👍🏻
@MyDutchproductions4 жыл бұрын
I needed this... Honestly I still need it, but I wish I had found these videos before writing an insane loop.
@KuroiKyu6 жыл бұрын
Thanks Wes! Even when I think I know the topic I end up learning something
@Afewwilliams6 жыл бұрын
You're a legend Wes, thanks for all your effort 👍
@beingian3 жыл бұрын
You are amazing! i come back here at least once a week
@raymonweave71574 жыл бұрын
Great video, well explained and loved to watch it!
@writeandcodetime5 жыл бұрын
I certainly learnt a thing or two :) You are an amazing teacher. Thanks you
@alan6142 жыл бұрын
This was great! Thanks for this Wes!
@pratik666136 жыл бұрын
This is really useful. Thanks a ton Wes!
@javascriptwar95253 жыл бұрын
I was also facing this nested problems ... but from tomorrow no complain no demand Thankyou very much sir..🙌
@mparikshit5 жыл бұрын
Just Superb :). I love the way you explained with super energy :)
@lpdrummerboy Жыл бұрын
Exactly what I was looking for. Thanks!
@jasdn93bsad9926 жыл бұрын
3:29 destructure deeper 7:29 destructure array
@Shubham-jr8nc5 жыл бұрын
Best Explanation by An Advanced Teacher
@notthere836 жыл бұрын
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.
@MBehtemam6 жыл бұрын
Wow , Really Really amazing point that you mention , I love the way and I want to use it in my daily projects
@sergiyrudenko9054 жыл бұрын
Nice, really nice. Thanks Wes!
@rs140586 жыл бұрын
This is super helpfull Wes!! 😎👍 thanks for sharing!
@moosecouture16 жыл бұрын
This is also great when you combine it with Spread, Rest. Makes everything a lot cleaner
@kabirstetson5096
2 жыл бұрын
instablaster...
@manuelzamorano2580 Жыл бұрын
Thank you! I was so confused until I found this.
@trevorscan5 жыл бұрын
Wow. That was fantastic. Thank you
@Opyext2 жыл бұрын
this was very handy for me, thanks so much
@fikrisidqi71153 жыл бұрын
Great video, love it. Thank you sir!
@benyamin46342 жыл бұрын
cool tutorial so straightforward
@magdasokolovic3 жыл бұрын
great video. Love your enthusiasm :)
@erichepperlewp2 жыл бұрын
Nested destructuring...wow! SUBSCRIBED
@Souravbaranwal5 жыл бұрын
This was very helpful. Thanks a lot.
@zdarofMERGAITES3 жыл бұрын
Very well explained topic.
@vincentiusherie2 жыл бұрын
Never thought this is possible. Crazy.
@alirezamousavi79396 жыл бұрын
That was a great video. very useful. thanks bro.
@pavanrao29653 жыл бұрын
The most helpful video ever.period
@GiovanniOrlandoi76 жыл бұрын
This is great. Thank you!
@jaydeepkarena6 жыл бұрын
really good explanation 🎉
@JosephChambers6 жыл бұрын
Thanks Wes!
@sumantkanala6 жыл бұрын
You go Wes!
@AbhishekKumar-mq1tt6 жыл бұрын
Thank u for this awesome video
@jordanpio29453 жыл бұрын
Extremely helpful!!!
@TiagoSalemaG5 жыл бұрын
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.
@longtimedeveloper64989 ай бұрын
Thank you. I was immediately successful. Thank you!
@jordandoucet68872 жыл бұрын
This is super helpful 🙏
@Peter-ur8nv5 жыл бұрын
Very helpful, thank you
@Jay-eg7yt5 жыл бұрын
Love the display. Especially how the attributes are in italics. Which them are you using?
@emerson00016 жыл бұрын
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_
@dan-32685 жыл бұрын
Beautiful ❤️
@jessereyes-cortes119410 ай бұрын
Been using this technique for years... I finally know what the definition is haha
@ramin91343 жыл бұрын
really amazing ;)
@amabenuzoe2503 жыл бұрын
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?
@boulderdennis6 жыл бұрын
Thanks Wes. One question. Are Canadian shoes normal or weird or something else?
@UliTroyo
5 жыл бұрын
They're polite shoes!
@BowlineDandy6 жыл бұрын
Would be nice if that nested destructuring worked on imports specifically when importing json since Webpack can now tree shake those
@narwhalboobs6 жыл бұрын
Hey Wes, I was wondering what Visual Studio Code plugin you're using to display comments and attributes in a different font.
@WesBos
6 жыл бұрын
I wrote a bit of info here → wesbos.com/uses
@sagiriizumi82846 жыл бұрын
Thanks! :)
@Dan-codes2 жыл бұрын
Thank you.
@kamalpanhwar44876 жыл бұрын
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.
@UliTroyo
5 жыл бұрын
I just found it on Wes's blog; it's Operator Mono, but it's $200.
@rayraboypamisa13885 жыл бұрын
Wes, How can I map through that nested array?
@alialqahtani78416 жыл бұрын
good video thanks Wes Bos
@sreenivasulugattu29364 жыл бұрын
Thanks for the useful one. what if object is nested very deeply ? i mean more than 10 items deeper ??
@nikicamaksimovski99646 жыл бұрын
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 ?
@lynxlagoon3 жыл бұрын
dude, thanks
@devincustodio22586 жыл бұрын
Seems like sacrificing readability at the expense of compactness.
@conoroflanagan2908
6 жыл бұрын
Devin Custodio true, me and a colleague were tripped up on variables of similar names + 2 helpings of destructing.
@devincustodio2258
6 жыл бұрын
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. 😂
@adrianli7757
6 жыл бұрын
As someone with industry experience, I agree completely. Write code for others to read and understand, not for yourself to feel good about it.
@nazarm6215
5 жыл бұрын
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.
@cardbored_
2 жыл бұрын
@@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.
@imhappynow84714 жыл бұрын
thank you
@dragannovakovic98166 жыл бұрын
5:15 a Wild render prop Appears xD
@WesBos
6 жыл бұрын
@kissu_io6 жыл бұрын
Siiiiiiick video, sick sick sick. 💪🏻
@JoeWong815 жыл бұрын
thanks bro
@SinaGilassi4 жыл бұрын
Cool!
@gauravdawg5 жыл бұрын
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
@shaunakthakar30262 жыл бұрын
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.
@3ombieautopilot6 жыл бұрын
And we can also provide a default value for keys that are missing.
@redbeardhomes Жыл бұрын
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.
@philipdegendt562 жыл бұрын
Super 👍👌
@navinkandpal67672 жыл бұрын
Good 👍
@duckhorse25634 жыл бұрын
Asante.
@julianklumpers6 жыл бұрын
You can even omit properties/keys with rest spread and destructering. const { status, ...rest } = makeItem() Rest now only contains data.
@Nemcoification
5 жыл бұрын
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();.
@hsngsoftware43803 жыл бұрын
How to get only second element in the array ?
@vaasudhand32003 жыл бұрын
How do I rename the item1 and item2 variables?
@batuhankir84022 жыл бұрын
how can u make a table with all keys end values
@WebDevProfesh6 жыл бұрын
Is there a way to only destructure the second item in an array, without destructuring the first?
@abdulazizalabodi
6 жыл бұрын
yes, arrays are just objects in js. so you could do const {1:s2}= [1,2,3]
@WesBos
6 жыл бұрын
const [,secondItem] = someArray;
@davlewis2011
6 жыл бұрын
So if I wanted the like the 10th index, I’d have to put 9 ‘, ‘ and then my variable?
@abdulazizalabodi
6 жыл бұрын
no look at my answer.
@CoryTheSimmons
6 жыл бұрын
Really cool Abdulaziz, thanks.
@egougwu11234 жыл бұрын
how do u destructure into a variable please?
@hitheshkaverappa86344 жыл бұрын
What if i need 2nd element of array (item2)
@simonkalu4 жыл бұрын
True Bos
@augischadiegils.5109 Жыл бұрын
cool 😎
@TheNinad224 жыл бұрын
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?
@justinoneill28376 жыл бұрын
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
@moosecouture1
6 жыл бұрын
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.
@ethanstewart8957
6 жыл бұрын
Not sure I fully understand the question. Are you talking about having data, item, etc. also be variables when you're four levels deep?
@denns0r Жыл бұрын
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!
You may have to play this video at half the speed.
@Opyext2 жыл бұрын
ur so cool
@alexpro56702 жыл бұрын
Деструктуризация объектов и массивов
@sundarraaj2944 Жыл бұрын
How to add an object to a nested array of objects dynamically using distinct properties of an object
@germantoenglish898 Жыл бұрын
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.
Пікірлер: 117
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.
Thanks Wes! Even when I think I know the topic I end up learning something
You're a legend Wes, thanks for all your effort 👍
You are amazing! i come back here at least once a week
Great video, well explained and loved to watch it!
I certainly learnt a thing or two :) You are an amazing teacher. Thanks you
This was great! Thanks for this Wes!
This is really useful. Thanks a ton Wes!
I was also facing this nested problems ... but from tomorrow no complain no demand Thankyou very much sir..🙌
Just Superb :). I love the way you explained with super energy :)
Exactly what I was looking for. Thanks!
3:29 destructure deeper 7:29 destructure array
Best Explanation by An Advanced Teacher
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.
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!
This is super helpfull Wes!! 😎👍 thanks for sharing!
This is also great when you combine it with Spread, Rest. Makes everything a lot cleaner
@kabirstetson5096
2 жыл бұрын
instablaster...
Thank you! I was so confused until I found this.
Wow. That was fantastic. Thank you
this was very handy for me, thanks so much
Great video, love it. Thank you sir!
cool tutorial so straightforward
great video. Love your enthusiasm :)
Nested destructuring...wow! SUBSCRIBED
This was very helpful. Thanks a lot.
Very well explained topic.
Never thought this is possible. Crazy.
That was a great video. very useful. thanks bro.
The most helpful video ever.period
This is great. Thank you!
really good explanation 🎉
Thanks Wes!
You go Wes!
Thank u for this awesome video
Extremely helpful!!!
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.
Thank you. I was immediately successful. Thank you!
This is super helpful 🙏
Very helpful, thank you
Love the display. Especially how the attributes are in italics. Which them are you using?
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_
Beautiful ❤️
Been using this technique for years... I finally know what the definition is haha
really amazing ;)
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?
Thanks Wes. One question. Are Canadian shoes normal or weird or something else?
@UliTroyo
5 жыл бұрын
They're polite shoes!
Would be nice if that nested destructuring worked on imports specifically when importing json since Webpack can now tree shake those
Hey Wes, I was wondering what Visual Studio Code plugin you're using to display comments and attributes in a different font.
@WesBos
6 жыл бұрын
I wrote a bit of info here → wesbos.com/uses
Thanks! :)
Thank you.
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.
@UliTroyo
5 жыл бұрын
I just found it on Wes's blog; it's Operator Mono, but it's $200.
Wes, How can I map through that nested array?
good video thanks Wes Bos
Thanks for the useful one. what if object is nested very deeply ? i mean more than 10 items deeper ??
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 ?
dude, thanks
Seems like sacrificing readability at the expense of compactness.
@conoroflanagan2908
6 жыл бұрын
Devin Custodio true, me and a colleague were tripped up on variables of similar names + 2 helpings of destructing.
@devincustodio2258
6 жыл бұрын
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. 😂
@adrianli7757
6 жыл бұрын
As someone with industry experience, I agree completely. Write code for others to read and understand, not for yourself to feel good about it.
@nazarm6215
5 жыл бұрын
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.
@cardbored_
2 жыл бұрын
@@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.
thank you
5:15 a Wild render prop Appears xD
@WesBos
6 жыл бұрын
Siiiiiiick video, sick sick sick. 💪🏻
thanks bro
Cool!
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
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.
And we can also provide a default value for keys that are missing.
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.
Super 👍👌
Good 👍
Asante.
You can even omit properties/keys with rest spread and destructering. const { status, ...rest } = makeItem() Rest now only contains data.
@Nemcoification
5 жыл бұрын
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 ?
How do I rename the item1 and item2 variables?
how can u make a table with all keys end values
Is there a way to only destructure the second item in an array, without destructuring the first?
@abdulazizalabodi
6 жыл бұрын
yes, arrays are just objects in js. so you could do const {1:s2}= [1,2,3]
@WesBos
6 жыл бұрын
const [,secondItem] = someArray;
@davlewis2011
6 жыл бұрын
So if I wanted the like the 10th index, I’d have to put 9 ‘, ‘ and then my variable?
@abdulazizalabodi
6 жыл бұрын
no look at my answer.
@CoryTheSimmons
6 жыл бұрын
Really cool Abdulaziz, thanks.
how do u destructure into a variable please?
What if i need 2nd element of array (item2)
True Bos
cool 😎
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?
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
@moosecouture1
6 жыл бұрын
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.
@ethanstewart8957
6 жыл бұрын
Not sure I fully understand the question. Are you talking about having data, item, etc. also be variables when you're four levels deep?
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!
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 may have to play this video at half the speed.
ur so cool
Деструктуризация объектов и массивов
How to add an object to a nested array of objects dynamically using distinct properties of an object
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.
Neat but pretty hairy!