How to nest objects in javascript
Heres how JavaScript's Nested Object Destructuring works
Timecodes:
hey folks West boss here I want to do a
quick video on nested object
destructuring and nested object
destructuring in renaming now i have an
es6 style course you can check it out
and we have an entire section on just
destructuring module five and it goes
all into destructuring arrays because I
think destructuring is the one of the
best parts of es6 in general and I use
it absolutely every single day and in
destructuring itself there's all kinds
of things you can do with it you can
destructure
objects and arrays you can get into
nesting nesting renaming the values that
are inside of your objects in your
arrays you can provide fallbacks if the
values aren't there to some sane
defaults and I really really like it I
use it every single day however I do see
a lot of confusion around specifically
the nested destructuring syntax because
it gets a little bit scary with a lot of
curly brackets and whatnot so what I
want to do is show you specifically not
the entire part of destructuring I've
got a whole course on that but if you
want to know how we can use nested
object destructuring to pull out
variables that are often deeply nested
this is how we're gonna do it so what do
we got here what are we working with
well I've got a function here called
make item inside of that we are going to
return an object inside of that object
it's gonna have data and status and then
this data itself has an item property
which itself has a name and a size
property inside of it right like this is
fairly typical data that you get back
from an API where it's so deeply nested
you find yourself just diving for the
actual information that you want so
let's go right here and let's just say
constant response is equal to make item
and we'll just console.log the response
there good we get an object that has our
data and our status now the whole idea
behind the structuring is that if you
need to make multiple variables from an
object or an array you don't need to
have many lines you can pull out
multiple variables from that data in one
single go so if I wanted to have a data
variable in a status variable I don't
need to do something like this constants
that
equals response status and I'd have to
duplicate it over to data and that would
give us the data in the status
properties there we go we have our data
and we have our status okay but what if
I had like nine properties on this
object that I wanted variables I do this
all time and react where I want a
template with small little variables
instead of saying like this stop props
that data item name or something like
that so what we can do with these
structuring is get rid of those two
lines and we can immediately take the
object that gets returned from make item
and put it into its own variable so
we'll just say data and status and that
will give us two separate variables one
called data one called status and we're
able to go with every one we get alert
the status and that will obviously alert
live right okay that's great but what if
I actually want it to get the item
inside of that this is where nested
destructuring starts to get in right I
could console.log data item and that's
going to give me the actual item however
I want a variable called item that is
inside of this data item well you can D
structure infinitely as many levels deep
as you want so we can just say data is
now going to be structured into an item
variable and now this is going to cause
an error reference error data is not
defined why because we no longer have a
variable called data we now have a
variable called item and data is just
used to sort of get to it so to sort of
jump a couple levels deep
so we D structure data into its own sort
of temporary variable I guess it's it's
not going to be a proper variable and
then and then we get to our item so I
can just console.log item directly here
and now we get the actual item and we
still have that status variable that we
structured as well good well let's let's
go nuts let's go a little bit deeper
what if I wanted a name and a size
variable just outside of that item I
didn't necessarily care about the item
variable so we could do structure item
directly into name and size okay now we
get item is not defined because it's no
longer a variable
but we'd have console.log name in size
variables there we go we shoes is the
name and the size is still an object so
you thinking what I'm thinking let's go
even deeper and do structure the size
property into what is that the
properties US and EU US and EU and now
we don't have a size property we have a
US and an EU property which tells us
shoes 10 and 44 good so that is what
nested destructuring is one other thing
that I wanted to show you is the ability
to also rename them so let me show you
an example of some code that I'm working
on right here I have this function
called create item and what it does is
it creates an item now what happened is
that my the response that came back from
this create item API it gave me a
response data create item that's where
the actual item is and I needed to get
the item ID in order to to change the
page okay makes sense to me but the
problem was was that I was destructuring
out into just a top-level variable
called create item because that's the
the property that comes back on the
object and then I was trying to push the
router to create item dot ID and I ran
into a problem because what was
happening is that I was destructuring
the variable called create item and then
I also had a function in the same scope
called create item and they were
overwriting each other so I said okay
well I can't I can't do that
so what I did is I renamed the create
item property into a variable called
item and then I could go ahead there was
no naming conflict between the two of
those so as exactly a use case of when
you'd want to do that and you can just
use the colon property so maybe if I
wanted to say the US was normal and the
EU sizing was weird actually it's the
other way around the u.s. is weird
because why do you have ten and a half
and the EU is normal now I no longer
have
Abel's called us in you i have variables
called weird and normal and that should
give us the exact same values ten and
forty four beautiful beautiful i want to
show you real quick how did had to do it
with a raise as well someone's gonna
comment this out i'm gonna just say
Kant's response is equal to make array
of items and console.log the response
good now I just I just care about the
data so we could D structure the data
and now response is no longer there but
we just have data good and in this case
you notice how I'm not D structuring
status I don't care about it so it's
it's moving on to the next one now
inside of that I have items so I maybe I
want to D structure the items I want to
get to that beautiful and now maybe I
only care about the first item now how
do you destructure arrays you simply use
the square bracket notation instead of
the curly brackets so square bracket
item or maybe let's call it a item one
and then I say item one that gives us
item one and you could also do structure
item two into its own variable as well
item 1 item 2 so that is nested d
structuring and renaming hopefully you
learned a thing or two if this stuff is
a little bit over your head at check out
my es6 dot io course and that will bring
you up to speed with all that
destructuring has to offer and you can
work your way up to some of this more
complex nested d structuring hopefully
you enjoyed it and don't forget to hit
the like and subscribe button and I'll
see you in the next one
Related queries:
how to access nested objects in javascript
how to destructure nested objects in javascript
how to copy nested objects in javascript
how to filter nested objects in javascript
how to compare nested objects in javascript
how to merge nested objects in javascript
how to create nested objects in javascript
how to sort nested objects in javascript
how to clone nested objects in javascript
![JavaScript Tutorial in Hindi for Beginners [Part 36] - Nested Object in JavaScript](https://img.youtube.com/vi/QOk7lqHVbDg/mqdefault.jpg)
