JavaScript ES6 Arrow Functions Tutorial



ES6 added many amazing new features to JavaScript, but by far one of the best features is arrow functions. Arrow functions not only make code much more concise and legible, but it also handles the scope of this in a much more intuitive way.

Twitter:

GitHub:
https://github.com/WebDevSimplified

CodePen:
https://codepen.io/WebDevSimplified

#ES6 #ArrowFunctions #ModernJavaScript

25 thoughts on “JavaScript ES6 Arrow Functions Tutorial

  1. I used to think of Java as broken C/C++, and now I think of Javascript as broken Java. Features were initially omitted, ostensibly for simplicity and ease of use, then oops, added back in, in a messy ad-hoc manner when the "language" became more popular and developers demanded it. Thanks for clarifying one of the areas so-affected.

  2. Really appreciate your efforts Kyle. Some points I wanted to make-

    'this' is defined where function is called, and so the place where function is called i.e. person.printFunction(), 'this' must be pointing to person object as it's invoked with person.printFunction(), it's not pointing to global object. The fact that inside setTimeout another anonymous function is defined which takes us to concept of closure and it is a known behavior in javascript that 'this' inside closure points to global(many say its a bug in language but that's how language designer chose it to be). We get a workaround for it where we take another reference like: var self = this, and use 'self' everywhere instead of 'this'.

    Hopefully, they corrected this behavior in arrow function which was always desired. So the point which I want to make is – 'this' inside printFunction() is still pointing to person object(because function was invoked with person.), but 'this' inside anonymous function(closure) of setTimeout is pointing to global object which was a known behavior in javascript.

  3. And another MAJOR difference is that normal functions can be called from anyplace in the document, but arrow functions can only be called after it's created.

  4. One thing that I think he forgot to go over is that you can force normal functions to treat `this` the same way as the arrow function does by adding .bind() to it.

  5. Is there a way to get the scope of the normal function to be local to the class? I mean it is very inconvenient creating a Person object with a name and not being able to get the name. Do we have to use getter methods inside class methods? Thanks

  6. Oh man… the variety of examples, the pace, the clarity… It gives me so much pleasure to finally understand certain concepts in such an easy way. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *