now let's learn some differences between these two Arrow functions have a
few shortcuts that regular functions don't have
now let's get some practice using Arrow functions
let's create a new object con object2 equals object and then inside let's type
the property method colon and an arrow function brackets arrow and curly
brackets so even though we could save an arrow function inside an object
like this objects already have a shortcut for functions so at the bottom we
could just type method brackets and curly brackets so this syntax is called
the shorthand method syntax so this shorthand method syntax is actually
easier to read than an arrow function so when saving a function in an object
it's actually recommended to use this syntax instead
every HTML element has a method called add event listener
.addEventListener() - lets us run some code when we interact with the
element
it sort of does the same thing as onclick
addEventListener(event, callback or a function we want to run)
this code does the same thing as the onclick attribute
however add event listener has some advantages over using an attribute :
1. Multiple event listener for one event
2. We can remove an event listener using removeEventListener()
[Link](event, callback);
Parameters
1. event → The event type (e.g., "click", "keydown").
2. callback → The same function that was passed to addEventListener().
we can't just type a copy of this function we need to use this exact
function inside remove event listener to do that we'll save this in a
variable first so above this let's create a variable
1. Add multiple event listeners
2. Remove an event listener
Best practice:
Use .addEventListener()
instead of onclick=" ... "
we're supposed to give a function to add event listener however this
doesn't result in a function this will actually run play game and give us
the return value which is undefined so this code will actually result in
undefined and then we're giving undefined to add event listener so it
won't work so in order to give add event listener a function we need to
create a function here
we learned the array method for each which lets us Loop through an
array now we're going to learn two more array methods called filter
and map
.map() = transform an array into another array
we're not using index so let's just remove it for now and now that this
Arrow function only has one parameter these round brackets are
optional so we can also remove these to make the code more compact
another shortcut is if we only have one line of code in an arrow
function we can put the code on one line like this and now the curly
brackets and the return are optional so we can actually just remove all
of this code so if we have just an arrow it will automatically return this
result on the right and we don't have to type return ourselves so this
code does the same thing as the code above
Closure
- If a function has access to a value
- It will always have access to that value
the last thing we're going to learn in this lesson is a feature of
functions called a closure a closure means if a function has access to a
value it will always have access to that value so let's take a look at an
example we're going to go back to the to-do list project so we'll click
up here and then scroll up to 12 to-do [Link] and close this and then
open the tab for the to-do list which is here and let's scroll down to the
query selector all so we're going to focus on this inner function here so
notice that this fun function uses index from above now the interesting
thing about index is that as soon as this for each ends index gets
deleted for example if we add some new lines and we try to console.
log index and save and then go into our project rightclick inspect and
the con it'll tell us that the index is not defined so as soon as we end
the for each Loop index doesn't exist anymore however if we move this
into the inner function so inside here and we [Link] index and
save and we click a delete button it will tell us that the index is zero so
even though index gets deleted right away down here if we click one of
these buttons later on it still has access to Index this feature is called a
closure if a function has access to a value it will always have access to
that value the value like index gets packaged together or enclosed
with the function that's why we call it a closure so even if the value
index gets deleted after the loop we can click the delete button 5
seconds later or even 5 minutes later and this function will always
have access to index so closures are something that naturally happens
as we write JavaScript code and it's nice to know how this feature
works there are some Advanced Techniques that we can do with
closures