DEV Community

The Common Enemy, JavaScript's "This" Keyword Saves The Day

Johnson Ogwuru on May 03, 2018

Developers everywhere both seasoned and those just beginning to code, all at one time or still never understand the this keyword of javascript, mos...

Read full post

Jishnu Vasanth • May 4 '18 • Edited

I think, by using lexical scoping, arrow function solves the confusion around this to an extent.

Johnson Ogwuru • May 4 '18

Yurp, ure right. Thanks alot for the additional information

Jochem Stoel • May 6 '18

@jishvi Can you elaborate?

Jishnu Vasanth • May 7 '18

Arrow function does not create its own this context. Instead, it binds this keyword lexically which is a fancy way of saying that it takes the meaning of this from the enclosing context. In ES5 we can either use Function.prototype.bind to grab the this value from another scope to change a function’s execution context or assign the value of this to another variable (var that = this).

 var Person = function(name) {
    this.name = name;
    this.sayNameAfterTwoSeconds = function() {
        setTimeout(() => {
            alert(this.name)
        }, 2000);
    };
};

In this code caller of setTimeout is window object. But inside setTimeout, this refers to its current surrounding scope and no further. Thus the inner function knew to bind to the inner function only, and not to the object’s method or the object itself.

Jochem Stoel • May 7 '18

Arrow function does not create its own this context. Instead, it binds this keyword lexically which is a fancy way of saying that it takes the meaning of this from the enclosing context.

That is precisely what I said.

Jochem Stoel • May 3 '18

I hate to sound like an asshole but someone who does not understand this not just in JavaScript but any object oriented language is not a developer.

Ben Halpern • May 4 '18

I don't think that's true at all. People are universally confused about the this keyword in JS.

My all-time most popular tweet is demonstration that this is a shared problem.

Ben Halpern

@bendhalpern

Sometimes when I'm writing Javascript I want to throw up my hands and say "this is bullshit!" but I can never remember what "this" refers to

14:27 PM - 20 Mar 2015

11825 11620

Jochem Stoel • May 4 '18

Sorry but I don't see it that way. A developer knows what he/she is doing. If you write code without understanding basic fundamentals like context and this you are not really a developer but a hobbyist maybe or a person with an interest in development.
This is something you should have mastered during the first semester of your education even if you are one of those 'self educated' developers like myself.
Do you think an employer will hire a developer who doesn't know this stuff? The stupidity!

The fact that this tweet got so much response is because you made a clever/funny word joke. (I think it is funny too) It doesn't mean everybody who liked, retweeted or ponied it agrees with the topic of this discussion.

Maybe I am wrong. I guess sadly statistically some employer out there will hire you regardless but these will be small businesses with their very own WordPress website or something and not organizations focused on development.

Anywho, if you don't understand this then you are incompetent. Absolutely no offense to the author of this article, who is probably a young developer and did a good job at explaining.

Theofanis Despoudis • May 5 '18

It not always true. There are situations where even the most competent ones struggle, usually when the problem analytical in nature, for example, try to determine the value of z just by reading the following code snippet ( no cheating):

let x = 2;

let y = {
    a: () => this.x = 5,
    b: function () {
        this.x = '11';
    }
}

y.a();
y.b();

var z = x + parseInt(y.x, x) + window.x;

The real question is whether if you fall for it, would you be considered incompetent? Probably not

Jochem Stoel • May 6 '18

Ha! I might actually be incompetent after all. I was not aware of the parseInt optional radix parameter.

As for the context stuff (your code example) honestly this is all so obvious and straightforward. A no-brainer I believe is the expression. Arrow functions don't bind their own this so when you reference this from an arrow function it refers to the parent/originating context. Knowing that, what is the confusion all about?

I don't have to examine it carefully or think deeply about which values change where in what context and why. I have internalized this and it has become trivial and automatic.

Also, this became a bad example when you added window.x at the end. window is not declared anywhere in the snippet. If you are gonna have a debate about context then don't assume a very context specific global object. (it would have been better to put this.x in stead of window.x)
I am not intentionally being a smart-ass pointing this out. You have to understand that a lot of JavaScript does not run in a browser and has no window. For starters this is the case for pretty much all Node modules. Workers don't have a window object either. Javascript as a language doesn't even have a console object but yeah I know that is not the point. I have used many different JavaScript interpreters and written a lot of 'context-free' code so I might be a little obsessive.
Speaking of context specific. Did you know that V8 by itself has no Events? The Event class is written entirely in JavaScript and is not part of the ECMAScript language.

It is important to understand that V8 is only the interpreter. A lot of standard and very common objects/apis that you know do not exist yet. This includes the console object like we have discussed in this article but also the Event class and its children.
More: V8Ception

Oh well. Discussing this I did come to realize that you guys are probably right. Having difficulty understanding scopes and context is probably a lot more normal/common than I thought and I just happen to stand out tremendously in this particular area with my amazing abilities and understanding.

Theofanis Despoudis • May 6 '18

OK, so what is the value of z then and why? Assume the window is the global object.

The whole question was intentional as its more than the window or the this in an arrow function. Its the combination of all those things plus putting your self in a real working environment with issues to fix and deadlines to hit etc that makes them really tricky.

And yes I'm aware of Node and V8 and the event class (I've written server-side Javascript before)

Guillaume Martigny • May 4 '18

Just remember that being a developer mean nothing more than "can open an editor". But, I get your point.
I think what you're trying to say is :

It's essential to understand the this keyword in a object oriented environment. this is an important part of the abstraction of common code into class.