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
– Felix Kling, Commented May 3, 2018 at 20:56
You should read YDKJS - this & object prototypes to learn about this. — Felix Kling
– Felix Kling, Commented May 3, 2018 at 20:58

connexo · Accepted Answer · 2018-05-03 20:58:57Z

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 3, 2018 at 20:58

connexo

57.2k15 gold badges112 silver badges149 bronze badges

answered May 3, 2018 at 20:56

BalmySoftware

1913 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ghoyos Over a year ago

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

chevybow Over a year ago

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.

Ghoyos Over a year ago

Interesting @AdamS - would you mind showing me how to initialize outside the function in this example?

chevybow Over a year ago

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".

Mandeep Kaur · Accepted Answer · 2018-10-28 22:39:22Z

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.

Collectives™ on Stack Overflow

Understanding the this keyword

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related