hello folks glad to have you back in the
last episode we talked about classes in
es6 what I want to do in this video I
want to continue our discussion with
object so we’re gonna cover object
properties and destructuring in this
video now before we get into any of
those topics let’s first review objects
and JavaScript now as you probably know
in JavaScript objects are essentially
unordered collections of name value
pairs or key value pairs in other
languages objects also known as hashmaps
dictionaries or associative arrays now
let’s have a simple object here let’s
say let OBG equals we’re gonna use an
object literal the key would just be a
key and the value would be value so in
this case the key well it’s also known
as a property and when it comes to
values that we assigned to keys or
properties well those could be primitive
so they could be strings like value or
they could be numbers it could be
decimals it could also be boolean – like
true or false and lastly they can also
be objects so it could be an object
literal right where you can have other
name value pairs right but those could
also be other types of objects like
arrays for example they could also be
functions because functions are also
objects so we’re going to assign a
function to a property and inside of
that function you have some kind of a
processing or logic right so what we’re
dealing with functions that are assigned
to properties well those functions are
also referred to as methods methods are
essentially actions that can be
performed on objects so with that out of
the way let’s first look at property
shorthand so let’s say you want to
create a post object so you might have a
let post equals some kind of an object
now let’s say before that you have your
title of the post will assign lorem
ipsum dolor and then let’s say you also
have the author and the other would be
Alex and space weight so in the past if
you wanted to create an object you want
it to assign keys they also contain the
variables that you have outside of that
object well in this case you would do
title call on title and then you would
have author call on
and this would work in fact if you
console.log your post you’re gonna see
that it has the author and also has the
title because those are the two
variables that you define now in es6 you
could simplify this example instead of
duplicating the values like so you could
simply use them once and just put the
comma right there for the first one and
the second one just remove the value so
you get exactly the same object as
before now this doesn’t mean that you
can’t have other properties or values
inside of objects so let’s say you can
have an ID or we could just simply
assign the value of theta now this would
be a timestamp of the current time when
it comes to shorthand properties the
convention is that you put your custom
values with the the properties that do
have values assigned to them below your
shorthand properties like so so that it
looks nice and clean and your object
obviously is not going to change then
don’t forget that when it comes to
objects the order of properties doesn’t
actually matter
the other thing has to do with method
properties so like I showed you
properties could be primitives they
could be objects and one of the types of
objects is a function so let’s say you
had a function on the post and you
wanted to get the information about that
post so you might have a get info
function and the past and es5 you would
you could simply assign a function to it
so inside of that function we could just
simply return this title was written by
and then the author of the post and so
we could call the function get info like
so and you forgot to add a plus right
there but if you do that you’re gonna
see the output the title was written by
any of your author now in es6 this could
be simplified further so you don’t need
the function keyword actually so you can
just leave it off so you would just have
the property name the brackets and the
body of the function now of course you
could also pass arguments into it so
let’s say you might have some kind of
extra information and you could also add
it at the end like so so let’s say we’re
going to just put a dot a space and
we’re gonna add the extra information
so one thing we could do to avoid having
undefined there because it’s the the
undefined because this in this case
we’re not passing any value to the
function so this argument becomes
undefined and when you concatenate it
with the rest of the string undefined
becomes a string so it’s being actually
injected inside of that string so one
way to alleviate that problem is just to
pass an empty string what we could pass
an actual value so we might say and it’s
gonna escape the in escape the culprit
there and it’s awesome like so and so
this is just an example of how you can
have arguments inside of those functions
so this has to do with method properties
now the other thing in es6 are computed
properties or computed property names
and this is a typical use case when you
want to assign a variable as an object
key now the very first thing we’re gonna
look at is the rules for defining key is
just as a reminder so think about an
object right just have a simple object
literal here so what are the rules for
defining the keys or the properties of
that object
well the key can begin with a dollar
sign it can begin with an underscore or
any Unicode character like a you know F
it could be uppercase with a lowercase
but it cannot begin with a number so I
can’t have let’s say one first and then
your value the only way that it’s gonna
work is if you add the quotes and around
that value basically the second one like
so and that’s still going to work and
it’s gonna compile now what are computed
property names well let’s say you wanted
to apply some kind of animation
especially if you’re using a jQuery UI
library or something like that let’s say
you have a direction and variable and
this might be top this may be bottom
right or left whatever and let’s say you
wanted to create an animation object so
your animation object might look
something like this so using object
literal here the situation that you run
into here let’s say I wanted to assign
top to 15 pixels but I didn’t actually
know
what the direction was so in this case
let’s say this top might be you know top
bottom right or left so this is a
direction but I didn’t know what it is
and I want to use the direction variable
inside of the object well it’s kind of
tricky with es5 and I guess the only
approach to do that would be to
basically define an empty object first
and then you could do you know animation
you could use the score brackets and you
would pass the variable inside of it and
then you would basically assign the 15
pixels and then afterwards you could do
console.log your animation object and
clean up the rest of it but basically
yeah you’re gonna get the object with
your top and your 15 pixels now in es6
this could be simplified so instead of
doing that using these square brackets
we could simply use the square brackets
inside of it and have a direction and
then afterwards you would assign the 15
pixels to it like so you could do
console.log animation and you would
basically get the same result as before
now keep in mind like I said this
direction does not necessarily have to
be a string this could just be you know
this could be an expression right so you
could do some math inside of it you
could add other strengths to it and in
fact you could also have the function
inside of it so let’s say we want to
define a function I know it’s sort of
like a silly example but you know just
bear with me for a moment so let’s say
that function we turned the directions
in this case to the top well in order to
execute that function you would wrap it
with parentheses and then lastly would
add the two parentheses as a function
call and of course you could extract
that function inside an actual you know
named function either using a variable
using the function declaration so in
this case you run this function this
anonymous function and returns the top
and then you assign 15 pixels to it so
this is just an example that you could
use strings you could use expressions or
even function calls inside of your
computer property names now let’s move
on to destructuring which is also known
as matching so let’s say you made an API
call to your backhand and you got some
kind of a payload back so
say we have a payload object and let’s
say inside of that payload object you
have an idea you might also have a name
you know could be Joe do something like
that let’s say you also have a token
some token and maybe also you have a
timestamp we could just simply make a
call to the date now function like so
let’s do console.log it was gonna give
us the payload object now let’s say you
got this object from your API call and
you wanted to extract the token and
maybe the timestamp from that payload so
in here’s far the only way to do so
would be to basically extract those into
variables using the dot notation so you
could do like token equals payload token
and you could also have your time stamp
which would be equal to a load time
stamp right and so afterwards you could
just simply console.log those he you
cancel on your token and you have time
stamp like so and now of course you’re
gonna get the values now in es6 this
could be simplified so instead of doing
that you could use the special notation
using curly braces so you can have your
token and your time stamp like so and
then you have your equal sign and you
have your pillow so basically what this
is gonna do it’s gonna extract the token
and the time stamp from the payload now
you’ve got to be careful here because
the variable names that you have right
there well the compiler is basically
gonna look for those keys or those
properties inside the payload object so
if you had something like payload token
right and you wanted to come to lock
that out well it’s gonna give you
undefined right because there’s no
payload token on that object there’s a
token so you could still use that but if
you wanted to assign the token to a
different variable name you could just
simply do token call on table token so
in the end it’s the compiler is gonna
look for the token key inside the
payload object right there right and
then it’s gonna assign it to the
variable that’s gonna be called pillow
so at the end you’re gonna get your
pillow token variable and you’re gonna
get your time stamp variable
now let’s complicate this example a
little bit because in this case we have
an ID and we also have a time stamp
usually those will be combined into a
single object which might be called meta
you know short for metadata so let’s say
inside of that meta data we would have
an ID and would also have a time stamp
like so and we don’t need the extra
spaces there okay so in this case the
objective for us would be to extract the
ID and the time stamp from the payload
well the way to do so let’s say we want
to extract the ID so using the new es6
notation you could write something like
this so you have your matter object
right you right now call on and then you
have your ID and then lastly you put it
equals payload typically this actually
works you can have the console log with
ID f– and you get the ID now in this
case be careful you’re not gonna
instruct the meta information right and
if you try to do meta it’s not going to
do anything in fact you’re gonna see an
error because the compiler did not
create the meta variable it only created
the ID and if you did want the ID you
would need to put it separately like so
right and this is going to work its
gonna give you the object with the ID in
the time step now the other thing is
like I showed you previously you don’t
have to have the same names as
properties so let’s say you want it to
instead of ID you wanted to have let’s
say Bill old ID well this is very simple
like I’m showing you here you just put
the caller and then you put the name of
the variable that you want to have so
when you cancel lock that out you’re
gonna get the same ID so this is
basically it for deep matching or deep
destructuring now destructuring doesn’t
only extend to objects you could also
perform the sharp sharing within
function arguments so let’s say you had
a function that will check your pillow
token so we might have check pillow
token and let’s say this function
expected token right or actually it
expects let’s say payload for now
and inside of the function of one I have
access to the token so in the past he
would probably do something like this
you know below token and let’s see you
will also wanted to have the timestamp
as before so you do payload that
timestamp and then maybe you have a
condition that says if the timestamp is
less than basically the timestamp of now
and you want to return an exception
you want to throw an exception it’s a
token expired maybe right and then
otherwise you would basically be good to
go so you could continue your processing
right now if we call this function check
payload token and we are gonna pass an
object into it so let’s say token would
be you know some kind of a valid public
token and you would have your timestamp
maybe date now plus some time to the
future and so maybe we want to
console.log the token and the time spam
so as you would expect it’s gonna give
us the token and the timestamp right but
if you wanted to use the new syntax
instead of doing all of that you could
simply have your token and the timestamp
extracted using destructuring so you can
have your token and you can have your
timestamp as function arguments all
right so you can remove the other
declarations like so and you when you
console.log them out you’re gonna get
the same token and you’re going to get
your timestamp essentially and of course
if you wanted to have custom variable
names because you don’t really have to
stick to the same property names as the
object you’re given so in this case
let’s say instead of talking you wanted
to have payload token where as I showed
you before you would basically have your
Colin and you put the name of the
variable that you want to have in the
end you replace the token with payload
token so that’s gonna give you the same
exact value right there now when it goes
through the structuring it doesn’t only
extend to objects it could also be
performed with arrays now let’s say we
have an array of let’s say friends so as
those friends let’s say we might have
anyway of objects so let’s say the first
one would be Alex and he would be of age
21 then we might have let’s say I don’t
know Craig would be something like 33
and unless who might have another object
right there maybe Emma yeah let’s say
she’s gonna be 25 now let’s say you
wanted to have access to the second and
the third elements inside of that array
so you might have something like let
Craig equals friends the second one and
then you might have Emma equals friends
the third one and then finally you want
to do console.log Craig and Emma and we
just need to put a comma right there and
we’re gonna get the two objects Craig
and time oh so this is the traditional
or es5 approach in es6 you could
actually simplify this quite a bit using
array D structuring so using a rate of
structuring you would have something
like this so we want to skip Alex in
this case right so to skip the first
element you simply put a comma then for
your variable you might have Craig and
again you might have Emma and that would
equal two friends so in the end we get
the same objects craigandemma now let’s
say if you wanted to skip Craig from
there it’s very simple you could have
your first element which would be Alex
just keep the second one you would
basically have an extra comma and then
you have your mo so this is basically
gonna give you Alex and Emma right there
and we get the objects now the other
thing is let’s say you wanted to swap
the two elements doesn’t really make
much sense in this example but let’s say
we wanted to swap Alex and Emma so in
this case you would use the following
syntax you would have your Emma and you
would have your Alex and they would be
assigned Alex and Emma now in this case
here you have to be careful with
semicolons you’ve probably noticed so
far that in my episodes in my videos I’m
actually tend to use semicolons this
case is kind of like an edge case you
actually have to use a semicolon so you
have to use a semicolon the end of the
Alette initialization or declaration
right there
and in that case it’s gonna work so we
get our Emma and Alex and of course the
first object is Alex but we swapped it
with them and that’s why you get Emma
right there and for the second when you
get Alex right there so so this is how
we do a radio structuring as well as
element swapping now remember we talked
about destructuring within function
arguments this is also called as context
matching context matching is also
applicable to a race so let’s have a
simple example here let’s say we have an
array of friends so we might have let’s
say Alex and Emma I’m gonna stick to
this in example and let’s say we have a
function that basically is going to
greet your you know the friends that you
pass inside so in the past we basically
pass your friends argument and then
let’s say we wanted to have access to
Alex this would be friends zero right
the first element and the second one
would be Emma friends one you could even
put them on the same line like so with a
comma and then last thing you could do
something like console.log hello comma
Alex like so and Emma and maybe you put
an exclamation point at the end like so
and we can call the greet function with
our friends and we’re gonna get hello
Alex and Emma right there now again this
is an older approach if you wanted to
use a radio structuring Bowl you could
simplify this quite a bit again so
instead of having your friends argument
you might have your Alex right and you
might have your Emma as arguments so in
this case you don’t need to reinitialize
them right there so this is gonna give
us hello Alex and Emma the same result
as before now if you look at a previous
example we didn’t actually have simple
strings we actually had object so let’s
imagine that instead of simple strings
we really actually had objects like
before so you might have an object with
the name of Alex and you might have an
object with the name of Emma right so
how do you deal with a rating structure
in this case because we have
of our array elements right but they’re
actually objects and that’s why we’re
getting objects in there instead of
actual names no in order to disrupt the
objects in this case you would also use
the Kula braces so you might have your
Alex and you might have your Emma now in
this case of course it’s going to give
us undefined right because it’s gonna
try the compiler is gonna try to look
for the alex property but we don’t have
any alex property on this first object
right because we have a name so we could
use a name for sure and then we could
use the name in the second case now what
do we do with a second one because the
second object also has a name property
right we can’t actually use the name
because the two the two variables are
gonna collide so that’s not the ideal
scenario so we might do is we might use
a name you know a custom name for that
variable so again we’ll use name Colin
and maybe Alex or you could also say you
know Alex’s name for example and for the
second object for MI you could do name
Colin Emma’s name then you would replace
those and then you’re gonna get the
exact same result as before so this is
how you would do you know more advanced
to structuring when you have an array
and you have objects inside of that
array that’s sort of like an edge case
usually you have your destructuring
which deals with arrays or objects
exclusively but it’s always good to know
how to deal with a more advanced use
case so this is pretty much it for this
lesson
so as a reminder we talked about
shorthand property short-end methods we
talked about computed names and we also
touched upon D structuring destruction
of object as well as a structuring of a
race this is it for this lesson
thanks a lot for checking it out and I’m gonna see you in the next episode
last episode we talked about classes in
es6 what I want to do in this video I
want to continue our discussion with
object so we’re gonna cover object
properties and destructuring in this
video now before we get into any of
those topics let’s first review objects
and JavaScript now as you probably know
in JavaScript objects are essentially
unordered collections of name value
pairs or key value pairs in other
languages objects also known as hashmaps
dictionaries or associative arrays now
let’s have a simple object here let’s
say let OBG equals we’re gonna use an
object literal the key would just be a
key and the value would be value so in
this case the key well it’s also known
as a property and when it comes to
values that we assigned to keys or
properties well those could be primitive
so they could be strings like value or
they could be numbers it could be
decimals it could also be boolean – like
true or false and lastly they can also
be objects so it could be an object
literal right where you can have other
name value pairs right but those could
also be other types of objects like
arrays for example they could also be
functions because functions are also
objects so we’re going to assign a
function to a property and inside of
that function you have some kind of a
processing or logic right so what we’re
dealing with functions that are assigned
to properties well those functions are
also referred to as methods methods are
essentially actions that can be
performed on objects so with that out of
the way let’s first look at property
shorthand so let’s say you want to
create a post object so you might have a
let post equals some kind of an object
now let’s say before that you have your
title of the post will assign lorem
ipsum dolor and then let’s say you also
have the author and the other would be
Alex and space weight so in the past if
you wanted to create an object you want
it to assign keys they also contain the
variables that you have outside of that
object well in this case you would do
title call on title and then you would
have author call on
and this would work in fact if you
console.log your post you’re gonna see
that it has the author and also has the
title because those are the two
variables that you define now in es6 you
could simplify this example instead of
duplicating the values like so you could
simply use them once and just put the
comma right there for the first one and
the second one just remove the value so
you get exactly the same object as
before now this doesn’t mean that you
can’t have other properties or values
inside of objects so let’s say you can
have an ID or we could just simply
assign the value of theta now this would
be a timestamp of the current time when
it comes to shorthand properties the
convention is that you put your custom
values with the the properties that do
have values assigned to them below your
shorthand properties like so so that it
looks nice and clean and your object
obviously is not going to change then
don’t forget that when it comes to
objects the order of properties doesn’t
actually matter
the other thing has to do with method
properties so like I showed you
properties could be primitives they
could be objects and one of the types of
objects is a function so let’s say you
had a function on the post and you
wanted to get the information about that
post so you might have a get info
function and the past and es5 you would
you could simply assign a function to it
so inside of that function we could just
simply return this title was written by
and then the author of the post and so
we could call the function get info like
so and you forgot to add a plus right
there but if you do that you’re gonna
see the output the title was written by
any of your author now in es6 this could
be simplified further so you don’t need
the function keyword actually so you can
just leave it off so you would just have
the property name the brackets and the
body of the function now of course you
could also pass arguments into it so
let’s say you might have some kind of
extra information and you could also add
it at the end like so so let’s say we’re
going to just put a dot a space and
we’re gonna add the extra information
so one thing we could do to avoid having
undefined there because it’s the the
undefined because this in this case
we’re not passing any value to the
function so this argument becomes
undefined and when you concatenate it
with the rest of the string undefined
becomes a string so it’s being actually
injected inside of that string so one
way to alleviate that problem is just to
pass an empty string what we could pass
an actual value so we might say and it’s
gonna escape the in escape the culprit
there and it’s awesome like so and so
this is just an example of how you can
have arguments inside of those functions
so this has to do with method properties
now the other thing in es6 are computed
properties or computed property names
and this is a typical use case when you
want to assign a variable as an object
key now the very first thing we’re gonna
look at is the rules for defining key is
just as a reminder so think about an
object right just have a simple object
literal here so what are the rules for
defining the keys or the properties of
that object
well the key can begin with a dollar
sign it can begin with an underscore or
any Unicode character like a you know F
it could be uppercase with a lowercase
but it cannot begin with a number so I
can’t have let’s say one first and then
your value the only way that it’s gonna
work is if you add the quotes and around
that value basically the second one like
so and that’s still going to work and
it’s gonna compile now what are computed
property names well let’s say you wanted
to apply some kind of animation
especially if you’re using a jQuery UI
library or something like that let’s say
you have a direction and variable and
this might be top this may be bottom
right or left whatever and let’s say you
wanted to create an animation object so
your animation object might look
something like this so using object
literal here the situation that you run
into here let’s say I wanted to assign
top to 15 pixels but I didn’t actually
know
what the direction was so in this case
let’s say this top might be you know top
bottom right or left so this is a
direction but I didn’t know what it is
and I want to use the direction variable
inside of the object well it’s kind of
tricky with es5 and I guess the only
approach to do that would be to
basically define an empty object first
and then you could do you know animation
you could use the score brackets and you
would pass the variable inside of it and
then you would basically assign the 15
pixels and then afterwards you could do
console.log your animation object and
clean up the rest of it but basically
yeah you’re gonna get the object with
your top and your 15 pixels now in es6
this could be simplified so instead of
doing that using these square brackets
we could simply use the square brackets
inside of it and have a direction and
then afterwards you would assign the 15
pixels to it like so you could do
console.log animation and you would
basically get the same result as before
now keep in mind like I said this
direction does not necessarily have to
be a string this could just be you know
this could be an expression right so you
could do some math inside of it you
could add other strengths to it and in
fact you could also have the function
inside of it so let’s say we want to
define a function I know it’s sort of
like a silly example but you know just
bear with me for a moment so let’s say
that function we turned the directions
in this case to the top well in order to
execute that function you would wrap it
with parentheses and then lastly would
add the two parentheses as a function
call and of course you could extract
that function inside an actual you know
named function either using a variable
using the function declaration so in
this case you run this function this
anonymous function and returns the top
and then you assign 15 pixels to it so
this is just an example that you could
use strings you could use expressions or
even function calls inside of your
computer property names now let’s move
on to destructuring which is also known
as matching so let’s say you made an API
call to your backhand and you got some
kind of a payload back so
say we have a payload object and let’s
say inside of that payload object you
have an idea you might also have a name
you know could be Joe do something like
that let’s say you also have a token
some token and maybe also you have a
timestamp we could just simply make a
call to the date now function like so
let’s do console.log it was gonna give
us the payload object now let’s say you
got this object from your API call and
you wanted to extract the token and
maybe the timestamp from that payload so
in here’s far the only way to do so
would be to basically extract those into
variables using the dot notation so you
could do like token equals payload token
and you could also have your time stamp
which would be equal to a load time
stamp right and so afterwards you could
just simply console.log those he you
cancel on your token and you have time
stamp like so and now of course you’re
gonna get the values now in es6 this
could be simplified so instead of doing
that you could use the special notation
using curly braces so you can have your
token and your time stamp like so and
then you have your equal sign and you
have your pillow so basically what this
is gonna do it’s gonna extract the token
and the time stamp from the payload now
you’ve got to be careful here because
the variable names that you have right
there well the compiler is basically
gonna look for those keys or those
properties inside the payload object so
if you had something like payload token
right and you wanted to come to lock
that out well it’s gonna give you
undefined right because there’s no
payload token on that object there’s a
token so you could still use that but if
you wanted to assign the token to a
different variable name you could just
simply do token call on table token so
in the end it’s the compiler is gonna
look for the token key inside the
payload object right there right and
then it’s gonna assign it to the
variable that’s gonna be called pillow
so at the end you’re gonna get your
pillow token variable and you’re gonna
get your time stamp variable
now let’s complicate this example a
little bit because in this case we have
an ID and we also have a time stamp
usually those will be combined into a
single object which might be called meta
you know short for metadata so let’s say
inside of that meta data we would have
an ID and would also have a time stamp
like so and we don’t need the extra
spaces there okay so in this case the
objective for us would be to extract the
ID and the time stamp from the payload
well the way to do so let’s say we want
to extract the ID so using the new es6
notation you could write something like
this so you have your matter object
right you right now call on and then you
have your ID and then lastly you put it
equals payload typically this actually
works you can have the console log with
ID f– and you get the ID now in this
case be careful you’re not gonna
instruct the meta information right and
if you try to do meta it’s not going to
do anything in fact you’re gonna see an
error because the compiler did not
create the meta variable it only created
the ID and if you did want the ID you
would need to put it separately like so
right and this is going to work its
gonna give you the object with the ID in
the time step now the other thing is
like I showed you previously you don’t
have to have the same names as
properties so let’s say you want it to
instead of ID you wanted to have let’s
say Bill old ID well this is very simple
like I’m showing you here you just put
the caller and then you put the name of
the variable that you want to have so
when you cancel lock that out you’re
gonna get the same ID so this is
basically it for deep matching or deep
destructuring now destructuring doesn’t
only extend to objects you could also
perform the sharp sharing within
function arguments so let’s say you had
a function that will check your pillow
token so we might have check pillow
token and let’s say this function
expected token right or actually it
expects let’s say payload for now
and inside of the function of one I have
access to the token so in the past he
would probably do something like this
you know below token and let’s see you
will also wanted to have the timestamp
as before so you do payload that
timestamp and then maybe you have a
condition that says if the timestamp is
less than basically the timestamp of now
and you want to return an exception
you want to throw an exception it’s a
token expired maybe right and then
otherwise you would basically be good to
go so you could continue your processing
right now if we call this function check
payload token and we are gonna pass an
object into it so let’s say token would
be you know some kind of a valid public
token and you would have your timestamp
maybe date now plus some time to the
future and so maybe we want to
console.log the token and the time spam
so as you would expect it’s gonna give
us the token and the timestamp right but
if you wanted to use the new syntax
instead of doing all of that you could
simply have your token and the timestamp
extracted using destructuring so you can
have your token and you can have your
timestamp as function arguments all
right so you can remove the other
declarations like so and you when you
console.log them out you’re gonna get
the same token and you’re going to get
your timestamp essentially and of course
if you wanted to have custom variable
names because you don’t really have to
stick to the same property names as the
object you’re given so in this case
let’s say instead of talking you wanted
to have payload token where as I showed
you before you would basically have your
Colin and you put the name of the
variable that you want to have in the
end you replace the token with payload
token so that’s gonna give you the same
exact value right there now when it goes
through the structuring it doesn’t only
extend to objects it could also be
performed with arrays now let’s say we
have an array of let’s say friends so as
those friends let’s say we might have
anyway of objects so let’s say the first
one would be Alex and he would be of age
21 then we might have let’s say I don’t
know Craig would be something like 33
and unless who might have another object
right there maybe Emma yeah let’s say
she’s gonna be 25 now let’s say you
wanted to have access to the second and
the third elements inside of that array
so you might have something like let
Craig equals friends the second one and
then you might have Emma equals friends
the third one and then finally you want
to do console.log Craig and Emma and we
just need to put a comma right there and
we’re gonna get the two objects Craig
and time oh so this is the traditional
or es5 approach in es6 you could
actually simplify this quite a bit using
array D structuring so using a rate of
structuring you would have something
like this so we want to skip Alex in
this case right so to skip the first
element you simply put a comma then for
your variable you might have Craig and
again you might have Emma and that would
equal two friends so in the end we get
the same objects craigandemma now let’s
say if you wanted to skip Craig from
there it’s very simple you could have
your first element which would be Alex
just keep the second one you would
basically have an extra comma and then
you have your mo so this is basically
gonna give you Alex and Emma right there
and we get the objects now the other
thing is let’s say you wanted to swap
the two elements doesn’t really make
much sense in this example but let’s say
we wanted to swap Alex and Emma so in
this case you would use the following
syntax you would have your Emma and you
would have your Alex and they would be
assigned Alex and Emma now in this case
here you have to be careful with
semicolons you’ve probably noticed so
far that in my episodes in my videos I’m
actually tend to use semicolons this
case is kind of like an edge case you
actually have to use a semicolon so you
have to use a semicolon the end of the
Alette initialization or declaration
right there
and in that case it’s gonna work so we
get our Emma and Alex and of course the
first object is Alex but we swapped it
with them and that’s why you get Emma
right there and for the second when you
get Alex right there so so this is how
we do a radio structuring as well as
element swapping now remember we talked
about destructuring within function
arguments this is also called as context
matching context matching is also
applicable to a race so let’s have a
simple example here let’s say we have an
array of friends so we might have let’s
say Alex and Emma I’m gonna stick to
this in example and let’s say we have a
function that basically is going to
greet your you know the friends that you
pass inside so in the past we basically
pass your friends argument and then
let’s say we wanted to have access to
Alex this would be friends zero right
the first element and the second one
would be Emma friends one you could even
put them on the same line like so with a
comma and then last thing you could do
something like console.log hello comma
Alex like so and Emma and maybe you put
an exclamation point at the end like so
and we can call the greet function with
our friends and we’re gonna get hello
Alex and Emma right there now again this
is an older approach if you wanted to
use a radio structuring Bowl you could
simplify this quite a bit again so
instead of having your friends argument
you might have your Alex right and you
might have your Emma as arguments so in
this case you don’t need to reinitialize
them right there so this is gonna give
us hello Alex and Emma the same result
as before now if you look at a previous
example we didn’t actually have simple
strings we actually had object so let’s
imagine that instead of simple strings
we really actually had objects like
before so you might have an object with
the name of Alex and you might have an
object with the name of Emma right so
how do you deal with a rating structure
in this case because we have
of our array elements right but they’re
actually objects and that’s why we’re
getting objects in there instead of
actual names no in order to disrupt the
objects in this case you would also use
the Kula braces so you might have your
Alex and you might have your Emma now in
this case of course it’s going to give
us undefined right because it’s gonna
try the compiler is gonna try to look
for the alex property but we don’t have
any alex property on this first object
right because we have a name so we could
use a name for sure and then we could
use the name in the second case now what
do we do with a second one because the
second object also has a name property
right we can’t actually use the name
because the two the two variables are
gonna collide so that’s not the ideal
scenario so we might do is we might use
a name you know a custom name for that
variable so again we’ll use name Colin
and maybe Alex or you could also say you
know Alex’s name for example and for the
second object for MI you could do name
Colin Emma’s name then you would replace
those and then you’re gonna get the
exact same result as before so this is
how you would do you know more advanced
to structuring when you have an array
and you have objects inside of that
array that’s sort of like an edge case
usually you have your destructuring
which deals with arrays or objects
exclusively but it’s always good to know
how to deal with a more advanced use
case so this is pretty much it for this
lesson
so as a reminder we talked about
shorthand property short-end methods we
talked about computed names and we also
touched upon D structuring destruction
of object as well as a structuring of a
race this is it for this lesson
thanks a lot for checking it out and I’m gonna see you in the next episode
Please follow and like us: