all right so this video is a follow-up
to the previous episode where we talked
about the rest and spread operators
basically in this video I want to take a
deeper dive into both of those and I’m
gonna look at a whole bunch of different
examples just to make sure that the idea
$0.06 because this is something that’s
actually been a little bit confusing and
difficult for me at first so want to
make sure that we all understand the new
syntax so let’s begin with this product
order and let’s first look at array
literals so one of the use cases for the
spread operator would be a simple
function call so let’s say we had a
function here and the function was
called announce medalists and let’s say
we had three medalists we had the first
one we had this second one third one and
let’s say we basically wanted to
announce who the medalists are basically
to announce the names
let’s do console.log we could actually
use the backticks
or the string literals that i explained
a couple of videos ago and it could
basically do first one gold course the
second one one silver and the last one B
the third one long bronze
okay so pretty simple now that we would
call that function is very simple you
basically provide the list of names
let’s go mark
Alex so that’s gonna give us the result
on the right and that works just fine
let’s consider that you wanted to pass
the elements as in an array so let’s say
we had the elements so we have the names
let’s do winners equals an array of
names
how would you extract the elements of
that array without refactoring the
function so of course we could pass just
a single argument and call it let’s say
winners and then you could get your you
know first second and third in fact
let’s do that if you use the neither
structuring syntax we could do first
second third and that’s going to equal
inner and as you can see that’s going to
work perfectly fine it’s basically going
to extract all the elements
from the winners array using
destructuring but let’s say we then once
you use a structure and let’s say we had
three arguments to the function let’s
even go as far as saying that we
couldn’t actually you factor the
function we had to keep the same
function signature how would you go
about that and that when the past body
would typically do is you even revert to
an older approach using the apply
function or the apply method now the
apply method is similar to the call
method that we saw in the previous video
the difference is that the Col method
expects an argument list so if you
wanted to call a call method the very
first argument like I mentioned before
would be what the this object would
become right so in this case we could
you simply pass no and then you could
pass your arguments individually so they
pass the names like this instead of an
array you just basically pass them one
by one okay and as you can see on the
right that’s going to work but if you
wanted to pass the elements as an array
so instead of passing them individually
you pass an array of those elements or
arguments we could still do that but in
this case we need to use the apply
method as you can see it’s also going to
work so the apply method basically
passes an object this is going to become
the current or calling object inside of
the function the second argument is
basically an array of all the elements
that are going to be passed inside of
that function as function arguments what
you can do in es6 is now instead of
using the apply function you could
simply use the spread operator and then
pass your winners directly so this is
basically going to expand the array of
winners the array of names and it’s
going to pass every single element
directly inside of that function and
this way you’re gonna get all the names
and all the results on the right one of
the other things that you could do is
you could actually combine arrays let’s
do something silly here let’s say we had
a little bit of drama here let’s say
we’re gonna do three words that’s gonna
be an array of of course I love you okay
and let’s say we had a second array
let’s to a love story a little bit of a
love story here so let’s do he
said something so I’m just gonna put a
comment for now and left her forever
very dramatic here okay so let’s say you
wanted to insert the first array inside
of the second one so instead of the
comments that we have right there let’s
say we wanted to put that array inside
of the love story how would you go about
that well in the s5 it’s sort of
difficult you basically have to split
the array or you have to inject the
three words any given index in es6 it’s
pretty simple you just use the spread
operator so you use three dots and then
you put or three words inside of it with
a comma so now if you do a console log
of your love story you’re basically
gonna get all the elements and if you do
join with a space that’s gonna give you
a complete sentence as you can see so
that’s as far as combining arrays now
what if you wanted to create a copy of
an array let’s say we had at Trinity we
had vortex we had mule vortex okay and
we had module so the three brains how
would you create a copy of that array
it’s actually very simple in es6 let’s
say we have a copy and we have a new
array we use the spread operator and we
basically pass the Trinity inside of it
so now if you did console.log of copy
you’re gonna get the exact same array as
before now one of the things to notice
that this way of copying is known as
shell so in contrast to deep copying the
shell copying actually preserves the
same elements inside of the array so in
this case it isn’t really no
side-effects because we’re dealing with
with strings and strings are what’s
known as primitive types other primitive
types are also integers and boolean so
if we had let’s say numbers inside of
that array that’s also fine
there’s going to be no side effects
whatsoever but if you were working with
arrays or let’s say if you had
multi-dimensional arrays then you could
potentially introduce a problem or a bug
because if you modify the elements
inside of the copied array you would
also modify the original elements inside
of the original array so this is
typically the use case where you would
reach out to utility libraries like
underscore lodash because those have
utility methods that essentially allow
you for deep copying just keep in mind
that the spread operator only provides
you with shallow copy of in this example
and array and if you have an array of
objects if you mutate the copy you’re
also going to mutate the original if you
mutate the original of course that’s
also going to affect the copy now
another use case that you might run into
is Ray concatenation so let’s say we had
an array of upper body muscles so we had
let’s say biceps
we had triceps we had let’s say chest
what else it said we had delts and maybe
back and all the biggest muscles let’s
say we also had lower body muscles and
let’s say we had glutes hamstrings quads
and maybe calves so what if you wanted
to concatenate the two arrays let’s say
you want it to have the muscles in es5
you can use Deacon Cod methods so you
could basically use the first array and
then you could call you can cut method
off of it and then you would pass the
second one as the argument and if you
did console.log of your muscles of
course that’s going to give you
basically an array that contains all the
elements of the first one and the second
one and if you wanted to reverse the
order you would basically use the lower
sort of made it separate there we’ve
used the lower body muscles and it would
pass the upper body muscles as the
argument to the contact method and as
you can see right there the lower body
muscles are gonna go first and of course
in es6 that’s no longer necessary
use the spread operator so if you wanted
the upper body muscles to go first you
put three dots is the upper body muscles
this by itself is just going to give us
the upper body muscles but if you wanted
the lower body muscles put a comma three
dots the spread operator and then you
put your lower body muscles and that’s
gonna give us the same result if you
want it the lower body muscles first
again reverse the order upper body
muscles second and that’s gonna give us
all the muscles of the lower body and
the upper body no the other use case
that you actually saw in the previous
video would be to convert an array like
object into an array so you already see
the use case with arguments Watson we
had a simple function here print and we
basically wanted to print all the
elements that were passed into it so the
way you would use it as let’s say print
JavaScript is awesome okay and what you
would do next is you would basically
call console.log with the arguments with
the spread operator that basically
extracts all the elements of the
arguments object inside of the log
method on the console object okay now if
you wanted to access the arguments as an
array let’s say we would basically
basically do arts equals and we have an
array we have the three dots and the
arguments object if you wanted to
console.log that the arts of course
that’s gonna give us an array of all the
strengths that we passed they don’t have
to be shrinks they could also be you
know numbers that’s gonna give us an
array of those numbers think of a
primitive objects they could even be
functions they could basically be
anything that you provide now the other
use case would be when working with Dom
elements so I’m going to open up the
HTML tab on left okay my bring back thi
was but let’s say we had buttons here
let see we had a submit button and we
also had a say cancel
but we’ve made it up over there well so
does that look like let’s see we have
two buttons okay what if you wanted to
access those buttons as Dom elements
typically you would do something like
this so let’s say let the buttons equals
and then we could do document get
elements by tag name okay wanna target
the buttons
let’s do console.log buttons see what
that gives us and the log is too large
let’s open the dev tools well that gives
us an HTML collection interesting this
is a perfect place for a bug so if you
thought that the buttons object would be
an array and if you try to do something
like buttons for each and let’s see we
even tried to provide a callback one
date button and you want it to do a
console log of that button you’re gonna
see that it gives us a type error
because buttons for each is not a
function meaning that there’s no for
each method on the buttons object
whatever the buttons object is in this
case it’s an HTML collection this is
similar to the example where we had the
arguments object when we couldn’t also
call any array methods off of that
object and that’s understandable because
neither the arguments object nor the
HTML collection are arrays they’re
actually object and that’s why you can’t
call array methods onto them but what we
could do is we could use a new spread
operator right we could put the three
dots close the bracket that’s gonna give
us an array of all the buttons or
basically all the elements that this
that the result of this call would
contain so many call documents get
elements by tag name and you pass the
button that’s going to give us an HTML
collection but if you extract all the
elements of that collection into an
array you’re gonna get an array with all
the buttons and now you could apply the
for each method onto that array and you
could basically look through them so
that’s pretty useful now let’s remove
all that because we no longer needed
let’s close the dev tools I’m going to
bring
whatever we had before let’s clear out
the logs now let’s move on to objects
one of the use cases when working with
objects would be to clone objects so
let’s see we had a rectangle here and
it’s basically going to be a set of
different styles so let’s say width 200
pixels let’s say we had height 100
pixels let’s say we also had background
was green let’s say we had opacity of
0.5 and let’s say we wanted to create a
copy of that object in the fast
especially with es5 you could do
something like this you could do for
copy holes you could use object assign
method typically the first element would
be an empty object this would be their
target object and then the second one
would be the source object so we could
pass the rectangle if you did
console.log off copy that’s gonna give
us a copy of that object but all the
properties and all the property values
now what the assign metal aoz us to do
is to basically copy innumerable and own
properties from either one or more
source objects that you provide the
first argument that you provide is
basically the target object you know we
could already have some of the
properties so let’s say we had font size
12 pixels the resulting object is
already gonna have the font size but
it’s also going to have all the
properties of the rectangle now
rectangle is not the only source object
that we could provide we could also pass
another object let’s do color black okay
and that’s another object and the color
property of this object is also going to
be inserted into the resulting object as
you can see right there color black so
the three properties of all of those
objects are going to be stored instead
of a copy and the very first one
basically used as the target and the
subsequent objects are going to be used
as sources now if you were using this
property it becomes really simple we’ll
have a
and we basically have an empty object
with three dots this right operator and
then you basically put your rectangle
like so it doesn’t seem like Colton
likes the syntax what’s enable Babel
here yep and we get the exact same copy
and of course you could put more
properties let’s say we had color yellow
okay you get proof properties before or
after let’s say font size 12 pixels and
actually order of properties the way you
put them does matter we’re gonna see
this in a follow up example in a few
minutes but for now just remember that
neither the object of Sun method nor
this product Reiter allow you to perform
deep cloning
so the cloning that you see here when we
create a copy that’s basically doing a
shell copy if you had properties and
those properties contained objects so
let’s say we had and take biography
property here and this was an object
let’s say with color black font style
perhaps italic then when you copy the
rectangle object it would also copy a
reference to that same typography object
so if you modified the typography object
on the rectangle would also affect the
same object and the copy in fact let’s
do that let’s let’s prove that so let’s
do it
tangle dot typography dot
color equals red and let’s do
console.log rectangle and let’s do
Council of copy let’s see what happens
you’re gonna see that we get two objects
the first one is a rectangle the second
one is the copy and that copy is also
going to contain the font size and the
color but you can already see that when
we modified the color on the typography
property of the rectangle we assign red
to it
we also indirectly modified the color of
the typography property of the second
object of the copy so this just
basically means that the spread operator
only goes one level deep and it doesn’t
allow for deep copying or deep cloning
and this goes the same for object aside
method as well
and like I said before this is a typical
use case where you would use a library
like
lodash underscore or Ronda so just to
reiterate to create a simple copy you
basically use the two curly braces
create a new object and you pass your
rectangle and this is basically going to
create a shallow copy of the rectangle
now let’s talk about merging objects
let’s say we had an option go background
and this was basically a set of styles
for the background let’s say position
well as sinner let’s say size was
covered so that it’s full sized let’s
say we also had image and this was
basically a URL and maybe something like
background PNG okay let’s say we also
had topography styles and we had
something like color red and font size
of 10 pixels and maybe also line height
of 1.5 okay so if you wanted to merge
the two objects in the past you can use
the object assign method let’s say we
had styles and with the object assigned
first of all you have your target object
that’s going to be an empty object but
then you also have background and then
you have typography if you did
console.log styles it’s gonna give us an
object that’s going to contain both the
typography properties as well as the
background properties but of course any
a sexy no longer have to do this you can
use this predator so similar to how you
would do this with arrays you can put
the three dots with a spirit operator
you would have your background and then
you would have your typography like so
and this is going to give us the exact
same object as before okay now another
use case would be creating a new object
from an old one so let’s say we had a
human object and of course every single
and he also agreed is air okay and maybe
also sleeps typically eight hours but
then it kind of depends now let’s say we
also had a super human and the super
human is going to run fast and he also
jumps high so if you wanted to attract
all the properties of the human inside
of the super human how would you go
about that in es5 you could use the
object assigned by food okay and the
first thing you do is you pass all the
properties that the super human exhibits
and then in second you pass the human
object and then if you did console.log
super human you’re basically gonna get
all of those properties together now
keep in mind the syntax of the object
assign method because the first thing
you do is you pass a target right the
target object and the second thing you
do is you pass resources in this case we
only have one we have the human object
the important thing to know it is that
the properties in the source or the
sources are going to override the
properties in the target so for example
if this super human actually sleeps
let’s say only two hours and you pass
the human as the source you’re gonna see
that resulting object is going to be a
human that sleeps eight hours even
though it’s a super human that also runs
fast and jumps high so one way to
alleviate that would be to first pass an
empty object and pass the human and then
lastly pass all the properties of the
super human that’s basically going to
overwrite anything that goes before it
but let’s say if you wanted to use the
es6 syntax
let’s do super human it’s going to be a
new object let’s extract everything that
the human does and let’s also say runs
fast and also jumps high and of course
sleeps two hours the properties that we
pass after the human object are
basically going to overwrite anything
that the human object provides and of
course just like before if you pass
those properties first you can expect
you’re gonna get the eight hours eight
hours of sleep
four words and in fact once we do
console.log superhuman we’re gonna get
eight hours and that’s because whatever
the properties that human has if they
collide they’re gonna override whatever
this superhuman has but if you provide
those properties first like so let’s
remove this space you’re gonna see that
we got two hours of sleep and of course
we got the jumps high and runs fast
properties now the last thing to note is
that the spread operator can also be
combined with the structuring of objects
so let’s say we had it post the title
was 10 things I love about JavaScript
the this cleaner was all of this info is
subjective okay and then let’s say we
had an author Alex and we also had
created at timestamp and let’s say this
was created just now so this is
basically going to be an integer or a
timestamp that represents the time of
basically now so let’s say that we
wanted to extract properties of that
post object so we’ll wanted to get hold
of the title disclaimer but we also
wanted to gather two other remaining
properties as a separate object so if
you use this proper ATAR for that let’s
put them into meta variable and let’s
assign it to post so once we do
console.log of title disclaimer and as
well as the meta object so we’re gonna
get everything that you expecting any
other title we can get the disclaimer
and we’re also going to get an object
that basically contains the author and
create it out if you add at Moorfields
let’s say we added stars it was rated at
5 we’re also gonna get these stars as
part of the metal object because we
basically extract
all the remaining properties inside of
that made of objects so this is just one
of the examples of how you can combine
the structuring as well as the sprite
operator now basically when it comes to
the rest operator it basically deals
with a single use case and that’s the
use case when we have a variable number
of function arguments so one of the
examples that I already gave in this
video
would be to print out all the strings
that you provide so let’s say we had a
function I’m gonna call it echo when you
call that function you would expect to
basically print out all the strings that
you give to it so let’s say we have
javascript is a language okay and the
way you could print them out is one way
to do it would be to use the spread
upper here and you could extract the
arguments object as individual elements
we’re gonna get all the strings in the
right but the other thing you could do
is you could also use the rest operator
in order to extract all the arguments
you provide to the function into a
single array so in this case we could
have arts and if we did console.log arcs
of course in this case we would still
have to use the spread app narrator in
order to extract those arguments but
what this would allow us to do is to
basically use arrow functions so if you
wanted to use a function expression as I
talked about before we wanted to have an
echo variable and we wanted to assign a
function to it we could use an error
function
let’s pass in the arcs in this case we
could use the rest operator in order to
get an array of elements that we pass
then you remove the curly braces and
then then you have your console log like
so and this is still going to work just
fine so as I mentioned before if you
want to take the es5 approach no problem
with that just keep in mind that in that
case you would be relying on the native
arguments object which is not really an
array and you can actually apply any
array methods onto it and the other
thing is it also has internal properties
that are specific to itself like the
collie property so again it’s not really
an array it’s actually an object and of
course the biggest disadvantage is that
it’s actually not available inside of
arrow functions if you try to do
constant log of the arguments object
inside of an arrow function like so like
we’ll have one here let’s do console log
arguments you would expect that it’s
going to be available but actually it’s
not we get a reference error so of
course the arguments object is its
that’s just simply one
things to keep in mind that the
arguments object is not available at set
of arrow functions if we go back to the
rest syntax here we have an argument
array that’s basically in array of all
the elements that we pass inside of the
function so the benefits here is that
you could use this approach with the
rest operator with both traditional and
arrow functions you get an array object
that basically contains all the
arguments they pass inside of the
function and this also reduces the
boilerplate code in case you want to
work with the arguments as an array so
if you had a traditional function then
you would do something like array
you know prototype slice you would have
to use the call method and only then you
pass your arguments object this is
something I showed you in a previous
video this is quite a bit of boilerplate
code if you just use the spread syntax
it’s much leaner much nicer and cleaner
alright so this is pretty much it for
the rest and spread syntax thanks a lot
for checking out my channel and this
video and I’m gonna meet you in the next one
to the previous episode where we talked
about the rest and spread operators
basically in this video I want to take a
deeper dive into both of those and I’m
gonna look at a whole bunch of different
examples just to make sure that the idea
$0.06 because this is something that’s
actually been a little bit confusing and
difficult for me at first so want to
make sure that we all understand the new
syntax so let’s begin with this product
order and let’s first look at array
literals so one of the use cases for the
spread operator would be a simple
function call so let’s say we had a
function here and the function was
called announce medalists and let’s say
we had three medalists we had the first
one we had this second one third one and
let’s say we basically wanted to
announce who the medalists are basically
to announce the names
let’s do console.log we could actually
use the backticks
or the string literals that i explained
a couple of videos ago and it could
basically do first one gold course the
second one one silver and the last one B
the third one long bronze
okay so pretty simple now that we would
call that function is very simple you
basically provide the list of names
let’s go mark
Alex so that’s gonna give us the result
on the right and that works just fine
let’s consider that you wanted to pass
the elements as in an array so let’s say
we had the elements so we have the names
let’s do winners equals an array of
names
how would you extract the elements of
that array without refactoring the
function so of course we could pass just
a single argument and call it let’s say
winners and then you could get your you
know first second and third in fact
let’s do that if you use the neither
structuring syntax we could do first
second third and that’s going to equal
inner and as you can see that’s going to
work perfectly fine it’s basically going
to extract all the elements
from the winners array using
destructuring but let’s say we then once
you use a structure and let’s say we had
three arguments to the function let’s
even go as far as saying that we
couldn’t actually you factor the
function we had to keep the same
function signature how would you go
about that and that when the past body
would typically do is you even revert to
an older approach using the apply
function or the apply method now the
apply method is similar to the call
method that we saw in the previous video
the difference is that the Col method
expects an argument list so if you
wanted to call a call method the very
first argument like I mentioned before
would be what the this object would
become right so in this case we could
you simply pass no and then you could
pass your arguments individually so they
pass the names like this instead of an
array you just basically pass them one
by one okay and as you can see on the
right that’s going to work but if you
wanted to pass the elements as an array
so instead of passing them individually
you pass an array of those elements or
arguments we could still do that but in
this case we need to use the apply
method as you can see it’s also going to
work so the apply method basically
passes an object this is going to become
the current or calling object inside of
the function the second argument is
basically an array of all the elements
that are going to be passed inside of
that function as function arguments what
you can do in es6 is now instead of
using the apply function you could
simply use the spread operator and then
pass your winners directly so this is
basically going to expand the array of
winners the array of names and it’s
going to pass every single element
directly inside of that function and
this way you’re gonna get all the names
and all the results on the right one of
the other things that you could do is
you could actually combine arrays let’s
do something silly here let’s say we had
a little bit of drama here let’s say
we’re gonna do three words that’s gonna
be an array of of course I love you okay
and let’s say we had a second array
let’s to a love story a little bit of a
love story here so let’s do he
said something so I’m just gonna put a
comment for now and left her forever
very dramatic here okay so let’s say you
wanted to insert the first array inside
of the second one so instead of the
comments that we have right there let’s
say we wanted to put that array inside
of the love story how would you go about
that well in the s5 it’s sort of
difficult you basically have to split
the array or you have to inject the
three words any given index in es6 it’s
pretty simple you just use the spread
operator so you use three dots and then
you put or three words inside of it with
a comma so now if you do a console log
of your love story you’re basically
gonna get all the elements and if you do
join with a space that’s gonna give you
a complete sentence as you can see so
that’s as far as combining arrays now
what if you wanted to create a copy of
an array let’s say we had at Trinity we
had vortex we had mule vortex okay and
we had module so the three brains how
would you create a copy of that array
it’s actually very simple in es6 let’s
say we have a copy and we have a new
array we use the spread operator and we
basically pass the Trinity inside of it
so now if you did console.log of copy
you’re gonna get the exact same array as
before now one of the things to notice
that this way of copying is known as
shell so in contrast to deep copying the
shell copying actually preserves the
same elements inside of the array so in
this case it isn’t really no
side-effects because we’re dealing with
with strings and strings are what’s
known as primitive types other primitive
types are also integers and boolean so
if we had let’s say numbers inside of
that array that’s also fine
there’s going to be no side effects
whatsoever but if you were working with
arrays or let’s say if you had
multi-dimensional arrays then you could
potentially introduce a problem or a bug
because if you modify the elements
inside of the copied array you would
also modify the original elements inside
of the original array so this is
typically the use case where you would
reach out to utility libraries like
underscore lodash because those have
utility methods that essentially allow
you for deep copying just keep in mind
that the spread operator only provides
you with shallow copy of in this example
and array and if you have an array of
objects if you mutate the copy you’re
also going to mutate the original if you
mutate the original of course that’s
also going to affect the copy now
another use case that you might run into
is Ray concatenation so let’s say we had
an array of upper body muscles so we had
let’s say biceps
we had triceps we had let’s say chest
what else it said we had delts and maybe
back and all the biggest muscles let’s
say we also had lower body muscles and
let’s say we had glutes hamstrings quads
and maybe calves so what if you wanted
to concatenate the two arrays let’s say
you want it to have the muscles in es5
you can use Deacon Cod methods so you
could basically use the first array and
then you could call you can cut method
off of it and then you would pass the
second one as the argument and if you
did console.log of your muscles of
course that’s going to give you
basically an array that contains all the
elements of the first one and the second
one and if you wanted to reverse the
order you would basically use the lower
sort of made it separate there we’ve
used the lower body muscles and it would
pass the upper body muscles as the
argument to the contact method and as
you can see right there the lower body
muscles are gonna go first and of course
in es6 that’s no longer necessary
use the spread operator so if you wanted
the upper body muscles to go first you
put three dots is the upper body muscles
this by itself is just going to give us
the upper body muscles but if you wanted
the lower body muscles put a comma three
dots the spread operator and then you
put your lower body muscles and that’s
gonna give us the same result if you
want it the lower body muscles first
again reverse the order upper body
muscles second and that’s gonna give us
all the muscles of the lower body and
the upper body no the other use case
that you actually saw in the previous
video would be to convert an array like
object into an array so you already see
the use case with arguments Watson we
had a simple function here print and we
basically wanted to print all the
elements that were passed into it so the
way you would use it as let’s say print
JavaScript is awesome okay and what you
would do next is you would basically
call console.log with the arguments with
the spread operator that basically
extracts all the elements of the
arguments object inside of the log
method on the console object okay now if
you wanted to access the arguments as an
array let’s say we would basically
basically do arts equals and we have an
array we have the three dots and the
arguments object if you wanted to
console.log that the arts of course
that’s gonna give us an array of all the
strengths that we passed they don’t have
to be shrinks they could also be you
know numbers that’s gonna give us an
array of those numbers think of a
primitive objects they could even be
functions they could basically be
anything that you provide now the other
use case would be when working with Dom
elements so I’m going to open up the
HTML tab on left okay my bring back thi
was but let’s say we had buttons here
let see we had a submit button and we
also had a say cancel
but we’ve made it up over there well so
does that look like let’s see we have
two buttons okay what if you wanted to
access those buttons as Dom elements
typically you would do something like
this so let’s say let the buttons equals
and then we could do document get
elements by tag name okay wanna target
the buttons
let’s do console.log buttons see what
that gives us and the log is too large
let’s open the dev tools well that gives
us an HTML collection interesting this
is a perfect place for a bug so if you
thought that the buttons object would be
an array and if you try to do something
like buttons for each and let’s see we
even tried to provide a callback one
date button and you want it to do a
console log of that button you’re gonna
see that it gives us a type error
because buttons for each is not a
function meaning that there’s no for
each method on the buttons object
whatever the buttons object is in this
case it’s an HTML collection this is
similar to the example where we had the
arguments object when we couldn’t also
call any array methods off of that
object and that’s understandable because
neither the arguments object nor the
HTML collection are arrays they’re
actually object and that’s why you can’t
call array methods onto them but what we
could do is we could use a new spread
operator right we could put the three
dots close the bracket that’s gonna give
us an array of all the buttons or
basically all the elements that this
that the result of this call would
contain so many call documents get
elements by tag name and you pass the
button that’s going to give us an HTML
collection but if you extract all the
elements of that collection into an
array you’re gonna get an array with all
the buttons and now you could apply the
for each method onto that array and you
could basically look through them so
that’s pretty useful now let’s remove
all that because we no longer needed
let’s close the dev tools I’m going to
bring
whatever we had before let’s clear out
the logs now let’s move on to objects
one of the use cases when working with
objects would be to clone objects so
let’s see we had a rectangle here and
it’s basically going to be a set of
different styles so let’s say width 200
pixels let’s say we had height 100
pixels let’s say we also had background
was green let’s say we had opacity of
0.5 and let’s say we wanted to create a
copy of that object in the fast
especially with es5 you could do
something like this you could do for
copy holes you could use object assign
method typically the first element would
be an empty object this would be their
target object and then the second one
would be the source object so we could
pass the rectangle if you did
console.log off copy that’s gonna give
us a copy of that object but all the
properties and all the property values
now what the assign metal aoz us to do
is to basically copy innumerable and own
properties from either one or more
source objects that you provide the
first argument that you provide is
basically the target object you know we
could already have some of the
properties so let’s say we had font size
12 pixels the resulting object is
already gonna have the font size but
it’s also going to have all the
properties of the rectangle now
rectangle is not the only source object
that we could provide we could also pass
another object let’s do color black okay
and that’s another object and the color
property of this object is also going to
be inserted into the resulting object as
you can see right there color black so
the three properties of all of those
objects are going to be stored instead
of a copy and the very first one
basically used as the target and the
subsequent objects are going to be used
as sources now if you were using this
property it becomes really simple we’ll
have a
and we basically have an empty object
with three dots this right operator and
then you basically put your rectangle
like so it doesn’t seem like Colton
likes the syntax what’s enable Babel
here yep and we get the exact same copy
and of course you could put more
properties let’s say we had color yellow
okay you get proof properties before or
after let’s say font size 12 pixels and
actually order of properties the way you
put them does matter we’re gonna see
this in a follow up example in a few
minutes but for now just remember that
neither the object of Sun method nor
this product Reiter allow you to perform
deep cloning
so the cloning that you see here when we
create a copy that’s basically doing a
shell copy if you had properties and
those properties contained objects so
let’s say we had and take biography
property here and this was an object
let’s say with color black font style
perhaps italic then when you copy the
rectangle object it would also copy a
reference to that same typography object
so if you modified the typography object
on the rectangle would also affect the
same object and the copy in fact let’s
do that let’s let’s prove that so let’s
do it
tangle dot typography dot
color equals red and let’s do
console.log rectangle and let’s do
Council of copy let’s see what happens
you’re gonna see that we get two objects
the first one is a rectangle the second
one is the copy and that copy is also
going to contain the font size and the
color but you can already see that when
we modified the color on the typography
property of the rectangle we assign red
to it
we also indirectly modified the color of
the typography property of the second
object of the copy so this just
basically means that the spread operator
only goes one level deep and it doesn’t
allow for deep copying or deep cloning
and this goes the same for object aside
method as well
and like I said before this is a typical
use case where you would use a library
like
lodash underscore or Ronda so just to
reiterate to create a simple copy you
basically use the two curly braces
create a new object and you pass your
rectangle and this is basically going to
create a shallow copy of the rectangle
now let’s talk about merging objects
let’s say we had an option go background
and this was basically a set of styles
for the background let’s say position
well as sinner let’s say size was
covered so that it’s full sized let’s
say we also had image and this was
basically a URL and maybe something like
background PNG okay let’s say we also
had topography styles and we had
something like color red and font size
of 10 pixels and maybe also line height
of 1.5 okay so if you wanted to merge
the two objects in the past you can use
the object assign method let’s say we
had styles and with the object assigned
first of all you have your target object
that’s going to be an empty object but
then you also have background and then
you have typography if you did
console.log styles it’s gonna give us an
object that’s going to contain both the
typography properties as well as the
background properties but of course any
a sexy no longer have to do this you can
use this predator so similar to how you
would do this with arrays you can put
the three dots with a spirit operator
you would have your background and then
you would have your typography like so
and this is going to give us the exact
same object as before okay now another
use case would be creating a new object
from an old one so let’s say we had a
human object and of course every single
and he also agreed is air okay and maybe
also sleeps typically eight hours but
then it kind of depends now let’s say we
also had a super human and the super
human is going to run fast and he also
jumps high so if you wanted to attract
all the properties of the human inside
of the super human how would you go
about that in es5 you could use the
object assigned by food okay and the
first thing you do is you pass all the
properties that the super human exhibits
and then in second you pass the human
object and then if you did console.log
super human you’re basically gonna get
all of those properties together now
keep in mind the syntax of the object
assign method because the first thing
you do is you pass a target right the
target object and the second thing you
do is you pass resources in this case we
only have one we have the human object
the important thing to know it is that
the properties in the source or the
sources are going to override the
properties in the target so for example
if this super human actually sleeps
let’s say only two hours and you pass
the human as the source you’re gonna see
that resulting object is going to be a
human that sleeps eight hours even
though it’s a super human that also runs
fast and jumps high so one way to
alleviate that would be to first pass an
empty object and pass the human and then
lastly pass all the properties of the
super human that’s basically going to
overwrite anything that goes before it
but let’s say if you wanted to use the
es6 syntax
let’s do super human it’s going to be a
new object let’s extract everything that
the human does and let’s also say runs
fast and also jumps high and of course
sleeps two hours the properties that we
pass after the human object are
basically going to overwrite anything
that the human object provides and of
course just like before if you pass
those properties first you can expect
you’re gonna get the eight hours eight
hours of sleep
four words and in fact once we do
console.log superhuman we’re gonna get
eight hours and that’s because whatever
the properties that human has if they
collide they’re gonna override whatever
this superhuman has but if you provide
those properties first like so let’s
remove this space you’re gonna see that
we got two hours of sleep and of course
we got the jumps high and runs fast
properties now the last thing to note is
that the spread operator can also be
combined with the structuring of objects
so let’s say we had it post the title
was 10 things I love about JavaScript
the this cleaner was all of this info is
subjective okay and then let’s say we
had an author Alex and we also had
created at timestamp and let’s say this
was created just now so this is
basically going to be an integer or a
timestamp that represents the time of
basically now so let’s say that we
wanted to extract properties of that
post object so we’ll wanted to get hold
of the title disclaimer but we also
wanted to gather two other remaining
properties as a separate object so if
you use this proper ATAR for that let’s
put them into meta variable and let’s
assign it to post so once we do
console.log of title disclaimer and as
well as the meta object so we’re gonna
get everything that you expecting any
other title we can get the disclaimer
and we’re also going to get an object
that basically contains the author and
create it out if you add at Moorfields
let’s say we added stars it was rated at
5 we’re also gonna get these stars as
part of the metal object because we
basically extract
all the remaining properties inside of
that made of objects so this is just one
of the examples of how you can combine
the structuring as well as the sprite
operator now basically when it comes to
the rest operator it basically deals
with a single use case and that’s the
use case when we have a variable number
of function arguments so one of the
examples that I already gave in this
video
would be to print out all the strings
that you provide so let’s say we had a
function I’m gonna call it echo when you
call that function you would expect to
basically print out all the strings that
you give to it so let’s say we have
javascript is a language okay and the
way you could print them out is one way
to do it would be to use the spread
upper here and you could extract the
arguments object as individual elements
we’re gonna get all the strings in the
right but the other thing you could do
is you could also use the rest operator
in order to extract all the arguments
you provide to the function into a
single array so in this case we could
have arts and if we did console.log arcs
of course in this case we would still
have to use the spread app narrator in
order to extract those arguments but
what this would allow us to do is to
basically use arrow functions so if you
wanted to use a function expression as I
talked about before we wanted to have an
echo variable and we wanted to assign a
function to it we could use an error
function
let’s pass in the arcs in this case we
could use the rest operator in order to
get an array of elements that we pass
then you remove the curly braces and
then then you have your console log like
so and this is still going to work just
fine so as I mentioned before if you
want to take the es5 approach no problem
with that just keep in mind that in that
case you would be relying on the native
arguments object which is not really an
array and you can actually apply any
array methods onto it and the other
thing is it also has internal properties
that are specific to itself like the
collie property so again it’s not really
an array it’s actually an object and of
course the biggest disadvantage is that
it’s actually not available inside of
arrow functions if you try to do
constant log of the arguments object
inside of an arrow function like so like
we’ll have one here let’s do console log
arguments you would expect that it’s
going to be available but actually it’s
not we get a reference error so of
course the arguments object is its
that’s just simply one
things to keep in mind that the
arguments object is not available at set
of arrow functions if we go back to the
rest syntax here we have an argument
array that’s basically in array of all
the elements that we pass inside of the
function so the benefits here is that
you could use this approach with the
rest operator with both traditional and
arrow functions you get an array object
that basically contains all the
arguments they pass inside of the
function and this also reduces the
boilerplate code in case you want to
work with the arguments as an array so
if you had a traditional function then
you would do something like array
you know prototype slice you would have
to use the call method and only then you
pass your arguments object this is
something I showed you in a previous
video this is quite a bit of boilerplate
code if you just use the spread syntax
it’s much leaner much nicer and cleaner
alright so this is pretty much it for
the rest and spread syntax thanks a lot
for checking out my channel and this
video and I’m gonna meet you in the next one
Please follow and like us: