Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Basic Arrow Syntax

Maybe i'm dull... what is the point of an arrow function? Still not getting it.

basic arrow syntax video

3 Answers

Steven Parker
Steven Parker
229,783 Points

For one thing, it provides a more compact syntax.

But there are several functional differences as compared to traditional functions as well. One that often causes trouble for folks who overlook it is that arrow functions do not define "this" like conventional ones do.

For a complete description of the differences, see the MDN documentation page.

You have to assign this to a variable, in this case self because whenever you create a function a new this value is defined.

Arrow functions do not have a this value defined. You can write the above code in the following way.

function Person() { this.age = 0;

setInterval(() => { this.age ++; }, 1000);

} Not worrying about this in your code is less frustrating. For more reading check the MDN documentation on Arrow Functions

The advanced technical benefit with arrow functions comes with using callbacks in object orientated programming and using this.

In this example we're increasing a person's age by 1 ever one second.

function Person() { this.age = 0;

var self = this;

setInterval(function() { self.age ++; }, 1000);

}