JavaScript ES6 Tutorial #9 - Arrow Functions

No video

JavaScript ES6 Tutorial #9 - Arrow Functions

Рет қаралды 32,033

Net Ninja

Күн бұрын

Пікірлер: 36

@TheFippe 7 жыл бұрын

GREAT GREAT lesson! , i even spiced it up a little by adding a else if statement where if x

@cesarmg80 5 жыл бұрын

Awesome tuto man! Thanks!

@benclayton-green268 6 жыл бұрын

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.

@HenleyBailey 3 жыл бұрын

In this example, greetArrow: () => {} refers to the window object rather than the object it's contained within. plnkr.co/edit/oR57wzz9UrbBTFFq?open=lib%2Fscript.js&preview

@iskendev 5 жыл бұрын

COOL, an easy explanation!

@analemma.inflection 6 жыл бұрын

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

@surfinbird71 6 жыл бұрын

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

@DrNabeel20 4 жыл бұрын

Thank you again!

@elijahsawyers8950 8 жыл бұрын

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!

@getrogo4474 7 жыл бұрын

Elijah Sawyers if you create a function and store it in a variable like the first one you did, you can use it for many times as you like in your program.

@pogoking4000 7 жыл бұрын

There are slight differences between the two, mainly in hoisting behaviour. The first example is called 'function expression', and the function's body doesn't get hoisted (but the variable 'myFunction' does get hoisted as 'undefined'). The second example is called 'function declaration', and both the function's name and body will get hoisted to the top.

@kaiz2870 6 жыл бұрын

I don't know if I am too late. AFAIK, the first one the function will execute itself and store the final result in a variable. The second one will execute when you call it.

@georgesmith3022 6 жыл бұрын

no, the first function will not execute unless you call it like this myFunction(parameters)

@pastuh 6 жыл бұрын

www.w3schools.com/js/js_hoisting.asp

@arazmammadov9276 4 жыл бұрын

this this is this this)) thanks bro, super

@kennethmartinez3685 3 жыл бұрын

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

@johncooter6483 3 жыл бұрын

That means chop method 'chop()' has acces to outer object that is 'ninja' so it can read name value too.

@matthewdavies269 6 жыл бұрын

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?

@shadabzilani5866 6 жыл бұрын

r u using bibel for compile es6 to normal js ?

@Gruximillian 8 жыл бұрын

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.

@NetNinja 8 жыл бұрын

+Gruximillian You're absolutely right. It's bound to the window object. I've added a caption to explain. Thanks for spotting :).

@Gruximillian 8 жыл бұрын

+The Net Ninja I'm glad to help, and thank you for these great tutorials! :)

@abhineet3695 6 жыл бұрын

It's initially bound to window object, then it depends on the calling function and their different scopes. Like if you call it with 2 different variables, then this would be bound to those two different calling variables(at each runtime). Meaning 'this' is not permanently bound to 'window'. It depends on the situation. TL;DR 'this' will bound to the left variable of call time dot. Eg: obj.fn(3, 4); // this bounded to obj in this case.

@Abhishek.j.p 5 жыл бұрын

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 `);

@asimgiri4269 4 жыл бұрын

6:36 Holy Shit

@DanielWeikert 6 жыл бұрын

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

@weirdonerdfreak 5 жыл бұрын

because if you later change ninja to be ninja2, you now have to manually update ninja.name to ninja2.name. Using this.name makes your code easier to maintain.