JavaScript ES6 Arrow Functions Tutorial

in this video I'll explain JavaScript es6 arrow functions thanks for checking out this video if you're just starting or even thinking about starting a career in web development you're in the right place I upload new videos every week hit subscribe in the Bell to get notified so let's take a look at the difference between a regular function that has been around since the beginning of JavaScript and the arrow function that was introduced in JavaScript es6 so this is a regular function and it's returning the string hello world and so when we console.log message we should see hello world in the console so let me save this and there we go we see hello world in the console so the first thing about arrow functions is that they are anonymous functions so in order to turn this into an arrow function we'll have to assign it to a variable so we'll say let message equal and then we use parentheses and then equal greater than sign that creates the arrow and then we can return hello world so if I comment this one out and I hit save we should still see hello world now in here we are explicitly returning the string so with an arrow function we can also implicitly return the string so since we have just one line and we're just returning one string here we can actually get rid of the curly braces and the return statement and we could run it like this there we go hit save and we still have hello world so this is implicitly returning whatever we put after the arrow okay so now what if we have an argument in our function so here in message we're now passing a value here and we are returning that in the string here so in order to turn this into an arrow function again we'll need to assign it to a variable so we'll set that message equal and this time in the parentheses just add the a there equal sign greater than and again instead of doing the curly braces we can just go ahead and return the string that we're looking for just like that and now when we console.log and call the function we're going to pass it a value in this value will then get put into the string so let me comment this one out and now we'll save it and there we see hello John and now since we're only passing one value we actually don't have to have the parentheses here we could just say let message a arrow function and then the string so if I save this you'll see that we still get the same result now if we're passing two arguments so let's say a and B in this case we will have to have parentheses surrounding these let's change this to one of our variables we'll say a and B we'll just put them together on the in a string there now in a message here I can add another string we'll say hello and John and I'll add a exclamation so that we can see the difference at the bottom and it'll save that and then we see hello John so those first examples we were converting named functions into arrow functions and in this one we're going to convert an anonymous function into an arrow function so we have an event listener here listening for the click function and then we're going to console.log click so in order to change this to an arrow functions pretty simple just remove the function and then after the parenthesis we'll put our arrow just like that now since we only have one line in here we can remove the curly braces as well and this would be the same thing so we have our event listener here and then after that we have our function here so here's another example of an anonymous function so we have an array here of objects with a first and last name in each and we're constable Augen people dot map and then we have our anonymous function here we're passing person and returning person name so if I save this we'll see that it returns an array of the first names from the people array so in order to turn this into an arrow function we'll remove function and then we'll put our arrow and this would work just fine just like this we could also remove the parentheses around person since we just have one value here and since we're just returning one line we could also remove the curly braces and the return and this would work just the same so let's change this to last name and then I'll save this and now we have the last names so you can see how arrow functions make your code so much shorter and more concise and actually easier to read so one of the most important things to understand about the differences between a regular function and an arrow function is the way that they handle this so a regular function r-e binds the this to the object that called it so it could be the window the document a button so let's see what that looks like so we here we have a regular function demo and it's clonk console logging this so this should log an object we're going to add an event listener to the load and call the function from window add to add event listener and then we're targeting the button that we have here and we're adding the event listener and calling the function again on click so now let's see what objects are binding to this let me save this and as expected window would be called when the window is loaded now when we click the button this is now rebinding to the object that called it so now if we change this to an arrow function let's see what happens we can get rid of all of that and now let's see what happens we get window again as expected on the window eventlistener now let's see what happens when we click the button we get window again so arrow functions do not rebind this so to better demonstrate this we have a function here called stopwatch and we're calling this dot time would start at 0 and we're setting an interval with a regular function and we're calling again this dot time plus plus we want to iterate that and then log the current time and we're doing that every 1000 milliseconds which is every second and then we're creating our timer which equals a new stopwatch all right let me save that and you'll see that we're getting some errors it's not working so that is because when we call this regular function its rebinding the this so in order to get around this issue with a regular function some have created a variable so we'll say let self equal this and then instead of using this throughout they change it to self so now we're assigning this to a variable and then that variable of course is going to work properly down the line so now if we save this you'll see that it actually works so instead of doing all of this we could change this function here to an arrow function so let's go ahead and get rid of what we did just a minute ago control Z there change these back to this and get rid of the self all right and so then let's change this to an arrow function and since we have multiple lines here we do have to keep the curly braces and so let's run this arrow function and we'll see that it works right off so since it's not rebinding this it's still the same as this up here so another thing that we have to be careful with with arrow functions is if we're just returning an object so this is a proper object curly braces and then we have a key of name and a value of John but the arrow function sees this curly brace and it's expecting some expression here and so it's going to try to parse the inside of the curly braces as a normal function would so if we're returning an object we have to wrap it in parenthesis and this would work just fine and the last thing that I want to point out is that for using an arrow function in one line we can't have any line breaks so if I try to run this we're going to get an error unexpected token it's not sure what to do with it so we have to put this back in one line and now it will work just fine all right so before you go if you like this video a thumbs up is appreciated I upload new content every week so hit subscribe in the bell to get notified and if you think this video or any of the videos on my channel might be helpful to someone else please share them i'm also on twitter and instagram at code stacker thanks for watching

Channel: codeSTACKr

Views: 19,796

Rating: 4.9597988 out of 5

Keywords: arrow functions tutorial, simple arrow functions, es6 arrow functions, arrow functions, javascript arrow functions explained, easy arrow functions, javascript es6 arrow function, javascript es6 arrow functions, javascript arrow function, javascript arrow function tutorial, javascript es6, javascript es6 tutorial, arrow function vs normal function, arrow function vs function, arrow function this scope, arrow function guide, javascript, es6, es6 tutorial, learn javascript

Id: NAN7U3MrX6o

Length: 9min 44sec (584 seconds)

Published: Tue Sep 03 2019

Reddit Comments

[u/thishippy]

CodeStackr

Hi my name is CJ and I am a freshman at Moraine Park tech college in Wisconsin and I think this is a great idea for someone like me getting ready to take this course and learning something new. For the longest time ever Ive always wanted to learn this. how hard was it for you to learn?

[u/codeSTACKr]

Here is my latest video. In this one we'll go over JavaScript ES6 arrow functions. I hope this helps at least 1 person. I appreciate any and all support. Don't forget to SUBSCRIBE! Thanks!!