Context and Lexical environment in the global scope and object scope

Question

I'm new to javascript and I am confused over context and lexical environments.

Case 1:

Here I am in the global scope:

function fun() {
    console.log("It works!");
}
fun(); //prints It works!
this.fun(); //also prints It works!

Am I correct to assume that the this context is implied when I write fun(); without the this keyword? Basically, here this === global/window. My question is when I type fun(), is the this implied just like I would type this.fun();? Or is it the case that when I type fun(); without the this keyword, JavaScript looks into the lexical environment at the global scope level i.e. it looks if there is a fun function declared in it's current scope that is global?

Case 2:

let cat = {
  purr: function() {
    console.log("meow");
  },
  purrMore: function() {
    for (let i = 0; i < 10; i++) {
      purr();
    }
  }
};

cat.purr();
cat.purrMore();

Why is that when I call purr in purrMore without the this., I get a reference error? If fun function in Case 1 works without the this., shouldn't it also work here without the this.?

My confusion is as follows: if in Case 1, fun function invocation without the this. keyword works because the this. is implied, then purr function invocation without the this. should also work. But if the fun function invocation without the this. keyword uses lexical environment, then it makes more sense that Case 2 doesn't work. But then, why does this code work:

function purr() {
    console.log("MEOW")
}

let cat = {
  purr: function() {
    console.log("meow");
  },
  purrMore: function() {
    for (let i = 0; i < 10; i++) {
      purr();
    }
  }
};

cat.purr();
cat.purrMore(); //prints MEOW ten times

Why isn't the purr function inside cat object present in the lexical environment of purrMore?

Lastly, what topics or resources should I refer so I can remove these gaps in my knowledge?

score 2 · Accepted Answer · answered Dec 13 '20 at 21:06

I am confused over context and lexical environments.

Remember that they are totally separate entities:

The this context is undefined by default, it only assumes a value in a) method invocations b) sloppy mode.
The lexical environment is not a javascript object, it only stores declared variables. It is unaffected by the this value.

"use strict";
const fun = function() {
    console.log(this);
}
fun(); // prints `undefined`
window.fun(); // throws exception

Am I correct to assume that the this context is implied when I write fun(); without the this keyword?

No. fun is looked up in the lexical scope, nowhere else.

Or is it the case that when I type fun(); without the this keyword, JavaScript looks into the lexical environment at the global scope level i.e. it looks if there is a fun function declared in it's current scope that is global?

Yes. In your first example, there is no local scope, so it's looking for fun the global scope, where it finds the declared function. In your purr() example, it's first looking in the block scope of the loop, then in the scope of the function, then in global scope where it finds the function purr.

The global scope is an exception insofar that unlike other scopes, (parts of) it is backed by an object as storage, the global object. You normally never use that, though.

wahwahwah · Answer 2 · 2020-12-13T21:00:41.893

In case two, you're defining an object cat with a method purr, but not referencing the object when calling purr(). Javascript is looking at the global scope to find a function purr(), not finding it, and throwing a reference error.

Working example:

let cat = { 
  purr: function() { //<-- defined a
    console.log("meow");
  },
  purrMore: function() {
    for (let i = 0; i < 10; i++) {
     this.purr(); // <-- "this" is the `cat object`
    }
  }
};

cat.purr();
cat.purrMore();

In your second example, in case two, you define purr() at the global scope...

function purr() {
    console.log("MEOW")
}

... Making the reference valid.

The best resource for understanding javascript objects and scope that I've found is here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

And a further example of the sort of what "lexical scope" means is here.

Context and Lexical environment in the global scope and object scope

2 Answers2