When this is undefined, you probably need to use a javascript arrow function #shorts

------------

[MaxKronus]

Great tip!
You could also use .bind(this) on the function declaration

[michaeltreat]

Arrow functions don't maintain their own scope. Function expressions do. When it was a function expression, the 'this' referred to that function itself. By converting to the arrow function (fat arrow) the 'this' moved up in scope and referred to the DelayLogger itself, which is what holds the message.

[jericklee]

I always thought ()=> is just an alternative to function(), thank you for the great tip

[watchernode]

We can also
.bind(this) to call back function in setTimeout function.
Then, this keyword of Object becomes part of function closure.
function () {
console.log(this.message) ;
}.bind(this)

[mkhizeryounas]

The reason it print undefined has nothing to do with setTimeout inner workings. It’s because the scope of ‘this’ in the function.

If you still want to use the same function you can do something like
_this = this; // outside the function
And do a console.log(_this.whatever)

[igorswies]

Free yourself from the "this" keyword by using closures instead of classes:

const makeLog = message => () => {
setTimeout(() => {
console.log(message);
}, 1000);
};

const log = makeLog("Hello");
log();

Or, if you're using TypeScript:

const makeLog = (message: string) => () => {
setTimeout(() => {
console.log(message);
}, 1000);
};

const log = makeLog("Hello");
log();

[Romulusmap]

I really love your shorts man! Keep it up!

[anj]

I never heard, even once, anyone call that fat arrow.

It is just arrow function.

[RikThePixel]

People call it a fat arrow? I only heard people calling it an arrow function before. Is this common?

[vertcx]

Awesome example, really simple and concisely written.

[_akbarisahil]

Good trick, i knew this already due to jonas's course

[moodymonstrosity]

This problem isn't limited to async code, in fact it has nothing to do with async code. Arrow functions don not have their own THIS, theu take the THIS of outer function, in this case the log() method.

[abderrafikzarouali]

if you don't want to use arrow functions u can use bind(this) on the function declaration, but i think arrow function is the most semantic sense

[justintaddei]

This has nothing to do with how setTimeout works under the hood. This is due to the behavior of function closures. Bad explanation

[bigmistqke]

I always use arrow-functions, except when I want to use this. I think that makes the most semantic sense.

[calcio]

when I started using classes, never using functional programming anymore (at least when program is small the functional is good, but if you have a lot of data really OOP help me a lot)

[martinnkemakolam]

I always thought arrow functions don't allow the use of the this key work

[NoProblem]

In the good old days we just do ‘var self = this;’

[iqtutorials]

Es6 functions dont have "thisArg" paseed to the function Arrgumens in the constructor so its reffer to the global object . Es 5 function dose have thisArg pass to function arguments so you get undefined . Pass the class as thisArg to get accsess to this key word

[luissolanodev]

Isn't that just an arrow function? I didn't hear the term fat before.