Execution Contexts and Lexical Environments

Question 1

What is a syntax parser?

Answer 1

A program that reads your code and determines what it does and if it’s grammar is valid. Your code isn’t magic someone else wrote a program to translate it for the computer.

Question 2

What is the lexical environment?

Answer 2

Where something sits physically in the code your write. ‘Lexical’ means ‘heaving to do with words or grammar’. A lexical environment exists in programming languages in which where you write something is important.

Question 3

What is the execution context?

Answer 3

A wrapper to help manage the code that is running. There are lots of lexical environments. Which one is currently running is managed via execution contexts. It can contain things beyond what you’ve written in your code.

Question 4

What is a name/value pair?

Answer 4

A name which maps to a unique value. The name may be defined more than once, but only can have one value in any given context. That value may be more name/value pairs.

Question 5

What is an object?

Answer 5

A collection of name value pairs. This is the simplest definition when talking about javascript.

Question 6

What is the base execution context?

Answer 6

The global execution context.

Question 7

What is the global execution context?

Answer 7

The context that is available everywhere to everything in your code. This basically means “not inside a function” - code or variables that aren’t inside a function.

Question 8

What does the global execution context create for you?

Answer 8

The javascript engine creates the global object.

Question 9

When running javascript in the browser, what does the global object refer to?

Answer 9

The ‘window’ object.

Question 10

What is ‘this’ equivalent to in the global context?

Answer 10

Window

Question 11

What do you expect this code to output and why?

Answer 11

The result is due to hoisting. Even though function b is executed before it’s declared lexically, which would cause an error in most languages, in javascript function B is hoisted to the top in its entirety and variable a is hoisted as well, but not it’s value, which is why a only returns undefined.

Question 12

What is hoisting?

Answer 12

Hoisting is a confusing term because it’s not actually moving code to the top of the page. It is referring to the result of the creation phase before your code is executed line-by-line in which the javascript engine has already set aside memory space for the variables and functions you’ve written. It does this so that once it starts executing line-by-line it can access them.

Question 13

What is the main difference between variables and functions during hoisting?

Answer 13

Functions in their entirety( the function, its name, and the code inside the function to be executed) is placed into memory.

Variables, however, only have their name set aside in memory and their value is set to undefined. The value isn’t set until the execution phase.

Question 14

What do you expect the output of this code to be and why?

Answer 14

Console.log(a) produces a reference error because it has not even been defined in memory space yet. If the variable a had been declared or even defined, it would have simply resulted in undefined because during hoisting memory space for its name would’ve been set aside, but the value wouldn’t be declared until the execution phase.

Question 15

What are the two stages of an execution context?

Answer 15

1. Creation Stage - When function is called, but before it executes any code inside.

• Create the scope chain
• Create variables, functions and arguments
• Determine the value of “this”

1. Activation/Code Execution Phase:

• Assign values, references to function
• Interpret/execute code

Question 16

What’s the difference between ‘not defined’ and ‘undefined’?

Answer 16

‘Undefined’ is actually a special value in javascript and exists - it is not an error. Whereas ‘not defined’ is an error and not a value - it does not exist.

However, you should never set a variable to ‘undefined’ because this should be left as something that only the javascript engine can set or debugging can become confusing.

Question 17

What should the console output for this code?

Answer 17

Because the execution phase is line by line, when it reaches line 7 a has not been defined yet, but once it reaches 11 it has set the value in line 9.

Question 18

What does single threaded mean?

Answer 18

This means one command is being executed at a time. In a browser environment, javascript isn’t the only thing happening in the browser - so, under the hood of the browser it may not seem to be single threaded, but from a programming perspective it is.

Question 19

What does synchronous mean?

Answer 19

It means code is executed one line of code at a time and in order.

Question 20

What does invocation mean?

Answer 20

Running, or calling, a function. In javascript this is done by using parenthesis ()

Question 21

Step through how the javascript engine would execute this code by describing the sequence of the execution stack.

Answer 21

1. Since a(); is the first invoked function, the execution context for ‘a’ will be put onto the execution stack.
2. function a is then run line-by-line and the parser gets to its invocation of b(); and the execution context for ‘b’ is added to the top of the stack.
3. since b is at the top of the stack, its single line of code ‘var d;’ is executed and its execution context is popped off the stack.
4. The parser now returns to the execution context for a and executes the var d declaration on line 2. This execution context is now popped off the stack.
5. The global execution context is the only one left on the stack and it has one line left, so the parser resumes where it left off, executing the last line - var d’s declaration.

Question 22

Describe how the execution stack works.

Answer 22

Every time a function is called a new execution context for that function, even if it’s invoking itself, is created (this variable and scoped variables are also declared) and added to the top of the execution stack.

Its code is executed line by line and, when the function finishes, its then popped off the stack. Whatever is at the top of the stack is what’s currently running.

So, if one function invokes another inside of it, that enclosed function’s context is added to the top and executed until it’s context is popped off and then the parser resumes running at the next context at the top of the stack.

Question 23

What is the variable environment?

Answer 23

This just describes where the variables live and how they relate to each other in memory.

Question 24

What should the console output for this code?

Answer 24

Question 25

What should the console output for this code?

Answer 25

It will output: 1

The reason for this is that lexically function b was not declared inside of a, but at the global level. So, it’s outer enviroment is the global execution context. When the parser failed to find myVar inside of function b’s execution context, its next step was to go down and find it in the global execution context.

So, the order of the execution stack is created by order of invocation, not declaration and in that case where you declare your function doesn’t matter. However, it does matter lexically where a function is declared in setting its relation to other execution contexts - this is called the scope chain.

Question 26

Define the scope chain.

Answer 26

Scope refers to where a variable can be accessed and chain refers to the links to outer environment references.

It’s essentially the sequence of execution contexts the parser will go down through in its attempt to track down a variable’s definition. It is not necessarily the same sequence as the execution stack itself.

Question 27

What should the console output for this code?

Answer 27

a(); returns 2 because within its execution context both the function b and myVar have been defined.

b(); returns an error because b was not defined in the global execution context.

Question 28

What should the console output for this code?

Answer 28

Question 29

What’s the difference between let and var?

Answer 29

The difference is scoping. var is scoped to the nearest function block and let is scoped to the nearest enclosing block, which can be smaller than a function block. Both are global if outside any block.

Also, variables declared with let are not accessible before they are declared in their enclosing block.

Question 30

Why are we able to make asynchornous callbacks in JS if it’s a synchronous language?

Answer 30

Because the javascript engine is only one part of the browser. It also has other components taking care of processes like rendering, http requests, etc, and the javascript engine has hooks to communicate with these other components. So, it’s possible for these other components to fulfill requests while JS is going along its synchronous execution process.

Question 31

What is the event queue?

Answer 31

The event queue is an ordered list of tasks like the execution context, except it handles events coming from the browser such as click events, mouse movements, http requests, etc.

The browser adds events to the event queue asnychonously, BUT it isn’t processed by the JS engine until the execution stack is finished.

Question 32

What will the console output if you click the page immediately?

Answer 32

Because the event queue is not processed until the execution stack is completed, the log coming from the click event does not occur until after the 3s function and the console.log function, which is in the global context, are finished.