JavaScript ES6 Tutorial #9 - Arrow Functions

Yo ninjas, in this Ecmascript 6 tutorial, I'll go through the new arrow functions available to us in JavaScript. Arrow functions reduce a few keystrokes to make creating functions a little easier, but - better still - they can bind the value of 'this' lexically.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

================== Social Links ==================

[TheFippe]

GREAT GREAT lesson!, i even spiced it up a little by adding a else if statement where if x <= 0, i console log this.name + " has died." and a clearInterval. Felt so great managing it, your videos are the best mate. Ninjagod!

[benclayton-green]

I think of it like..
normal function are like a boundary around themselves, so the 'this' is contained within them, and refers to the function it's used in. Whereas arrow functions are like transparent boundaries. So they hold the function but the 'this' keyword escapes out of them and refers to whatever contains the arrow function. If it's another arrow function it still passes through this into the higher level scope (container). Using a combination of these this-binding (normal functions), and non-this-binding (arrow functions), you can create structures where you are in control of exactly what 'this' refers to.

[analemma.inflection]

At 5:45, i havent written it out and tested it, but i think that ‘this’ is bound to ‘window, ’ not the callback itself.

[shadabzilani]

r u using bibel for compile es6 to normal js ?

[elijahsawyers]

Hello! I am just wondering, what is the difference between declaring a function like this:

var myFunction = function(parameters) {
statements;
}

or like this:

function myFunction(parameters) {
statements;
}

Thank you for your help!

[Abhishek.j.p]

also, if we don't want to use the _this = this as discussed towards the end of video. Another way is to use console.log( `${this.name} chopped the enemy `);

[surfinbird]

this.tutorial was a bit confusing but in the end I got it : )

[arazmammadov]

this this is this this)) thanks bro, super

[matthewdavies]

So that fat arrow function at the end of the video is more than just syntactical sugar? It actually lets you access the THIS of the window object and not the function that it's in?

[kennethmartinez]

Great explanation, Shaun! There was just one thing I didn't understand: "lexically bind". What did you mean by that phrase? TIA

[rutpshah]

Could you please add few more examples like u did using setInterval.

[Gruximillian]

Hi, isn't the 'this' keyword bound to the window object rather than to the function that is called in the setInterval method? I can't rememmber correctly, but I think that is the case.

[DanielWeikert]

thanks for the tut but why not simply using ninja.name instead of this.name? Any reasons? (Question from a beginner)

[mmayat]

do you know a way to create javascript fuction to calculate cost of service,
1 hour 30
2 hour 60
3 hour 90
1 day 300

[adewaleadejobi]

please for beginners state the reason why you do certain things