Why this pointing to global context is giving undefined, even when global variable is defined ?

[utkarsh-1602]

this is my program

var status = "online"

setTimeout(() => {
    
    const status = "offline"

    const data = {
        status: "not responding",
        getStatus(){
            return this.status;
        }
    }

    console.log(data.getStatus())
    console.log(data.getStatus.call(this))

}, 0);

why console.log(data.getStatus.call(this)) is returning undefined ?

[ManjulaP1012]

I guess, when you call "data.getStatus.call(this)", getStatus method setting the value of "this" to global object. But inside getStatus method, "this.status" trying to access global object property , not the status property inside setTimeout.

If we change getStatus function to arrow function, issue will get resolved.

getStatus(){ return this.status; }

[utkarsh-1602]

@ManjulaP1012 actually the expected output should be "online" as this is pointing to global object status. but I'm not understanding why its returning undefined

[jayeshbhole7]

the reason it was returning undefined is that regular functions in Javascript have their own this context which does not automatically refer to the lexical scope of where they are defined that is why as ManjulaP1012 said that using arrow function will resolve it.

@ManjulaP1012 actually the expected output should be "online" as this is pointing to global object status. but I'm not understanding why its returning undefined

[NookieGrey]

It should work, you can see the working example here
But if you use some builders like webpack or ecosystems like codesandbox it'll not work, cose they wrap your code in IIFE