what is the lexical scope of an object?

Question

I've been reading a little bit into execution contexts and lexical scoping. From my understanding, if a function is declared, it will have a reference to the lexical environment (LE) that defined that function. for example,

var x = 20;
function foo() { 
  console.log(x);
}

So the reason why foo has access to variable x is because foo's LE has a reference to the LE which created foo which is the global LE so it can search through the scope chain until it finds x.

however for the following snippet:

var stacy = {
  name: 'stacy',
  age: 33,
  sayName: function() {
    console.log(this.name);
  }
}

1. What is the LE of the object stacy? (I believe it would be the global LE)

2. What is the LE of the sayName()? (if I omit the "this" keyword, why couldn't it find the variable "name" when the function couldn't find "name" in its own LE)?

Answer 1

I use "scope" instead of "LE" here, as the former is more common in JavaScript learning resources.

Functions have their own scope; objects do not. So while (1) the scope of stacy is indeed the global scope, (2) the code of sayName runs in its own scope, for which the parent scope is the global scope. this.name works because non-arrow functions have an additional binding this added to their scope, but name doesn't work because the object isn't a scope, it's just a data structure with a 'name' property. stacy.name would work, and you could declare a name variable with another var or let statement that would work in either scope.

Answer 2

Example 1:

var x = 20;

function foo() {
  console.log(x);
  console.log(this.x);
}

foo();

In the above example, if we do either console.log(x) or console.log(this.x), it will print the same value. Why so? Because the x is available as a variable to the function foo in its parent scope, it is also available as a property in the global object. The parent object for foo is the global object as it is defined and the function created using the function keyword has a bound context of its parent object by default. Now, look at the second example.

Example 2:

var stacy = {
  name: 'stacy',
  age: 33,
  sayName: function() {
    console.log(name);
    console.log(this.name);
    console.log(stacy.name);
  }
}

stacy.sayName();

In the second example, the console.log(name) and console.log(this.name) will not be equal but console.log(this.name) and console.log(stacy.name) will be equal as per above example's logic.

And the story will be different if use arrow function in place of the function keyword. In arrow function, this keyword refers to the global object.