DEV Community

Let me explain to you what is `this`. (Javascript)

YCM Jason on June 15, 2018

Original post: https://www.ycmjason.com/blog/2018/06/15.html this article assumes 'use strict' in all context this article also assumes some kno...

Read full post

Elarcis • Jun 16 '18

this in the body of f is undefined!!! not obj!!!

Why does it happen though, that this code ran on Firefox (and I suppose, any other browser):

function f() { console.log(this); }

f();

const obj = {};
obj.fn = f;
obj.fn();

prints respectively the Window object and the obj one?

YCM Jason • Jun 16 '18 • Edited

Great question. You are getting Window because you are not using 'use strict'.

Go to this link and the section called "Securing JavaScript" explains it.

developer.mozilla.org/en-US/docs/W...

Elarcis • Jun 16 '18

Oops. That actually explains a lot, as I used to get could not read property 'foo' of undefined a lot when passing my functions around as references, in strict mode.

Thank you for the link, I had forgot how much use strict mode changes the game!

YCM Jason • Jun 16 '18 • Edited

It makes code a little bit more reasonable.

Babel has implicit strict mode and u don't have to worry about forgetting to add it. :)

Guillaume Martigny • Jun 16 '18

Without specific definition, this is the object wrapping the function. window is the fallback when can't be infer from any context.

yahyaoui-mohamed • Mar 13 '22

To get undefined as result you have to use the strict mode.

Adrian B.G. • Jun 16 '18

old man voice: And this my children is why you do not want to learn JS as your first language: you have too many (not so obvious) issues, you have to learn too many "JS" specific things, and less computer science/business problems. The result: you spend 90% debugging.

Ofc there are other 1000 reasons why you should learn JS as a first language, just saying :))

YCM Jason • Jun 16 '18

You are absolutely right. I always suggest python as the first language. :)

Adrian B.G. • Jun 16 '18

Is like the difference between jumping into a volcano and entering in a burning building, I think. Presumably the "new dev" use python to learn web dev, he/she also has to learn JS to make one, so is double the overkill.

I usually suggest something simpler like scratch.edu (for programming concepts, non-tech people, or kids), or Java (because the big ecosystem and the fact that OOP is more "natural" for non-tech people), or any strong typed language if you are studying CS, preferable with pointers.

Josh Cheek • Jun 16 '18

This was really good :) In the flow chart, I don't think the arrow function's this is the caller's, I think it's the this at the time of construction. Eg:

$ node -p '({magic: function() { return () => this }}).magic()()'

The this will be bound to our magic object, where the arrow fn was created, not to global, where it was called.

YCM Jason • Jun 16 '18

I have changed "caller" to "definer", which makes more sense.

Thank you so much! :)

YCM Jason • Jun 16 '18

Oh yes you are right, let me update it later. Thanks for the shout! 😁😁😁

WhistlerIAM • Jun 16 '18

Awesome explanation! The flowchart is by far the most unique thing on the web for this :p

Kat • Jun 19 '18

What this are you referring to? 😁

WhistlerIAM • Jun 20 '18

very droll

YCM Jason • Jun 16 '18

😁😁 that is a huge compliment thanks!

Kushan Joshi • Jun 16 '18 • Edited

Since you tackled this so well. It would be great if you also added the almighty this inside an object constructor function to the flow chart.

To me more specific I am talking about

function Tree(name) {
  this.name = name;
}

var theTree = new Tree('Redwood');

I understand this is not exactly what your are addressing in your article, but new folks might frequently encounter this (oh the irony when talking about this) in these type of functions.

Cheers 🥂

YCM Jason • Jun 17 '18

I could add this in the note. Not sure where to fit it in the flow chart haha.

Thorsten Hirsch • Jun 16 '18

20 years ago Perl's $_ was probably the most magical keyword in the programming world. :)

Anthony Bouvier • Jun 16 '18

And still easier to grok than JavaScript's this

YCM Jason • Jun 16 '18

I am lucky I was just 3 years old at that time. 😌😌

Francesco Mari • Jun 19 '18

Nice article man! (But less gifs next time :-)

Kat • Jun 19 '18

I love the gifs. Little distractions make for easier read on dry material. But I don't know how many is too many. 😋😅

YCM Jason • Jun 19 '18

Haha! Ok, maybe a little less. I just went crazy and keep on adding after a few of them.

Christian Vasquez • Jun 15 '18

Came for the memes. Stayed for the content.

Thanks for sharing this, Jason!

YCM Jason • Jun 15 '18

Thanks! :) I am glad the memes worked out ok

kidme • Jun 17 '18

Honestly really good article and explanation of the 'this' keyword after working with javascript for sometime now I still struggle with it. So thank you great work

YCM Jason • Jun 17 '18

Awww thanks so much! :D