Rest and spread are important syntaxes to know,
now I want to dive into another important feature and that is destructuring.
Now let me comment out this code down there and let's begin with object
destructuring. I got my person object and now let's say we have some code where I only need the name,
so I have a new function, printName let's say
and that actually takes the full person object because for whatever reason we write, wrote it like this
or we simply have a function where we are able to get multiple arguments or a full object because some
third party package always gives us that person we can't change that,
so we get the person here and I only want to console log person.name.
Now that is totally fine of doing it like this,
I can now execute printName here,
now I need to pass a person here,
now to avoid naming confusion, you can name this here however you want.
So here we could name it person data
and inside here we use person data
so that function does not use that person,
it just expects any person data,
we then call that function and pass in that person as an argument.
And now if I execute that file, I see Max here and
this is stemming from this line here.
Now of course we can absolutely do it like that and we always get person data because again let's say
this is a function which is actually called by some third party package which is a pattern you see quite
a bit throughout this course. Now
therefore we can't change the data we get
but in this function here, we are only interested in the name.
We can then use a syntax or a feature called object destructuring where we add curly braces here in
the argument list and we then specify the property of the incoming object we are interested in, name,
that is property we have here.
Then this will be pulled out of the incoming object,
the other properties will be dropped for this function and it will be stored in a variable named name
which we then can use in there.
So now if they execute this again, I also see Max but now we're using this destructuring syntax and we
can pull out the age too if you wanted to or the grid function.
So that all works and that is just a syntax we can use that allows us to write a bit of a more understandable
code where we are very clear about what we need from the incoming object and which then gets stored
in a local variable that we can just use in this function.
And you can of course not just use destructuring inside of a function,
you can also use it outside of there,
you can create a new constant here for example and then the syntax will look like this, curly braces
equals person, curly braces on the left side of the equal sign are something we don't see that often in
javascript because typically it's wrong but for destructuring, it's correct.
And then here, we can have the name and the age
and this will create two new constants which hold the values stored in name and age,
so these names here have to match the property names
of the person
and now we can console log name and age, like this. And if I now re-execute that file, this output here is coming
from this console log
and the values we're outputting here are retrieved via object destructuring. Now there is also not just
object destructuring,
you can also destructure arrays,
so if we go back to the hobbies which we have here, well then if you would want to destructure that, we
can also create a const,
you could also use let by the way, the same for the object restructuring if you plan on changing it, you
could use a const for hobby one and hobby two wrapped in square brackets
and then assign this to hobbies. And now if you console log hobby one and you console log hobby two and you
execute that file again, you'll see the two hobbies being printed there,
please note there are no square brackets around them in the console log because we're not logging an
array here,
we are logging two individual values which we got via array destructuring.
Unlike the object destructuring, here you can choose any names you want because in arrays your elements
have no names,
they are instead pulled out by position.
So this will always be the first element,
this will be the second element. In objects
you pull them out by name, by property name. So that is destructuring
and this is also something used in this course,
it simply allows us to access elements in objects or arrays quickly by their name or position and to
drop
and that does not mean delete, they are not getting deleted, they're just not used in our function or
whatever we're writing,
so to drop the data we don't need in that specific code snippet we're working on.