all right guys so in this video when I
talked about rest and spread operators
so consider this scenario how would you
accept a variable or arbitrary number of
arguments let’s say we have a function
you gonna call this function pick random
now let’s say the purpose of this
function is to pick a random number from
a given list now it’s very easy if you
provide an array of numbers to that
function right so we could do pick
random and then let’s say do one two
three four five once you provide an
array of numbers it becomes really easy
to extract a random element out of that
array but what if instead of an array we
had an actual list of numbers alright
how would you deal with this scenario
well prior to es6 one of the ways that
you would go about it would typically be
to use the arguments object so the
arguments object is a built-in local
variable that’s available in all
functions in JavaScript and the way it
looks like is this so it’s basically an
object that can be referred to using the
arguments keyword and that’s a special
resort keyword in the language so if you
wanted to access let’s say the first
element you could use the brackets so
you could pretty much treat it like an
array at index 0 we can access the very
first element in the next one we’ll get
access the second one and so on and in
fact it’s also possible to reassign
values at different indices so let’s say
I wanted to override the value of the
element that’s at index 2 meaning the
third element I could assign a new value
to it like this and if you can’t so log
the arguments object afterwards you’re
gonna see that we have the new value for
that element not really something that’s
advisable but it’s still permissible in
JavaScript now the arguments object
refers to the arguments that were passed
to the function but the important thing
to note about it is that the arguments
object is actually exactly that it’s an
object but it’s not an array it does
look like an array because of the
indices right we have numerical indices
for every single element inside of that
object
but turns out that the arguments object
is not an array it’s what’s known as an
like object so what that means is that
you can’t actually call a right method
on the arguments object so if you try to
do something like arguments dot or each
we could even provide a callback
function inside of it you can see that
it doesn’t actually work and we get a
type error that says that arguments dot
for each is not a function meaning that
there’s no for each method on the
arguments object now just to prove you
that the arguments object is not an
array one thing that you could do is you
could do console.log object prototype
little type to string and you could call
the call method passing the arguments
object inside of it so as you can see
right there it gives us object arguments
now if you pass let’s say just an array
to compare and contrast that you’re
gonna see that we get object array so
this right there tells you that the
arguments object is not an array in fact
it’s a built-in object of arguments type
and the only semblance that it has with
the array is its length property meaning
that you could just easily do
console.log arguments.length and that’s
gonna give you the number of elements
that you pass inside of that function so
if we added more elements we’re gonna
get six you had another one we’re gonna
get seven that’s basically the number of
arguments that you pass inside of that
function so as I said the arguments
object is not actually an array it’s an
array like object but what if you wanted
to treat the arguments object as an
array what if you wanted to apply array
methods onto it well in use five you
pretty much just had one single option
so one of the ways to go about it would
be to basically apply the slice method
on the arguments and the way you would
do that is you would basically call the
slice method off the array prototype
directly the way to do it would
basically be to call that method using
me call method now at this point I owe
you an explanation of what they call
method refers to because we’ve already
seen it but the object prototype to
string just a couple of seconds ago
basically what the call method does it’s
a
that’s available every function in
JavaScript and it basically allows you
to invoke the function with a given this
object as well as the arguments list so
in this example instead of calling the
pick random function directly using the
parentheses and on the list of arguments
we could have also used the call method
of the pick random function and then the
first argument that we provide would be
the object that’s gonna become the this
object inside of this function so just
to make this clear let’s do console.log
this and that this keyword as I
mentioned in previous videos is
basically a special keyword that refers
to the current or calling object inside
of any function or method the this
object what it refers to is going to be
whatever we pass as the very first
argument to the call method in this
example it doesn’t really matter what
this object becomes so we could easily
pass null or we could even pass
undefined
now the thing to note is that if I open
the dev tools you’re gonna see that the
console log actually gives us the window
object whenever you invoke the call
method and you pass either null or
undefined as the first argument that
argument is gonna be replaced with the
window object now if you passed an
actual object let’s say an object
literal you’re gonna see that we
actually get an object when we cancel
all this inside of the function so just
one of the things to keep in mind now if
you remember in episode 4 we talked
about classes and we had an example of
the premium account class well in fact
we use the constructor function in order
to achieve that in es5 but basically we
had a function of premium account that
was accepting it balance as well as the
number of bonus points and then if you
recall the very first thing that we did
inside of that function constructor is
we basically called the parent account
class with the call method and then we
passed this object as well as the
balance so in fact what we did is we
basically invoked the account function
using the call method and then we pass
through this object it’s basically an
instance of premium account class or
method and then we also pass the
so in essence we basically invoke the
parent constructor function using the
given object as well as the balance so
in fact this is similar to calling super
in es6 passing the balance and this is
exactly what we did on the right side
when I wrote the example in er6 okay so
hope that makes sense now this is one of
the ways to extract the arguments as an
array in fact if you did console.log and
let’s remove the first one he did
console.log args you’re gonna say that
this is gonna give us an array of all
the arguments that we passed inside of
the function and just for fun let’s just
change them let’s say we have nine zero
12:45 seven one you’re gonna get the
exact same elements in the same order
now another option to get hold of the
arguments object as an array would be to
use array from method and then you could
basically pass your arguments inside of
it so the array from method was added in
es6 it creates a new array object from
any array like or iterable object so as
I mentioned before the arguments object
is actually not an array it’s an array
like object what the array from method
allows you to do is to basically
recreate an array from that object okay
that console.log art as you can see
that’s gonna give us an array of all the
function arguments that we passed and in
fact wouldn’t need to use the qolt
method anymore we could put it back to
whatever we had before which is
basically just a simple function
invocation and then lastly instead of
using the array from method you could
simply use the new sprite operator in
order to extract the elements of the
arguments object into an array so the
way that would look like is you would
use the square brackets and then you
would put the three dots and then your
arguments object so the three dots right
there on the left
they are what’s referred to as the
spread operator or the spread syntax so
what this basically allows you to do is
it allows us to expand the arguments
object into array elements and those
elements are passed individually instead
of this new array that’s being assigned
to the argument
variable so once we have that you’re
free to call any array method unto
arguments for you to call for each you
could call map or you could call any
other method whenever the case might be
and I’m gonna change from var to let but
let’s say now we got holding the
arguments so how do we return a random
element out of that array well you might
be familiar with math.random function
and basically that method returns a
random number between 0 inclusive and 1
exclusive that number is going to be a
decimal number so in fact let’s do
console.log of that in this particular
example it’s going to give us this
number so it’s going to be between 0
inclusive meaning that it could be 0 and
1 exclusive meaning that you can get as
close to 1 as possible but it’s never
actually going to be 1 now if we
multiply that random number by the
length of arguments that we pass inside
of the function in other words if we do
that Alta play by arguments dot length
that’s basically going to give us a
random number between 0 and upto but not
including 6 and the very last thing that
we would do is would basically call
math.floor function on that result
whenever you call the floor method it’s
basically going to round down the value
so let’s say you have you know five
point seven that’s gonna be rounded down
to five if you have three points – it’s
gonna be rounded to the nearest integer
would be three so basically goes down to
the closest integer now what this
expression is gonna do it’s basically
gonna give us a random integer between 0
and 5 and this is essentially going to
be a random index we could use that in
that in order to access the element of
the argument object so in fact in this
case we don’t need to work with
arguments as an array we could work with
it as an object so we can basically
assign the result of that expression to
the index and I would simply return
arguments index so let’s do four but I
equals zero is less than 10 let’s
increment I okay and then let’s do the
log of fake random that’s gonna give us
ten different results as you can see on
the right
but we could also further simplify this
so because we use the index variable
only once we could simply put the result
inside of the square brackets like so
and this is going to work also now the
only disadvantage is that this approach
cannot work with arrow functions so one
of the things that I didn’t mention in
the video about arrow functions is that
the arrow functions don’t allow you to
access the arguments object inside of
them so if we had an arrow function
let’s convert this function declaration
to a function expression so let’s do
let’s say constant big random we’re
basically going to assign this function
to a variable now this is still going to
work let’s just check the dev tools yep
no errors but if you change that to an
arrow function right and let’s try to do
console.log arguments well you’re gonna
see that this doesn’t actually execute
and it gives us an error you’re gonna
see a reference here that says arguments
is not defined which basically means
that you’re not allowed to access the
arguments object inside of the arrow
function so how would you go about this
in this example using the arrow function
well you could use the rest operator and
basically it looks exactly the same as a
spread operator it’s three dots and then
you could put arguments basically what
this is going to do is it’s gonna take
all of the arguments that you provide to
the big random function right and it’s
basically going to stuff all them down
inside of those arguments variable and
that arguments variable is going to
become an array that holds all of the
elements that you just pass to that
function so if we do console.log of
arguments you can see that this
basically gives us an array of all the
elements that were passed instead of the
function so just to reiterate the arrest
operator it basically allows us to
represent any number of function
arguments as an array so in fact we
could pass more elements or will get
passed less no matter what the number of
elements becomes they’re always going to
be represented as this arguments
variable as an array and in fact you
don’t necessarily have to use arrow
functions with the rest operator you can
use normal functions so if we go back
to our random function it will switch
back to a function declaration you got
so log arguments that’s gonna be the
argument object but you could very
easily mask it using the arrest
operators – for the three dots arguments
and then you cancel out the arguments
that’s basically going to override the
reference to the arguments object so you
know what we’re gonna get the arguments
object as before we’re actually going to
get an array of all the elements that
you passed and that’s because of the
arrest operator that we just applied now
that’s sort of like a quick introduction
to rest and spread in the next video
we’re gonna take a closer look at both
of those and we’re gonna go through a
bunch of different examples and use
cases it you could actually in cutter
yourself so I hope you stick around and I hope to see you the next video
talked about rest and spread operators
so consider this scenario how would you
accept a variable or arbitrary number of
arguments let’s say we have a function
you gonna call this function pick random
now let’s say the purpose of this
function is to pick a random number from
a given list now it’s very easy if you
provide an array of numbers to that
function right so we could do pick
random and then let’s say do one two
three four five once you provide an
array of numbers it becomes really easy
to extract a random element out of that
array but what if instead of an array we
had an actual list of numbers alright
how would you deal with this scenario
well prior to es6 one of the ways that
you would go about it would typically be
to use the arguments object so the
arguments object is a built-in local
variable that’s available in all
functions in JavaScript and the way it
looks like is this so it’s basically an
object that can be referred to using the
arguments keyword and that’s a special
resort keyword in the language so if you
wanted to access let’s say the first
element you could use the brackets so
you could pretty much treat it like an
array at index 0 we can access the very
first element in the next one we’ll get
access the second one and so on and in
fact it’s also possible to reassign
values at different indices so let’s say
I wanted to override the value of the
element that’s at index 2 meaning the
third element I could assign a new value
to it like this and if you can’t so log
the arguments object afterwards you’re
gonna see that we have the new value for
that element not really something that’s
advisable but it’s still permissible in
JavaScript now the arguments object
refers to the arguments that were passed
to the function but the important thing
to note about it is that the arguments
object is actually exactly that it’s an
object but it’s not an array it does
look like an array because of the
indices right we have numerical indices
for every single element inside of that
object
but turns out that the arguments object
is not an array it’s what’s known as an
like object so what that means is that
you can’t actually call a right method
on the arguments object so if you try to
do something like arguments dot or each
we could even provide a callback
function inside of it you can see that
it doesn’t actually work and we get a
type error that says that arguments dot
for each is not a function meaning that
there’s no for each method on the
arguments object now just to prove you
that the arguments object is not an
array one thing that you could do is you
could do console.log object prototype
little type to string and you could call
the call method passing the arguments
object inside of it so as you can see
right there it gives us object arguments
now if you pass let’s say just an array
to compare and contrast that you’re
gonna see that we get object array so
this right there tells you that the
arguments object is not an array in fact
it’s a built-in object of arguments type
and the only semblance that it has with
the array is its length property meaning
that you could just easily do
console.log arguments.length and that’s
gonna give you the number of elements
that you pass inside of that function so
if we added more elements we’re gonna
get six you had another one we’re gonna
get seven that’s basically the number of
arguments that you pass inside of that
function so as I said the arguments
object is not actually an array it’s an
array like object but what if you wanted
to treat the arguments object as an
array what if you wanted to apply array
methods onto it well in use five you
pretty much just had one single option
so one of the ways to go about it would
be to basically apply the slice method
on the arguments and the way you would
do that is you would basically call the
slice method off the array prototype
directly the way to do it would
basically be to call that method using
me call method now at this point I owe
you an explanation of what they call
method refers to because we’ve already
seen it but the object prototype to
string just a couple of seconds ago
basically what the call method does it’s
a
that’s available every function in
JavaScript and it basically allows you
to invoke the function with a given this
object as well as the arguments list so
in this example instead of calling the
pick random function directly using the
parentheses and on the list of arguments
we could have also used the call method
of the pick random function and then the
first argument that we provide would be
the object that’s gonna become the this
object inside of this function so just
to make this clear let’s do console.log
this and that this keyword as I
mentioned in previous videos is
basically a special keyword that refers
to the current or calling object inside
of any function or method the this
object what it refers to is going to be
whatever we pass as the very first
argument to the call method in this
example it doesn’t really matter what
this object becomes so we could easily
pass null or we could even pass
undefined
now the thing to note is that if I open
the dev tools you’re gonna see that the
console log actually gives us the window
object whenever you invoke the call
method and you pass either null or
undefined as the first argument that
argument is gonna be replaced with the
window object now if you passed an
actual object let’s say an object
literal you’re gonna see that we
actually get an object when we cancel
all this inside of the function so just
one of the things to keep in mind now if
you remember in episode 4 we talked
about classes and we had an example of
the premium account class well in fact
we use the constructor function in order
to achieve that in es5 but basically we
had a function of premium account that
was accepting it balance as well as the
number of bonus points and then if you
recall the very first thing that we did
inside of that function constructor is
we basically called the parent account
class with the call method and then we
passed this object as well as the
balance so in fact what we did is we
basically invoked the account function
using the call method and then we pass
through this object it’s basically an
instance of premium account class or
method and then we also pass the
so in essence we basically invoke the
parent constructor function using the
given object as well as the balance so
in fact this is similar to calling super
in es6 passing the balance and this is
exactly what we did on the right side
when I wrote the example in er6 okay so
hope that makes sense now this is one of
the ways to extract the arguments as an
array in fact if you did console.log and
let’s remove the first one he did
console.log args you’re gonna say that
this is gonna give us an array of all
the arguments that we passed inside of
the function and just for fun let’s just
change them let’s say we have nine zero
12:45 seven one you’re gonna get the
exact same elements in the same order
now another option to get hold of the
arguments object as an array would be to
use array from method and then you could
basically pass your arguments inside of
it so the array from method was added in
es6 it creates a new array object from
any array like or iterable object so as
I mentioned before the arguments object
is actually not an array it’s an array
like object what the array from method
allows you to do is to basically
recreate an array from that object okay
that console.log art as you can see
that’s gonna give us an array of all the
function arguments that we passed and in
fact wouldn’t need to use the qolt
method anymore we could put it back to
whatever we had before which is
basically just a simple function
invocation and then lastly instead of
using the array from method you could
simply use the new sprite operator in
order to extract the elements of the
arguments object into an array so the
way that would look like is you would
use the square brackets and then you
would put the three dots and then your
arguments object so the three dots right
there on the left
they are what’s referred to as the
spread operator or the spread syntax so
what this basically allows you to do is
it allows us to expand the arguments
object into array elements and those
elements are passed individually instead
of this new array that’s being assigned
to the argument
variable so once we have that you’re
free to call any array method unto
arguments for you to call for each you
could call map or you could call any
other method whenever the case might be
and I’m gonna change from var to let but
let’s say now we got holding the
arguments so how do we return a random
element out of that array well you might
be familiar with math.random function
and basically that method returns a
random number between 0 inclusive and 1
exclusive that number is going to be a
decimal number so in fact let’s do
console.log of that in this particular
example it’s going to give us this
number so it’s going to be between 0
inclusive meaning that it could be 0 and
1 exclusive meaning that you can get as
close to 1 as possible but it’s never
actually going to be 1 now if we
multiply that random number by the
length of arguments that we pass inside
of the function in other words if we do
that Alta play by arguments dot length
that’s basically going to give us a
random number between 0 and upto but not
including 6 and the very last thing that
we would do is would basically call
math.floor function on that result
whenever you call the floor method it’s
basically going to round down the value
so let’s say you have you know five
point seven that’s gonna be rounded down
to five if you have three points – it’s
gonna be rounded to the nearest integer
would be three so basically goes down to
the closest integer now what this
expression is gonna do it’s basically
gonna give us a random integer between 0
and 5 and this is essentially going to
be a random index we could use that in
that in order to access the element of
the argument object so in fact in this
case we don’t need to work with
arguments as an array we could work with
it as an object so we can basically
assign the result of that expression to
the index and I would simply return
arguments index so let’s do four but I
equals zero is less than 10 let’s
increment I okay and then let’s do the
log of fake random that’s gonna give us
ten different results as you can see on
the right
but we could also further simplify this
so because we use the index variable
only once we could simply put the result
inside of the square brackets like so
and this is going to work also now the
only disadvantage is that this approach
cannot work with arrow functions so one
of the things that I didn’t mention in
the video about arrow functions is that
the arrow functions don’t allow you to
access the arguments object inside of
them so if we had an arrow function
let’s convert this function declaration
to a function expression so let’s do
let’s say constant big random we’re
basically going to assign this function
to a variable now this is still going to
work let’s just check the dev tools yep
no errors but if you change that to an
arrow function right and let’s try to do
console.log arguments well you’re gonna
see that this doesn’t actually execute
and it gives us an error you’re gonna
see a reference here that says arguments
is not defined which basically means
that you’re not allowed to access the
arguments object inside of the arrow
function so how would you go about this
in this example using the arrow function
well you could use the rest operator and
basically it looks exactly the same as a
spread operator it’s three dots and then
you could put arguments basically what
this is going to do is it’s gonna take
all of the arguments that you provide to
the big random function right and it’s
basically going to stuff all them down
inside of those arguments variable and
that arguments variable is going to
become an array that holds all of the
elements that you just pass to that
function so if we do console.log of
arguments you can see that this
basically gives us an array of all the
elements that were passed instead of the
function so just to reiterate the arrest
operator it basically allows us to
represent any number of function
arguments as an array so in fact we
could pass more elements or will get
passed less no matter what the number of
elements becomes they’re always going to
be represented as this arguments
variable as an array and in fact you
don’t necessarily have to use arrow
functions with the rest operator you can
use normal functions so if we go back
to our random function it will switch
back to a function declaration you got
so log arguments that’s gonna be the
argument object but you could very
easily mask it using the arrest
operators – for the three dots arguments
and then you cancel out the arguments
that’s basically going to override the
reference to the arguments object so you
know what we’re gonna get the arguments
object as before we’re actually going to
get an array of all the elements that
you passed and that’s because of the
arrest operator that we just applied now
that’s sort of like a quick introduction
to rest and spread in the next video
we’re gonna take a closer look at both
of those and we’re gonna go through a
bunch of different examples and use
cases it you could actually in cutter
yourself so I hope you stick around and I hope to see you the next video
Please follow and like us: