JavaScript Execution Context

Question 1

What is the scope chain in JavaScript?

Answer 1

The scope chain is the idea of the JavaScript engine traversing up the scopes of the execution contexts that a function is defined in, in order to resolve variables and functions invoked.

Question 2

Is the scope chain multi directional?

Answer 2

No the scope chain only works one way.

From a function defined in global scope the execution context of the function can look up the scope chain to the global execution context to resolve variables and functions. But the global scope can not access what is inside the function unless it is returned.

Question 3

What is a parser?

Answer 3

Parser: A Parser or Syntax Parser is a program that reads your code line-by-line. It understands how the code fits the syntax defined by the Programming Language and what it (the code) is expected to do. It checks if the syntax is correct.

Question 4

What is a JavaScript engine?

Answer 4

JavaScript Engine: A JavaScript engine is simply a computer program that receives JavaScript source code and compiles it to the binary instructions (machine code) that a CPU can understand. JavaScript engines are typically developed by web browser vendors, and each major browser has one. Examples include the V8 engine for Google chrome, SpiderMonkey for Firefox, and Chakra for Internet Explorer.

Question 5

What is the difference between a function declaration and a function expression?

Answer 5

Function Declarations: These are functions that are assigned a name.
Function expressions: These are anonymous functions usually assigned to a variable.

Question 6

What are the two kinds of Execution Context in JavaScript?

Answer 6

Global Execution Context (GEC)

Function Execution Context (FEC)

Question 7

What is the GEC and what does it do? Can there be more than one GEC for a JavaScript file?

Answer 7

Whenever the JavaScript engine receives a script file, it first creates a default Execution Context known as the Global Execution Context (GEC).

The GEC is the base/default Execution Context where all JavaScript code that is not inside of a function gets executed.

For every JavaScript file, there can only be one GEC.

Question 8

What is FEC and what does it do? Can there be more than one in a JavaScript runtime?

Answer 8

Function Execution Context

Whenever a function is called, the JavaScript engine creates a different type of Execution Context known as a Function Execution Context (FEC) within the GEC to evaluate and execute the code within that function.

Since every function call gets its own FEC, there can be more than one FEC in the run-time of a script.

Question 9

The creation of an Execution Context (GEC or FEC) happens in two phases, what are they?

Answer 9

Creation Phase

Execution Phase

Question 10

The Execution Context creation phase occurs in 3 stages, what are they?

Answer 10

Creation of the Variable Object (VO)
Creation of the Scope Chain
Setting the value of the this keyword

Question 11

What is a JavaScript execution context?

Answer 11

Execution context is a special environment created by the JavaScript engine that handles the transformation and execution of JavaScript code.

Question 12

Does the browser natively understand high-level JavaScript code?

Answer 12

No, the browser doesn’t natively understand the high-level JavaScript code that we write in our applications. It needs to be converted into a format that the browser and our computers can understand – machine code.

Question 13

While reading through HTML, if the browser encounters JavaScript code such as a script tag or an attribute that contains JavaScript code like onClick, what does the browser do?

Answer 13

It send the JavaScript code to the JavaScript engine to be run.

Question 14

What does the execution context contain?

Answer 14

The Execution Context contains the code that’s currently running, and everything that aids in its execution.

Question 15

What 4 things happen during the execution context runtime?

Answer 15

During the Execution Context run-time, the specific code gets parsed by a parser, the variables and functions are stored in memory, executable byte-code gets generated, and the code gets executed.

Question 16

What does hoisting mean in JavaScript? Does it only effect functions?

Answer 16

Function and variable declarations are hoisted in JavaScript. This means that they are stored in the memory of the current Execution Context’s VO (variable object) and made available within the Execution Context even before the execution of the code begins.

Concise description:
This process of storing variables and function declaration in memory prior to the execution of the code is known as Hoisting.

Question 17

Are variables declared with the let and const keywords hoisted? What happens if you access the variable ahead of declaration?

Answer 17

Variable hoisting does not work for variables initialized with the let or const keyword. Trying to access a let/const variable ahead of declaration will result in a ReferenceError.

The variables will be hoisted but not assigned with the default value of undefined.

console.log(name); 
let name = "Victor"; will throw the error:

If var was used instead the the variables would be hoisted and assigned the value ‘undefined’.

Question 18

Does hoisting work for function declarations and function expressions?

Answer 18

No, hoisting only works for function declarations, not expressions. Here is an example of a function expression where the code execution will break.

getAge(1990); 
let getAge = function (yearOfBirth) {
console.log(new Date().getFullYear - yearOfBirth) 
};

The function is assigned to a variable declared with let so cannot be hoisted.
Uncaught ReferenceError: Cannot access ‘getAge’ before initialization.

Question 19

What is a variable object?

Answer 19

A Variable Object (VO) is an object-like container created within an Execution Context. It stores the variables and function declarations defined within that Execution Context.

Question 20

What does the keyword this refer to in JavaScript?

Answer 20

The JavaScript this keyword refers to the scope where an Execution Context belongs.

Question 21

When is the value of ‘this’ initialised by the JS engine?

Answer 21

Once the scope chain is created!

Question 22

What does ‘this’ refer to in the GEC?

Answer 22

In the GEC (outside of any function and object), this refers to the global object — which is the window object.

Question 23

Why is this

var occupation = “Frontend Developer”;

function addOne(x) { 
    console.log(x + 1) 
}

The same as doing this?

window.occupation = “Frontend Developer”;
window.addOne = (x) => {
console.log(x + 1)
};

Answer 23

Function declarations and variables initialized with the var keyword in the global context get assigned as properties and methods to the global object – window object.

Question 24

In a GEC why does the following code work?

var lastname = “mann”;

console. log(this.lastname); // mann
console. log(lastname === this.lastname); // true

Answer 24

Functions and variables (declared with var) in the GEC get attached as methods and properties to the window object. That’s why the snippet above will work.

Question 25

What is the default value of the ‘this’ keyword within a function call not in strict mode?

Answer 25

The global object, which is window in a browser.

Inside a function, the value of ‘this’ depends on how the function is called.
If the following code is not in strict mode, and the value of ‘this’ is not set by the call, ‘this’ will default to the global object, which is window in a browser.

function f1() {
  return this;
}

Question 26

In an Object what does ‘this’ refer to ?

Answer 26

In objects, the this keyword doesn’t point to the GEC, but to the object itself.