video series we are going to learn the
new JavaScript features as a group these
features have many names on the
interwebs es6 ACMA script 6 harmony es
2015 either way we’re going to learn
them one feature one short video at a
time and today we are learning about de
structuring what it is
why it’s a good thing and of course how
to use it what is this structuring
destructuring is a new feature of
JavaScript that allows you to break
apart key structure stuff into variables
let me show you an example look at this
animal object it subspecies dog it has a
weight and it makes a move sound let’s
assign two of the properties to local
whoo what happened here
the dog says woo so there’s some stuff
going on what we’re doing here is that
we are D structuring the animal object
into two local variables species and
sound so when we do this the properties
sound and species are assigned to local
variables giving us the ability to
access them here here
that’s essentially what destructuring
does you probably also notice that I’m
not running vanilla note here I’m using
something called Bubble Bobble is super
cool because it allows you to use
JavaScript features from the future in a
node and in browsers it integrates into
basically everything called grunt
browserify whatever you’re using or in
this case I can just use it in console
and pipe it to note so what I am doing
is that I’m fighting the bubbled man and
my javascript file with es6 javascript
in it bubble will compile that to normal
java scripts ACMA script file basically
let me just show you how that looks
without typing to note if you compare
the bubble output here with line seven
in the example job JS file you’ll see
that our atmos crypt 6 destructuring
here has just been compiled down to xmas
55 and this is also a good way of seeing
what the hell is happening we’re going
to talk about how to use this in just a
minute but first I want to spend some
time talking about why you want to use
this the most common use case or
destructuring is to make it easier to
deal with option objects by option
objects I mean objects that you pass to
a function which is a single object that
might or might not contain
several properties if you have dealt
with the Ajax function in jQuery you
recognize that pattern now look at this
code we are calling a function called
make sound and we are passing in an
options object this is just an object
literal where the few properties species
dog weight 23 and sound woof we’re first
gonna implement the make sound function
without using the structure e so make
sound takes an options object and it’s
let’s run that since we don’t use any
ActionScript six functions yet we don’t
need to mess with bubbles Oreos I don’t
sample J s and the dog says woof I’m
going to make the example a little bit
more complicated we’re going to make
species and optional property on the
options object I’ll remove species from
the options object being passed in exam
what is that the undefined says what
well we can’t have that we won’t take
the fault value so we go options
stop species the test option species if
it exists otherwise it will be an E and
we run that the animal says woof so
let’s talk about problems with this code
this is just a silly little example but
if this function was part of an actual
program it would be a lot bigger so you
have to remember that all the problems
that we are going to talk about with
this code are going to be a lot bigger
an actual piece of software first of all
we notice that there’s a lot of
repetitions we refer to options here a
lot it is also a bit hard to scan
because everything is prefixed with
these options references the code would
be more readable if they weren’t there
look at this this is a lot more readable
than this it’s also hard to see what
make sound needs just by looking at
I can I actually have to go down into
the function and see that okay it needs
sound and I Nick Nick species I can’t
just see that from makes up and if this
was bigger again I would have to go
digging in the function and that’s bad
some of these problems are solvable
without these structuring by just
declaring variables at the top of the
and then we can remove these option
references this is a bit better there
are few references it is a bit easier to
scan I can just see species
samp immediately it is also a lot
clearer what the function needs species
sound because there at the top of the
function but let’s see if we can do this
even better with this structure right so
let’s comment this out for comparison
from options we also need to handle that
barbone sample dot j ass pipe that note
the animals since woof still dress and
now you’re telling me well that is not
that much shorter right it’s it’s still
two lines it’s 64 characters versus 169
characters it’s only like a few
character shorter very astute of you but
what if I told you that you could do
destructuring in the method signature
and assign default values in it
yeah
okay let’s delete this crummy code here
and we’re gonna move this into the
function signature here and we are gonna
remove this and remove that and run it
the animal still says that is how you do
this structure now there is even more
cool stuff to do with the structuring
you can destructured properties in two
variables even if they are nested
several layers deep and you are not
limited to destructuring objects you can
also destructor arrays but I’ll leave
all that up to your curiosity today we
have learned the what why and how of
these structuring we’ve learned that in
structuring is an equi script six
feature that allows you to break an
object or array up into variables and
we’ve also seen that it’s really handy
when you’re dealing with option objects
and we’ve seen some examples of how to
do the structuring in this series I want
to cover new and interesting JavaScript
features so what do you guys want to see
me cover next time comment down below or
send me a tweet at MP Jamie and make
sure that you don’t miss out on the next
episode subscribe by clicking there ish
on my face and or follow me on Twitter until next time stay curious