the tc39 group has actually been very
generous with regards to the array API
so there’s been a lot of new methods
added in es6 and we’re gonna take a look
at all those methods in this video so
first of all just to have a silicon
initial setup let’s say we have a list
of users here and it’s basically just
going to be an array that contains a
bunch of objects so let’s say the first
one is going to have a user name it’s
gonna be deep Alex okay he’s gonna have
an email of Alex gmail.com not a valid
email of course but let’s say you also
have two other objects we have Joe okay
Joe of Kino comm also gonna have mark
and I’m also going to have a unique
email next let’s say we also have a user
input of an email here so imagine your
user types and the email address to the
input box so we might have Joe at
gmail.com okay
so let’s say you have this email address
but you wanted to find the user inside
of the users array that has that email
address so there’s a special method in
es6 that ozzie to do that and the way to
do that is well let’s say you want to
get the user object right so what you
might do is you might call the new find
method on the user’s array right and
once you do that you need to provide a
callback function so the callback
function is going to receive the user
object so we’re basically going to loop
through every single user inside of the
users array and it sort of resembles in
the map method and that also has a
callback passed into it so the user like
I said is going to be every single user
object and once we iterate over the
array okay and once we get the user
object we can also have a check now in
this case we can have the following so
if the user email matches the email
address that we have in a constant over
here then we know that the emails match
and this is the right user object and
once we do that and then I have a check
so if they do find the user
do console.log let’s use template
strings here we’re gonna say you’re
sorry your username is I’m just gonna
inject user dot username okay otherwise
we’re gonna say console.log sorry we
could not find a user with that email
okay something like that
so as you can see here we get your
username is Joe and in fact if we consul
vlog the user object just to see what we
get we essentially get in that user
object from the array so once again what
the fine method does is it basically
returns the value of the first element
that satisfies a given test that
satisfies the given callback function so
we call that function essentially
returns a condition here so we’re
checking if the user email so
essentially the email of this user
object so like I said this would be one
of the objects when we iterate over the
users right if that email matches the
email address outside of the callback so
it’s just a variable defined outside
then we know that this is the right user
and we want to return it so the find
function is going to stop execution and
it’s going to return that user object
okay so just keep in mind that this
needs to be an expression that evaluates
to true or false okay and if we’re not
able to find a user with that email that
well then in that case the user object
would be undefined so for example if I
were looking for let’s say you know okay
we are not being able to find a user
with that email address because we don’t
have it inside of the users already and
in fact you could also use destructuring
here so instead of getting the entire
user object with it also gets mmm
we’re looking for the email property but
we’re gonna call it a user email because
we already have an email constant so I’m
gonna grab that and I’m gonna check the
user email against the email it’s sort
of optional in this scenario but I mean
it’s up to you can keep it if you want
and as you can see here the user object
is actually undefined now the other
things we
to do is you could also get the index of
that user object so instead of getting
the user let’s get the index of that
user and the function would need to
change to find index and the rest of the
function is gonna stay the same
in fact I’m gonna switch back to user
because we already have the email
constant and let’s also console.log the
index and let’s say if we do have the
index then we want to show it so your
index is and what that’s gonna be the
index of the user and of course we need
to adjust that if the index and doesn’t
equal minus one because as you can see
here if we’re not able to find a user
with that email address we’re gonna get
minus one so let’s switch it back to
let’s actually use up to Alex okay as
you can see here we get index zero if
you switch it to a Joe that’s gonna be a
next one of course and if it’s mark it’s
gonna be index 2 but if it’s somebody
who’s not a user or not in the list of
users let’s say Jordan we’re of course
gonna get minus one for the index and
it’s gonna go through the second clause
okay now another method in es6 would be
to get the keys of an array so let me
show you what that means so let’s say we
have a console log statement and we
still have the users so I wanted to call
the keys method on the users array and
as you can see here it’s gonna give us
an iterator in fact I’m gonna open the
dev tools and let’s expand this object
so as you can see here it’s not an array
it’s actually an array iterator and
that’s a special type of object that the
keys method returns and that object is
something that we can actually use
inside of a for loop so let’s do exactly
that so I’m gonna say for constant key
of users keys
so we’re gonna get the keys of the users
basically the indices and we’re just
gonna console.log each key okay I’m
gonna close off the dev tools and as you
can see here we get everything from 0 to
2 so 0 1 2 and of course the results are
completely based on the indices
the Ouray so the euro changes the keys
that we get are also that change now
giving the indices amun-ra is not
something you would typically do very
often but it’s still a possibility so if
you do find a use case that requires
that feel free to use the keys method
and on the same notes notice that we’re
using a constant here
now you might curious constants cannot
be we assigned values so for instance
what I’m talking about is let’s say I
have a constant here with the name of
Alex so if I were to reassign the name –
let’s say Nina of course that’s going to
fail now the reason that fails if you
open the dev tools we get a type error
and we talked about that before and the
reason that happens is because you
cannot we assign values to constants so
you can change the inner properties of
an object so let’s say this was not a
string not a primitive but let’s say an
object for the name of Alex and I try to
change the value of that name well let’s
actually change it to for instance first
name just for clarity and I tried to
change the first name property on that
name object and it were to constant long
name that is still going to work because
we’re modifying the inner value of the
object but the binding itself cannot be
changed the value can be changed but the
binding to the variable cannot because
we’re using a constant now you might be
asking yourself if that’s the case then
how is the key working inside of the
loop because we’re basically looking
through the keys and then we get the
value of the key and we assign it to the
key variable inside of that loop well
what happens is the constant it can
actually be used inside of a for a loop
and in fact if you’re really curious
about it you can read it up in the
actual spec but the spec does actually
have a definition for a for off loop in
which case you might have a constant
variable to which you assign the value
of an iterable property that you are
iterating over in this case now this is
not going to work in a traditional loop
so just to clarify what I’m talking
about here is that saying we have
a for-loop so we might have a typical
loop you think I want to loop ten times
and want to increment the value of I
okay I’m just gonna do console.log of
value so this is just a normal loop for
loop and as you can see here we get an
error that says the assignment to
constant variable and it’s basically not
allowed and this is what I’m talking
about so here we re assigning the value
to the constant but in this case what
we’re actually doing is we were
recreating the constant variable inside
of the loop on every single iteration
and that’s why it’s able to work and in
the second example with the for loop
we’re trying to reassign the value we
still have the I variable it’s the same
real was before where we’re trying to
reassign the value to it and that’s why
it fails but with the for loop we’re
actually creating a new variable and
that’s why we don’t get the error
anyways this was sort of like a side
note just keeping in mind that you are
allowed to use constants with the four
of loop and you’re not gonna get any
errors now they’re also used to be a
values method so in the past we were
able to do something like users dot
values similar to the keys but if you’re
gonna try that instead of any modern
browser you’re gonna get an error and
the error is basically telling you that
there’s no values method on the user’s
array now you could actually verify that
so for example there is a keys method in
the array prototype as you can see here
all right we get a true but if you were
trying to look for values in the array
part of them you’re gonna get false so
that’s a good indication as to what’s
going on there’s no values method on the
array prototype at the moment even
though the values method is actually
defined in the spec now what we do have
available in the browser’s is another
method known as entries so let’s do
console.log okay
any of the users entries alright and as
you can see we get an iterator it
doesn’t really tell us much but let’s
see what happens if we use that iterator
inside of a for loop so I’m going to use
a cost
again let’s do let’s have a pair or
entry of users dot entries okay and then
we’re gonna console.log that pair okay
let’s see what we get we get three
results so as you can see here we get
three arrays and the first element in
the array would be the index the second
element in the array would be the actual
object and this is actually pretty cool
because you could do something like this
so using these structuring we can
actually extract the index as well as
the user object from the entry so the
entry is gonna give us an array but
we’re gonna destructor that array in
order to get the index and the user and
let’s also console.log both of those
values I’m just gonna clear out log
let’s console log those values and as
you can see here we’re gonna get the
index for every single user object and
we also get the user object itself so
this is actually something that might be
very useful in certain scenarios so just
be mindful of that method let’s move on
to some of the other methods and the
next one on the list would be the from
method so I’m actually gonna open up the
HTML tab over here and I’m gonna
minimize the console a little bit so
let’s say we had a few buttons here
button one button is gonna say I’ll take
checkout and the other one is gonna say
cancel so imagine you have like sort of
like an online store right and we wanted
to bind an event handler to the checkout
button now I’m gonna give it an ID I’m
gonna call it checkout okay first of all
let’s get the document gift element by
ID we’re gonna get that checkout button
and we’re gonna add an event listener to
it it’s gonna fire on click events and
we’re also gonna get an event object
okay so let’s just console.log clicked
for now just to see that it actually
works so when I click on checkout we get
clicked right so let’s say once you
click on the checkout button we wanted
to disable both the checkout as well as
the cancel button so you
imagine that behind-the-scenes you would
be making some kind of an API call or
doing some kind of other asynchronous
processing but for the time being you
wanted to disable both buttons so that
the user will not be able to you know
cancel or click on the checkout again
and what’s not so the one thing we could
do is we forget the buttons from the Dom
right so we could do document get
elements by tag name and we’re looking
for all the buttons and of course be
careful because that’s gonna look for
all the buttons in the Dom you might
also want to add a class to each button
and then target and then target the
buttons by the class but in this simple
demo example I think that’s just fine so
once we get the buttons let’s cancel
them log out okay I’m gonna open the dev
tools so when you click on checkout
you’re actually gonna see that we get an
HTML collection now you might expect
that you will get an array but this
object is not array it’s actually an
HTML collection now I showed you before
that in order to get an array you might
simply just restructure the elements of
that collection into an array so once
you do that when we click on checkout
you’re actually going to see that we get
an array instead of HTML collection now
there’s a different way to do this as
well there’s a new method in es6 that’s
known as a way from so when you pass
three buttons in fact let’s call them
buttons with an S because we got two
buttons so once we do that with two
console.log away from passing that
collection inside and once you click on
checkout you’re gonna see that we get an
array of buttons once again now of
course like I said we wanted to disable
them so once we do get them let’s also
perhaps let’s do for each on each button
we want to set the disabled actually to
true I don’t want to disable the buttons
so you click on checkout that disables
the buttons but let’s say you also
wanted to get the reference to the new
buttons I’m just gonna say disabled
buttons is going to be equal to a call
to array from method
and then we’re basically gonna do
instead of for each because for each
doesn’t actually turn anything we’re
actually gonna call a map so in this
case I’m gonna use a bit of a different
form it’s going to be an arrow function
but we’re gonna use a body for that
function we’re gonna first set the
disabled attribute to true but then
we’re gonna return the button itself and
let’s do console.log of disabled buttons
let’s click on check out that disables
the buttons and then back in the log
over here we get an array of two
elements now it turns out that if you
wanted to map through the elements in
this fashion you don’t necessarily have
to nest another map call on it you could
actually pass in that callback as a
second argument to the from method okay
so if I remove the map function all
together let’s click on check out again
and we get the exact same array just
like before and now the buttons should
be disabled so if you look for disabled
attribute it’s gonna be set to true so
this is just one of the ways how you can
use the array from method now just so
that we’re clear with how the method
works and operates there’s a bit of a
different use case that you might
consider let’s say you wanted to create
an array so I’m gonna say numbers okay
and we wanted to create an array but
wanted to create an array that contains
five elements so one two three four five
the way you would do that is you could
also pass an iterable object as the
first argument so it’s just gonna be an
object that has a length property just a
normal object we’re using object literal
and we’re also gonna pass a second
argument a callback function that’s
going to accept the value so in this
case it’s gonna be undefined but of
course you could call it anything it’s
just basically I’m gonna use it
underscore let’s say it’s gonna be an
undefined value of undefined and the
second argument of V the actual index
and once you do that you want to return
the index but you want to increment it
by one
so let’s actually see what that’s gonna
give us the console of the numbers once
you do that we get fifty elements
now that’s a bit too much let’s reduce
it to five so we get five elements
everything from one to five now if you
wanted to actually see what’s going on
behind the scenes
you might console.log not to the
underscore as well as the index but we
also need to return a value in this case
we’re incrementing the index so we get
undefined in zero meaning that there is
a new array in which the first value
would be undefined
the value at index zero undefined the
same for every other value but then we
have five of them right index from zero
to four five values and then when we map
through them one when the second
callback is being applied to every
single element in the new array it’s
going to increment the index by one
meaning we’re starting at zero the ones
are incremented by one it’s gonna be one
and that’s gonna happen for every single
element that’s why we get everything
from one to five now of course be
careful here so let’s go back to the
previous form where we just have to
index make sure you use pre increment
syntax because if you try to use post
increment what you’re gonna end up here
with is first you return the index and
then you increment it which is pretty
much useless because you’re incrementing
the index which is a private variable
inside of that callback you want to make
sure that you first increment the index
and then you return the value from the
callback and as you can see here we get
everything from 1 to 5 so that’s just
one of the use cases that you might run
into another array method that’s been
added and es6 is array of method so
let’s use something like this we have a
constant log we wanted to console log
array of let’s say 42 what the of method
is gonna do it’s basically going to take
hit value and in fact it could be as
many values as you wish so let’s say 42
minus 5 0 no matter how many values you
pass it’s going to wrap those values in
an array so it’s basically gonna give
you an array with those values and like
I said the number of arguments is
complete bull and the arguments don’t
necessarily have to be numbers in fact
they could be you know objects you can
mix different types you could even pass
the symbol inside
now you might be familiar with the array
function so for instance let’s say we
have an array function and we wanted to
pass 3 to it now what do you think
that’s going to give us well
the array function is actually a little
bit ambiguous in the sense that if you
have more than one argument it’s going
to treat those arguments as array
elements otherwise it’s going to treat
these single argument as the length of
the array so in this case we’re creating
an array with three empty spots now if
you change it to five of course that’s
gonna give you an array with five empty
spots but if I pass more than one
argument so let’s say I pass one into
whatever three four as you can see here
it’s gonna create an array with those
elements so if I reduce it to two
elements it’s gonna give me that now as
you can see it’s a little bit different
from array of because if I just pass
five to it that’s gonna give me an array
with the element of five it’s just
basically gonna wrap the five but if I
use array as a function that’s gonna
create an array with five empty spots so
the difference is pretty subtle and of
course if you pass let’s say your string
this string is actually going to be
treated as an element so it’s going to
be inserted into a new array and you get
a new array that contains that tree
inside of it so that’s about it for the
of method now there’s actually a few
other ones so there’s a fill method on
the array prototype the fill method
basically fills an array with a given
value at given innocence that’s what it
does and there’s also another one that’s
known as copy within and this guy
basically to have a shallow copy of an
array based on given indices now these
two methods are a little bit cumbersome
and a little bit confusing to write and
in most cases you could simply use the
spread operator in order to simplify the
operations so I’ll leave it up to you if
you’re interested make sure to check out
the MDM Docs but like I said in most
cases these predatory owes a lot more
readable and understandable so a thing
we’re gonna close off at this point
thanks a lot for watching and I’ll see you in the next video
generous with regards to the array API
so there’s been a lot of new methods
added in es6 and we’re gonna take a look
at all those methods in this video so
first of all just to have a silicon
initial setup let’s say we have a list
of users here and it’s basically just
going to be an array that contains a
bunch of objects so let’s say the first
one is going to have a user name it’s
gonna be deep Alex okay he’s gonna have
an email of Alex gmail.com not a valid
email of course but let’s say you also
have two other objects we have Joe okay
Joe of Kino comm also gonna have mark
and I’m also going to have a unique
email next let’s say we also have a user
input of an email here so imagine your
user types and the email address to the
input box so we might have Joe at
gmail.com okay
so let’s say you have this email address
but you wanted to find the user inside
of the users array that has that email
address so there’s a special method in
es6 that ozzie to do that and the way to
do that is well let’s say you want to
get the user object right so what you
might do is you might call the new find
method on the user’s array right and
once you do that you need to provide a
callback function so the callback
function is going to receive the user
object so we’re basically going to loop
through every single user inside of the
users array and it sort of resembles in
the map method and that also has a
callback passed into it so the user like
I said is going to be every single user
object and once we iterate over the
array okay and once we get the user
object we can also have a check now in
this case we can have the following so
if the user email matches the email
address that we have in a constant over
here then we know that the emails match
and this is the right user object and
once we do that and then I have a check
so if they do find the user
do console.log let’s use template
strings here we’re gonna say you’re
sorry your username is I’m just gonna
inject user dot username okay otherwise
we’re gonna say console.log sorry we
could not find a user with that email
okay something like that
so as you can see here we get your
username is Joe and in fact if we consul
vlog the user object just to see what we
get we essentially get in that user
object from the array so once again what
the fine method does is it basically
returns the value of the first element
that satisfies a given test that
satisfies the given callback function so
we call that function essentially
returns a condition here so we’re
checking if the user email so
essentially the email of this user
object so like I said this would be one
of the objects when we iterate over the
users right if that email matches the
email address outside of the callback so
it’s just a variable defined outside
then we know that this is the right user
and we want to return it so the find
function is going to stop execution and
it’s going to return that user object
okay so just keep in mind that this
needs to be an expression that evaluates
to true or false okay and if we’re not
able to find a user with that email that
well then in that case the user object
would be undefined so for example if I
were looking for let’s say you know okay
we are not being able to find a user
with that email address because we don’t
have it inside of the users already and
in fact you could also use destructuring
here so instead of getting the entire
user object with it also gets mmm
we’re looking for the email property but
we’re gonna call it a user email because
we already have an email constant so I’m
gonna grab that and I’m gonna check the
user email against the email it’s sort
of optional in this scenario but I mean
it’s up to you can keep it if you want
and as you can see here the user object
is actually undefined now the other
things we
to do is you could also get the index of
that user object so instead of getting
the user let’s get the index of that
user and the function would need to
change to find index and the rest of the
function is gonna stay the same
in fact I’m gonna switch back to user
because we already have the email
constant and let’s also console.log the
index and let’s say if we do have the
index then we want to show it so your
index is and what that’s gonna be the
index of the user and of course we need
to adjust that if the index and doesn’t
equal minus one because as you can see
here if we’re not able to find a user
with that email address we’re gonna get
minus one so let’s switch it back to
let’s actually use up to Alex okay as
you can see here we get index zero if
you switch it to a Joe that’s gonna be a
next one of course and if it’s mark it’s
gonna be index 2 but if it’s somebody
who’s not a user or not in the list of
users let’s say Jordan we’re of course
gonna get minus one for the index and
it’s gonna go through the second clause
okay now another method in es6 would be
to get the keys of an array so let me
show you what that means so let’s say we
have a console log statement and we
still have the users so I wanted to call
the keys method on the users array and
as you can see here it’s gonna give us
an iterator in fact I’m gonna open the
dev tools and let’s expand this object
so as you can see here it’s not an array
it’s actually an array iterator and
that’s a special type of object that the
keys method returns and that object is
something that we can actually use
inside of a for loop so let’s do exactly
that so I’m gonna say for constant key
of users keys
so we’re gonna get the keys of the users
basically the indices and we’re just
gonna console.log each key okay I’m
gonna close off the dev tools and as you
can see here we get everything from 0 to
2 so 0 1 2 and of course the results are
completely based on the indices
the Ouray so the euro changes the keys
that we get are also that change now
giving the indices amun-ra is not
something you would typically do very
often but it’s still a possibility so if
you do find a use case that requires
that feel free to use the keys method
and on the same notes notice that we’re
using a constant here
now you might curious constants cannot
be we assigned values so for instance
what I’m talking about is let’s say I
have a constant here with the name of
Alex so if I were to reassign the name –
let’s say Nina of course that’s going to
fail now the reason that fails if you
open the dev tools we get a type error
and we talked about that before and the
reason that happens is because you
cannot we assign values to constants so
you can change the inner properties of
an object so let’s say this was not a
string not a primitive but let’s say an
object for the name of Alex and I try to
change the value of that name well let’s
actually change it to for instance first
name just for clarity and I tried to
change the first name property on that
name object and it were to constant long
name that is still going to work because
we’re modifying the inner value of the
object but the binding itself cannot be
changed the value can be changed but the
binding to the variable cannot because
we’re using a constant now you might be
asking yourself if that’s the case then
how is the key working inside of the
loop because we’re basically looking
through the keys and then we get the
value of the key and we assign it to the
key variable inside of that loop well
what happens is the constant it can
actually be used inside of a for a loop
and in fact if you’re really curious
about it you can read it up in the
actual spec but the spec does actually
have a definition for a for off loop in
which case you might have a constant
variable to which you assign the value
of an iterable property that you are
iterating over in this case now this is
not going to work in a traditional loop
so just to clarify what I’m talking
about here is that saying we have
a for-loop so we might have a typical
loop you think I want to loop ten times
and want to increment the value of I
okay I’m just gonna do console.log of
value so this is just a normal loop for
loop and as you can see here we get an
error that says the assignment to
constant variable and it’s basically not
allowed and this is what I’m talking
about so here we re assigning the value
to the constant but in this case what
we’re actually doing is we were
recreating the constant variable inside
of the loop on every single iteration
and that’s why it’s able to work and in
the second example with the for loop
we’re trying to reassign the value we
still have the I variable it’s the same
real was before where we’re trying to
reassign the value to it and that’s why
it fails but with the for loop we’re
actually creating a new variable and
that’s why we don’t get the error
anyways this was sort of like a side
note just keeping in mind that you are
allowed to use constants with the four
of loop and you’re not gonna get any
errors now they’re also used to be a
values method so in the past we were
able to do something like users dot
values similar to the keys but if you’re
gonna try that instead of any modern
browser you’re gonna get an error and
the error is basically telling you that
there’s no values method on the user’s
array now you could actually verify that
so for example there is a keys method in
the array prototype as you can see here
all right we get a true but if you were
trying to look for values in the array
part of them you’re gonna get false so
that’s a good indication as to what’s
going on there’s no values method on the
array prototype at the moment even
though the values method is actually
defined in the spec now what we do have
available in the browser’s is another
method known as entries so let’s do
console.log okay
any of the users entries alright and as
you can see we get an iterator it
doesn’t really tell us much but let’s
see what happens if we use that iterator
inside of a for loop so I’m going to use
a cost
again let’s do let’s have a pair or
entry of users dot entries okay and then
we’re gonna console.log that pair okay
let’s see what we get we get three
results so as you can see here we get
three arrays and the first element in
the array would be the index the second
element in the array would be the actual
object and this is actually pretty cool
because you could do something like this
so using these structuring we can
actually extract the index as well as
the user object from the entry so the
entry is gonna give us an array but
we’re gonna destructor that array in
order to get the index and the user and
let’s also console.log both of those
values I’m just gonna clear out log
let’s console log those values and as
you can see here we’re gonna get the
index for every single user object and
we also get the user object itself so
this is actually something that might be
very useful in certain scenarios so just
be mindful of that method let’s move on
to some of the other methods and the
next one on the list would be the from
method so I’m actually gonna open up the
HTML tab over here and I’m gonna
minimize the console a little bit so
let’s say we had a few buttons here
button one button is gonna say I’ll take
checkout and the other one is gonna say
cancel so imagine you have like sort of
like an online store right and we wanted
to bind an event handler to the checkout
button now I’m gonna give it an ID I’m
gonna call it checkout okay first of all
let’s get the document gift element by
ID we’re gonna get that checkout button
and we’re gonna add an event listener to
it it’s gonna fire on click events and
we’re also gonna get an event object
okay so let’s just console.log clicked
for now just to see that it actually
works so when I click on checkout we get
clicked right so let’s say once you
click on the checkout button we wanted
to disable both the checkout as well as
the cancel button so you
imagine that behind-the-scenes you would
be making some kind of an API call or
doing some kind of other asynchronous
processing but for the time being you
wanted to disable both buttons so that
the user will not be able to you know
cancel or click on the checkout again
and what’s not so the one thing we could
do is we forget the buttons from the Dom
right so we could do document get
elements by tag name and we’re looking
for all the buttons and of course be
careful because that’s gonna look for
all the buttons in the Dom you might
also want to add a class to each button
and then target and then target the
buttons by the class but in this simple
demo example I think that’s just fine so
once we get the buttons let’s cancel
them log out okay I’m gonna open the dev
tools so when you click on checkout
you’re actually gonna see that we get an
HTML collection now you might expect
that you will get an array but this
object is not array it’s actually an
HTML collection now I showed you before
that in order to get an array you might
simply just restructure the elements of
that collection into an array so once
you do that when we click on checkout
you’re actually going to see that we get
an array instead of HTML collection now
there’s a different way to do this as
well there’s a new method in es6 that’s
known as a way from so when you pass
three buttons in fact let’s call them
buttons with an S because we got two
buttons so once we do that with two
console.log away from passing that
collection inside and once you click on
checkout you’re gonna see that we get an
array of buttons once again now of
course like I said we wanted to disable
them so once we do get them let’s also
perhaps let’s do for each on each button
we want to set the disabled actually to
true I don’t want to disable the buttons
so you click on checkout that disables
the buttons but let’s say you also
wanted to get the reference to the new
buttons I’m just gonna say disabled
buttons is going to be equal to a call
to array from method
and then we’re basically gonna do
instead of for each because for each
doesn’t actually turn anything we’re
actually gonna call a map so in this
case I’m gonna use a bit of a different
form it’s going to be an arrow function
but we’re gonna use a body for that
function we’re gonna first set the
disabled attribute to true but then
we’re gonna return the button itself and
let’s do console.log of disabled buttons
let’s click on check out that disables
the buttons and then back in the log
over here we get an array of two
elements now it turns out that if you
wanted to map through the elements in
this fashion you don’t necessarily have
to nest another map call on it you could
actually pass in that callback as a
second argument to the from method okay
so if I remove the map function all
together let’s click on check out again
and we get the exact same array just
like before and now the buttons should
be disabled so if you look for disabled
attribute it’s gonna be set to true so
this is just one of the ways how you can
use the array from method now just so
that we’re clear with how the method
works and operates there’s a bit of a
different use case that you might
consider let’s say you wanted to create
an array so I’m gonna say numbers okay
and we wanted to create an array but
wanted to create an array that contains
five elements so one two three four five
the way you would do that is you could
also pass an iterable object as the
first argument so it’s just gonna be an
object that has a length property just a
normal object we’re using object literal
and we’re also gonna pass a second
argument a callback function that’s
going to accept the value so in this
case it’s gonna be undefined but of
course you could call it anything it’s
just basically I’m gonna use it
underscore let’s say it’s gonna be an
undefined value of undefined and the
second argument of V the actual index
and once you do that you want to return
the index but you want to increment it
by one
so let’s actually see what that’s gonna
give us the console of the numbers once
you do that we get fifty elements
now that’s a bit too much let’s reduce
it to five so we get five elements
everything from one to five now if you
wanted to actually see what’s going on
behind the scenes
you might console.log not to the
underscore as well as the index but we
also need to return a value in this case
we’re incrementing the index so we get
undefined in zero meaning that there is
a new array in which the first value
would be undefined
the value at index zero undefined the
same for every other value but then we
have five of them right index from zero
to four five values and then when we map
through them one when the second
callback is being applied to every
single element in the new array it’s
going to increment the index by one
meaning we’re starting at zero the ones
are incremented by one it’s gonna be one
and that’s gonna happen for every single
element that’s why we get everything
from one to five now of course be
careful here so let’s go back to the
previous form where we just have to
index make sure you use pre increment
syntax because if you try to use post
increment what you’re gonna end up here
with is first you return the index and
then you increment it which is pretty
much useless because you’re incrementing
the index which is a private variable
inside of that callback you want to make
sure that you first increment the index
and then you return the value from the
callback and as you can see here we get
everything from 1 to 5 so that’s just
one of the use cases that you might run
into another array method that’s been
added and es6 is array of method so
let’s use something like this we have a
constant log we wanted to console log
array of let’s say 42 what the of method
is gonna do it’s basically going to take
hit value and in fact it could be as
many values as you wish so let’s say 42
minus 5 0 no matter how many values you
pass it’s going to wrap those values in
an array so it’s basically gonna give
you an array with those values and like
I said the number of arguments is
complete bull and the arguments don’t
necessarily have to be numbers in fact
they could be you know objects you can
mix different types you could even pass
the symbol inside
now you might be familiar with the array
function so for instance let’s say we
have an array function and we wanted to
pass 3 to it now what do you think
that’s going to give us well
the array function is actually a little
bit ambiguous in the sense that if you
have more than one argument it’s going
to treat those arguments as array
elements otherwise it’s going to treat
these single argument as the length of
the array so in this case we’re creating
an array with three empty spots now if
you change it to five of course that’s
gonna give you an array with five empty
spots but if I pass more than one
argument so let’s say I pass one into
whatever three four as you can see here
it’s gonna create an array with those
elements so if I reduce it to two
elements it’s gonna give me that now as
you can see it’s a little bit different
from array of because if I just pass
five to it that’s gonna give me an array
with the element of five it’s just
basically gonna wrap the five but if I
use array as a function that’s gonna
create an array with five empty spots so
the difference is pretty subtle and of
course if you pass let’s say your string
this string is actually going to be
treated as an element so it’s going to
be inserted into a new array and you get
a new array that contains that tree
inside of it so that’s about it for the
of method now there’s actually a few
other ones so there’s a fill method on
the array prototype the fill method
basically fills an array with a given
value at given innocence that’s what it
does and there’s also another one that’s
known as copy within and this guy
basically to have a shallow copy of an
array based on given indices now these
two methods are a little bit cumbersome
and a little bit confusing to write and
in most cases you could simply use the
spread operator in order to simplify the
operations so I’ll leave it up to you if
you’re interested make sure to check out
the MDM Docs but like I said in most
cases these predatory owes a lot more
readable and understandable so a thing
we’re gonna close off at this point
thanks a lot for watching and I’ll see you in the next video
Please follow and like us: