Execution context for object literals and object literal methods

Question

var objLiteral = {
    name: 'Kumar'
    myNameIs: function() {
        return this.name;
    }
};
objLiteral.name = 'Arvind';
objLiteral.myNameIs(); // returns Arvind

Can someone explain how the creation phase and execution phase run through this code? I understand how this works for let, const, functions (global execution context, function execution context) but not for object literals.

Here is my take so far:

• Creation phase:

  1. the objLiteral object {} is placed somewhere in memory and is 'live and accessible' and not garbage collected until the end of the program.
  2. a memory location is created for the property name with a pointer returned back to the object so that it can be found during execution.
  3. a memory location is created for the method myNameIs with a pointer returned back to the object so that it can be found during execution.

• Execution phase:

  1. objLiteral.name is set to the value 'Arvind', by tracing the memory locations previously stored.
  2. then objLiteral.myNameIs() is invoked and using the memory location of the object and the pointer to the method/myNameIs a 'function execution context' is created. The value of this is taken from the object the method is called on. Therefore this==objLiteral
  3. Since this is the same as objLiteral the memory trace to the location of the value is the same as objLiteral.name and it returns 'Arvind'

When is the variable objLiteral assigned a value i.e. given a reference to the object? During the creation phase or execution phase?

Answer 1

Here is my take so far. Creation phase: the objLiteral object {} is placed somewhere in memory and is 'live and accessible' and not garbage collected until the end of the program.

No, absolutely not. An execution context, and the separation between creation phase and execution phase, has nothing to do with object (literal) creation. It is solely about code execution, whether that is in the global script scope or in a function call. An execution context basically is a stack frame.

Objects from object literals are allocated, created and mutated during the execution phase, never during the creation phase¹.

So what happens in your example is:

1. creation phase of the global context:
   • the variable objLiteral is allocated and initialised with undefined
2. execution phase of the global script:

   1. an object is created, a string Kumar is created and placed in its .name property, a function (with a closure over the current scope) is created and placed in its .myNameIs property, the object is assigned to the objLiteral variable

   2. the object in the variable objLiteral is looked up, a string Arvind is created assigned to the object's .name property

   3. the object in the variable objLiteral is looked up, its .myNameIs property is looked up, and is invoked as a method. This creates a new execution context:

      1. creation phase of function call:
         • a new scope is created
         • the this value is set to the method call receiver, i.e. the object
         • no variable or parameter declarations need to be set up in your example
      2. execution phase of the function call:
         1. the object in this is looked up and its .name property is accessed
         2. that value is returned, ending the function execution

      The execution context of the function ends, its local scope is no longer referenced and can be garbage-collected, the execution of the global script resumes with the returned string value.

Garbage collection has nothing to do with this either. Objects are garbage-collected as soon as they are no longer referenced from anything (variables or properties), variables (and scopes) are garbage-collected as soon as they are no longer referenced from anything (live stack frames or closures).

_{1: I wrote "from object literals" specifically, as some function objects are created during the creation phase from function declarations}