So name is true. And then an arrow that opens up into curly brackets. And this is where the body of the function lies. So we could copy out this here. Paste that there. And if we got rid of this function here, we should see the exact same output displayed in the browser. And there we go. Now we're not actually using name or true. We're not passing any arguments to this function, so we can just remove these.

Now we're not actually using name or true. We're not passing any arguments to this function, so we can just remove these. Not only is it a cleaner syntax, saving you some characters or even a few lines, but it also behaves slightly different than a traditional function. So let's create a new function that returns some kind of value. Now in the traditional way we might do something like function nameString. And it's going to return usernameName and usernameEmail. So this will return the string that we have being set in the DOM up here. So then instead of calling this init function, we'll just take this line out of it.

So this will return the string that we have being set in the DOM up here. So then instead of calling this init function, we'll just take this line out of it. Get rid of this. And then just declare the innerHTML underneath the string initialization. So then instead of actually creating the string here, we can just call nameString. But if we wanted to rewrite this using arrow notation, const nameString equals parentheses. And then instead of using curly brackets here to create a function body that returns the string in question,

And then instead of using curly brackets here to create a function body that returns the string in question, instead we can just return the string in question here without the return keyword. So if we use usernameName here and usernameEmail. By putting it on this single line and removing the curly brackets, JavaScript knows that anything that comes after this arrow to the right is going to be a return value for this function. And it can only be on this single line.

is going to be a return value for this function. And it can only be on this single line. So if we wanted to cut this into multiple lines, we would have to use a { curly bracket. But because we're just using this single line, this interprets this as a single return. So we can comment out this function here and see this working in the browser. One other key difference with arrow functions is how arguments are interpreted as well.

One other key difference with arrow functions is how arguments are interpreted as well. So let's say we had two arguments here, name and isTrue, like we displayed earlier. And you know we pass those into nameString as Andrew and true. We keep these wrapped parentheses because we have more than one argument. And we also keep the parentheses if there's no arguments in them as well. But in the case that we just have one argument, so let's say that we just had a name here,

But in the case that we just have one argument, so let's say that we just had a name here, then we can exclude these parentheses. If an arrow function has only one argument, you don't need to include the parentheses wrapped around that argument. So instead of usernameName, we can just call name on that. And then looking in the browser, we see our argument injected into that return value, as expected. And arrow functions save a lot of space, but also clean up your syntax a lot and make it more understandable.

And arrow functions save a lot of space, but also clean up your syntax a lot and make it more understandable for things like inline callbacks for some specific functions. So for instance, let's comment out this right now. And we'll get rid of all of this up here. And let's create a new array called users. Each one is an object with a name and an email, kind of fitting the flow that we've been doing so far. And now if we wanted to loop over this array, traditionally we might use something like users.forEach,

And now if we wanted to loop over this array, traditionally we might use something like users.forEach, function user, and then we would do something with that user object inside of this anonymous function. So let's say that we had another array up here called names. And we wanted to add the individual names to this array inside of this forEach loop. So we might do something like names.push(userName). Now this isn't that confusing, it's not that many lines, and it's not that unclear what's going on here.

Now this isn't that confusing, it's not that many lines, and it's not that unclear what's going on here. But arrow functions help clean this up a little bit. So instead of writing it like this, we can write it like this. We start off with the forEach, which expects an inline callback. But instead of using the function keyword, we can just call user, because we have one argument. The user object, that's part of the loop that's going through right now. And then an arrow. And we can start out with the brackets, but we're only really doing one thing. So we can instead remove the brackets and just call names push

And we can start out with the brackets, but we're only really doing one thing. So we can instead remove the brackets and just call names.push(userName). So now we've reduced this loop of four lines, well three if we remove the comment, into just one line. And it's fairly clear what's going on here. foreach user, we have a user, and we want to push that user's name into our names array. And so to see this working, let's dump those names out into the browser. And there we go. So here we have it, both names separated by a comma and a space.

And there we go. So here we have it, both names separated by a comma and a space because of the join method that I used. One of the largest differences though between traditional functions and arrow functions is how it treats this. The this keyword and object. In order to demonstrate that, let's create a new function and call it this. Let's create a new function and event handler for a button. First let's go ahead and create that button in the index file. So we have the button, now let's create the handler.

First let's go ahead and create that button in the index file. So we have the button, now let's create the handler. document.getElementById(btn) and then add addEventListener(click, which expects an inline anonymous function for the callback. Now inside of the callback for this function, let's initialize another function and we'll call it getDetails. And what this should do is return back a string that says what the button ID is that was just clicked. So the button ID

a string that says what the button ID is that was just clicked. So the button ID is, and we should be able to call that with the this keyword getAttribute ID. So then after this function we can write that to the output. ... ... And so let's test this out in the browser. Alright we see our button displaying here. And if we click on it, well our output didn't change. Let's open up the console and see what it says there.

displaying here. And if we click on it, well our output didn't change. Let's open up the console and see what it says there. We get this error, cannot read properties of undefined. Reading getAttribute. Which means that the this keyword here is returning as undefined. But if we log that out here we see that it is the button, which means that we should be able to get the ID. But if we log it instead inside of the function we indeed do get undefined.

of the function we indeed do get undefined. And that's because in this scenario the this keyword is bound by the function block because of the way that the function was initialized using this method. But the good news is is that if we use arrow functions instead, so rewriting this we could say const getDetails equals the arguments, =>, and then the block here. If we go back to the browser and try this one more time we get back the string that we expected.

block here. If we go back to the browser and try this one more time we get back the string that we expected with the button ID, and we see that this, in this case was the button element that we clicked on. And that's because arrow functions expose the this of the property above it. So by calling this in this arrow function here, the context of this from the clickCallback function here is being passed down into this getDetails function. If we tried to use error notation though for the actual callback function and rewrote it as this instead, we are going

If we tried to use error notation though for the actual callback function and rewrote it as this instead, we are going to get a slightly different error. Going back into the browser and trying this again our this keyword is instead the window object, and we have a getAttribute is not a function on this. And that's because again using error notation allows us to pass in that this context from whatever is above it, and because this is just on the document root, whatever is above it is the global window object. But there's really no worries. If we wanted to keep this syntax instead of using