Understanding the this keyword

Question

So I have been researching the keyword "this" in JS and im not sure if I fully understand it clearly. So in an attempt to understand the "this" keyword, I started off by creating a JS object and seeing if I can return a value based on some math executed with the this keyword. The following code below is my initial attempt:

let myObject = {
  objectFunc: function() {
    this.thing = 10;
  },
  addFunc: function(x) {
    let result = this.thing + x;
    return result;
  }
}

console.log(myObject.addFunc(20));

So I expected this console log to return 30, however Im getting a "NaN" in the console. Can someone explain to me why? and also point me to some easier to understand documentation/explanation that isn't the MDN linked above?

*"Can someone explain to me why?"* `this.thing` is `undefined` when `this.thing + x` is executed and `undefined + 20` is `NaN`. Why is it `undefined`? Because you never call `myObject.objectFun()` to set the value of `this.thing`. — Felix Kling, May 03 '18 at 20:56
You should read [YDKJS - this & object prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) to learn about `this`. — Felix Kling, May 03 '18 at 20:58
Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — connexo, May 03 '18 at 20:59

score 4 · Accepted Answer · edited May 03 '18 at 20:58

4

You're on the right track. The reason why it's giving you NaN is because "this.thing" hasn't been defined yet. It's only defined when you call myObject.objectFunc() first.

let myObject = {
  objectFunc: function() {
    this.thing = 10;
  },
  addFunc: function(x) {
    let result = this.thing + x;
    return result;
  }
}

myObject.objectFunc()
console.log(myObject.addFunc(20));

edited May 03 '18 at 20:58

connexo

53,704
14
91
128

answered May 03 '18 at 20:56

BalmySoftware

171
3

1

Ok so because I never "Called" the object into existance, and only set up the blueprint for it to be called (in a manner of speaking). It technically was NOT an object in the first place, so no math could be done with it... I think – Ghoyos May 03 '18 at 21:01
2

The object existed. But the field `thing` did not exist yet. You initialize `thing` after calling objectFunc(). Until you call that function- you have an object that consists only of functions. It is good practice to initialize `thing` outside the function to a default value like 0 so that you don't run into this problem. – chevybow May 03 '18 at 21:03
Interesting @AdamS - would you mind showing me how to initialize outside the function in this example? – Ghoyos May 03 '18 at 21:04
Just add this line right before objectFunc: `thing: 0,`. Then you don't need to call objectFunc(). Your original code (with the addition of the thing I just mentioned) will console log "20". – chevybow May 03 '18 at 21:09

score 0 · Answer 2 · answered Oct 28 '18 at 22:39

An easy to understand explanation would be that JavaScript 'this' keyword refers to the object it belongs to. The value of 'this' differs depending on how a function is invoked. There are four rules for 'this', in order of precedence that can be used to determine what 'this' gets bound to.

Rule 1. Default Binding: When invoking a function declaration 'this' keyword bounds to the global object.

Rule 2. Implicit Binding: When dot notation is used to invoke a function.

Rule 3. Explicit Binding: When .call(), .apply(), or .bind() are used on a function.

Rule 4. New Binding: When invoking a function by the new keyword, 'this' bounds to newly created object.

Understanding the this keyword

2 Answers2