Fri. Nov 8th, 2019

Host your Website

Read and learn

FatCow Plan for $3.15/mo. only

JavaScript ES6 Arrow Functions Tutorial

1 min read



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

32 thoughts on “JavaScript ES6 Arrow Functions Tutorial

  1. The this keyword always points to the object it is DIRECTLY attached to. In a regular function that object is the window object, remember all functions that not direct methods to a defined object are methods to the global object. That is why if you have a method with a function inside that uses the this keyword, it will point to the window object. The window object takes all functions that are not direct methods to an object as it's own "methods". The arrow function fixed this issue by making the this keyword always point your defined object no matter if it was used indirectly by a function of that object's method

  2. One note of arrow functions over traditional functions is when using an object literal.

    If you define a property with an anonymous function and you want to do something with a property that is defined within that object literal.

    const person = {
    name: 'bob',
    displayName: () => console.log(this.name),
    }

    person.displayName(); //will return blank, this will refer to global scope rather than the property.

    ———————————————————————————————

    But if we change the property displayName to a traditional function, this will keep the binding of this to the property name as we are now within the object context:

    const person = {
    name: 'bob',
    displayName: function() {
    console.log(this.name)
    },
    }

    person.displayName(); //will return bob

    Great content and keep up the work 🙂 I would love to hear your thoughts on this, an welcome feedback 🙂

  3. If everyone explained things as clearly and concisely as you, devs wouldn't waste hundreds of hours trying to understand difficult concepts! THANK YOU!

  4. So since you called the functions in the console, which is the global scope(where no such variable was defined) you get nothing.
    Where if you called the function using 'this' ,inside of a function(any declared scope), whatever the variables there are in the calling function/scope are what 'this' in the called function would refer to…. ?

  5. east for the first look. but what should i go if want to use arrow func in som event and inside this event i need to get event.currentTarget? fthe question is what to use instead of this? becouse it global scope now and containes window odject, as I understand. or instans -> SomeElement.addEventListenet("click", (e) => { // some code; this.getAttribute('data-href') // returns undefined }

  6. As usual, an amazing video with an amazing explanation… never lose this track as you do, explain the "why" before "how"… mind to add another explanation that I think would be great? an arrow inside an arrow… would be great, I think =)

Comments are closed.

Copyright © All rights reserved. | Newsphere by AF themes.