Foundation: Execution Context & Scopes

Question 1

What does browser do when it sees script tag?

Answer 1

While reading through HTML, if the browser encounters JavaScript code to run via a tag or an attribute that contains JavaScript code like onClick, it sends it to its JavaScript engine.

The browser’s JavaScript engine then creates a particular environment to handle the transformation and execution of this JavaScript code. This environment is known as the Execution Context.

Question 2

What does execution context contain?

Answer 2

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

Question 3

What does execution context do?

Answer 3

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 4

What are the kinds of Execution Context in JavaScript:

Answer 4

Global Execution Context (GEC)
Function Execution Context (FEC)

Question 5

What is Global Execution Context (GEC)

Answer 5

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 not inside a function gets executed.

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

Question 6

What Function Execution Context (FEC)?

Answer 6

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 7

Can their be multiple execution context?

Answer 7

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

Question 8

Can their be multiple execution context?

Answer 8

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

Question 9

How are Execution Contexts Created?

Answer 9

The creation of an Execution Context (GEC or FEC) happens in two phases:

Creation Phase
Execution Phase

Question 10

What is Creation Phase in Execution Context?

Answer 10

The creation phase occurs in 3 stages, during which the properties of the Execution Context Object are defined and set. These stages are:

1. Creation of the Variable Object (VO)
2. Creation of the Scope Chain
3. Setting the value of this keyword

Question 11

What is Execution Context Object?

Answer 11

The Execution Context Object stores a lot of important data which the code in the Execution Context uses during its run-time.

Question 12

What exact happens? Creation Phase: Variable Object (VO)

Answer 12

1. It stores the variables and function declarations defined within that Execution Context.

In GEC:
1. In the GEC, for each variable declared with the var keyword, a property is added to VO that points to that variable and is set to ‘undefined’.
2. For every function declaration, a property is added to the VO, pointing to that function, and that property is stored in memory. This means that all the function declarations will be stored and made accessible inside the VO, even before the code starts running.

In FEC:
1. It does not construct a VO. Instead, it generates an array-like object called the ‘argument’ object, which includes all of the arguments supplied to the function.

Question 13

What is Hoisting?

Answer 13

The process of storing variables and function declarations in memory before the execution of the code is known as Hoisting.
It happens in Creation Phase: Creation Of The Variable Object (VO).

Question 14

What happens in Creation Phase: Creation of The Scope Chain?

Answer 14

Each Function Execution Context creates its scope: the space/environment where the variables and functions it defined can be accessed via a process called Scoping.

This means the position of something within a codebase, that is, where a piece of code is located.
So global variables can be used anywhere.

var global_variable = 20;
function main_function() {
// Local Variable
var local_variable = 30;

    var nested_function = function () {
  
        // Display the value inside the local variable
        console.log(local_variable);
    }
  
    var another_nested_function = function () {
          
        // Displays the value inside the global variable
        console.log(global_variable);
    }
  
    nested_function();
    another_nested_function();
}
  
main_function();

Question 15

What is lexical scoping?

Answer 15

When a function is defined in another function, the inner function has access to the code defined in that of the outer function, and that of its parents. This behaviour is called lexical scoping.

Lexical scoping is also known as static scoping.
Lexical scoping in JavaScript allows for the concept of closures.
Most languages use lexical scoping because it tends to promote source code that is more easily understood.

Question 16

What is Creation Phase: “this” Keyword?

Answer 16

The JavaScript this keyword refers to the scope where an Execution Context belongs.
Once the scope chain is created, the value of ‘this’ is initialized by the JS engine.

Global Context
this refers to the global object — which is the window object.

Function Context
the value of this keyword the function has access to is that of the object it is defined in, not the global object.

Example:

const obj = {
name: “Billy”,
sing: function () {
return “lalala “ + this.name
},
}
obj.sing() // “lalala Billy”

Question 17

What are different Hoisting?

Answer 17

Function Hoisting: Doesn’t matter where you declare the function it’s hoisted
Variable Hoisting: var is initialized to undefined.

Ground Rules of Hoisting:
Hoisting only works for function declarations, not expressions.
variable hoisting does not work for variables initialized with the let or const keyword.

Question 18

Where is scope stored?

Answer 18

It’s [[scope]]

Question 19

Why do we use “use strict”?

Answer 19

Example,

function weird() {
height = 50;
}
weird()

Height will be stored in global scope with a value of 50.

Question 20

Why not just use global?

Answer 20

Memory
Variable collusion

Question 21

What is IIFE?

Answer 21

Immediately invoked function Expression. Used in something like jQuery and other libraries to simplify and not use global variables.

(function () {
})();

Question 22

What is Dynamic Scope vs Lexical Scope

Answer 22

Lexical scoping refers to when the location of a function’s definition determines which variables you have access to.
Dynamic scoping uses the location of the function’s invocation to determine which variables are available.

Example: “this” value in the closure can be solved with arrow functions.

Question 23

What is call, apply, bind?

Answer 23

The call is simply called the function. Example a() is a.call(); we can borrow methods from other objects.
The call can take parameters.

Apply:
Apply can take an array of paraments.

Bind:
Is similar to apply but doesn’t apply, it binds to a variable which can be used later.

Question 24

What is function currying?

Answer 24

Using bind we can curry a function, Basically reusing a function to a new function.

Example:
function sum(a, b) {
return a + b;
}
let curriedSum = _.curry(sum); // using _.curry from lodash library
alert( curriedSum(1, 2) ); // 3, still callable normally
alert( curriedSum(1)(2) ); // 3, called partially

Question 25

Difference between context and scope?

Answer 25

Scope pertains to the visibility of the variables
Context refers to the object within which a function is executed.