0

I am getting confused regarding the this keyword in JS. I am not getting how this will work in a standalone function. I referred to many sites, all they are saying is when this is given in standalone function it will refer to the global object.

In that case for the following code I should get name as "steve" but I am getting undefined. I am trying to understand it but I couldn't pick up how it works.

let name = "Steve";
    
function sayHelloOne() {
  console.log(`Hello, I'm ${this.name}`);
}
    
sayHelloOne();
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Still_Learning
  • 209
  • 3
  • 14
  • `name` isn't a global variable. – robertklep Feb 08 '23 at 17:57
  • 1
    The differences can be subtle. For example, replace `let` with `var` and observe. – David Feb 08 '23 at 17:57
  • @David I tried with var also, I am getting undefined. – Still_Learning Feb 08 '23 at 17:58
  • 1
    @robertklep it is global? It's just not attached to `window`. – VLAZ Feb 08 '23 at 18:04
  • @DaveNewton, when I am doing console name is not attached to Window then where it will be lying, Here I am declaring the value for let, I understand that let will not come inside global object but for var also it's not working. – Still_Learning Feb 08 '23 at 18:09
  • @VLAZ I guess I missed that this is a browser-related question. – robertklep Feb 08 '23 at 18:10
  • 2
    @Still_Learning don't use `name`. It's an already reserved property on `window`. [var name and window.name](https://stackoverflow.com/q/11064897) | [What is the `name` keyword in JavaScript?](https://stackoverflow.com/q/2663740) – VLAZ Feb 08 '23 at 18:10
  • @VLAZ, Sure. I just checked name is reserved property. I changed the variable to player but I am still confused what that this inside function will refer to :( – Still_Learning Feb 08 '23 at 18:12
  • @Still_Learning In addition to previous comment, it (somewhat) depends. If you run it from the JS console it's attached to `window` (at least in my current Chrome version), but I can't speak to anywhere else/other environments. – Dave Newton Feb 08 '23 at 18:12
  • Depends on how it's executed. Check the duplicate. In short *usually* if not overridden it's going to be either the global object (in loose mode) or `undefined` (in strict mode). But the value of `this` is always determined at call time for a regular function. It's never pre-determined. – VLAZ Feb 08 '23 at 18:13
  • @DaveNewton you mean you're getting the value for this.name when you invoke it? – Still_Learning Feb 08 '23 at 18:14
  • @VLAZ I am not giving any strict so I can assume that my code is in loose mode right ? – Still_Learning Feb 08 '23 at 18:15
  • 1
    If this is the *exact* code you're running - then yes. But that's not a general "yes, the function is in loose mode". Because this could also be context-dependent - code which is within ES6 exclusive constructs (classes, modules, generators, etc) is automatically in strict mode. Code might also be bundled with a `"use strict"` emitted by the bundler/transformer. However, if you don't do any of that, if your function is just placed in global scope and you've not explicitly enabled strict mode - then it's not going to be strict. In the browser you can check `this === window` – VLAZ Feb 08 '23 at 18:20

0 Answers0