0

I am a beginner learning javascript

Testing "this" key word The following showWidth function displays "undefined" but when I changed "let" to "var" it displays 600 as intended. Now I am not sure if I fully understand the difference between let and var :(. Please help me understand with the eg. given below. Thank you for your time.

let width = 600; // declared global variable 
let shape = {
  width: 300 // property inside an object
};
let showWidth = function() {
  document.write(this.width);
}
showWidth(); // undefined with let, 600 with var. I expected 600 in both cases
cb64
  • 811
  • 6
  • 15
B Developer
  • 1
  • 1
  • @MehdiDehghani Nope, `this` in the example code refers to `window`. That leads to the answer to the question too. [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) doesn't create properties to `window` like [`var`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var) does. – Teemu Feb 26 '19 at 18:45
  • this always refers to one object, the object in which the function operates. In this case "this" refers to the global "WINDOW" object. That is my understanding. Please let me know if otherwise. – B Developer Feb 26 '19 at 18:48
  • @BDeveloper That's not always true, though in your particular case it refers to `window`, but rather because the function was called in the context of `window`. Just output `width` instead of `this.width`, then your code works also using `let`. Notice also, what is said about [document.write](https://developer.mozilla.org/en-US/docs/Web/API/Document/write). – Teemu Feb 26 '19 at 18:50
  • Aww I see, so what would be an alternate way to give the 600 output using ES6?. Coz using var I have no problem it gives the intended result which is 600. I wanted to use ES6 let and const. – B Developer Feb 26 '19 at 18:53
  • Just use variables as they are meant to be used, i.e. refer a variable directly with its name. You simply don't need `this` here. – Teemu Feb 26 '19 at 18:53
  • got it... thank you so much. I checked it and it works with document.write(width) for let. – B Developer Feb 26 '19 at 19:00
  • 1
    @Teemu I read "How does the "this" keyword work? " again, damn, I think I should get some sleep. – Mehdi Dehghani Feb 26 '19 at 19:02
  • 1
    @MehdiDehghani No worries. Before you go to bed, there was an interesting [earlier post today](https://stackoverflow.com/questions/54879169/kindly-explain-why-in-following-example-the-output-is-undefined/) asking about a weird use case of `this`. – Teemu Feb 26 '19 at 19:07

1 Answers1

0

So, the problem is you are trying to print a width with your function, but your function do not have the attribute width. When you use this you are saying this (That means the function), so if the function do not have the width attribute will show undefined. There is some ways to do it.

First one is:

var showWidth = function() {
  this.width = 500;
  document.write(this.width);
}

showWidth();

Second option:

var shape = {
         width: 200
};

var showWidth = function(obj) {
  document.write(obj.width);
}
showWidth(shape);

Third option: 


var width = 200;

var showWidth = function(value) {
  document.write(value);
}
showWidth(width);
Esdras Xavier
  • 769
  • 1
  • 4
  • 12
  • 1
    @ Esdras, thank you for your response. However, when I used "this" inside the function I am not referring to the function, as you described in the answer. Rather, "this" refers to the default global object, which is WINDOW. I belive, Teemu's answer makes sense to me. Please see comment above from Teemu. – B Developer Feb 28 '19 at 14:06
  • Oh I see... My bad, I get it wrong – Esdras Xavier Feb 28 '19 at 14:38