Javascript is dynamically typed.

This means while its code is running, it figures out what type your variable is.

On the other hand, static typing is when you must declare the type of your variable in your code:

In JS, you can have it assign to different types:

Primitive Types in JS

A primitive type represents a single value. Something that isn’t an object. Whereas an object is a collection of name/value pairs.

There are 6 primitive types in JS:

undefined – Represents a lack of existence. Its what JS engine sets a variable to initially. You test for it only. Never assign it.

null – Used to represent lack of data. This is something you can and should use. Leave undefined to the JS engine.

boolean – literally the keyword true or false

number – Its a floating-point number. Always some decimal attached to it.

string – single or double quoted character representation

symbol – es6 newly defined type.

We already know that in the JS engine, we have an execution context stack. Each invocation of a function pushes more execution contexts into the execution stack.

There is another list in the JS engine, called the Event Queue. Naturally, it stores all the events or notifications of events that may be happening. For example, if have a ‘click’ event, it gets placed into this Event Queue.

Now, say we have multiple events going on, say we have a click event, and then an event for a HTTP request. They all get queued in this ‘Event Queue’.

The Event Queue gets looked at if the EXECUTION STACK IS EMPTY.

JS will then look at the queue. Say it sees a click event. And then goes to look for that handler to be invoked. It will then push an execution context for that handler onto the execution context.

Then then the next item in the queue moves up.

The browser may be asynchronously putting things into the event queue. However, the code that is running, is doing it synchronously.

Refresh the page. You’ll see your browser’s Activity Indicator scrolling. At this point, click the screen 4 times.

You’ll notice that nothing happens. This is because even though your events are placed into the Event Queue, it is not being processed. Instead, your code is being processed the Execution Context Stack. Specifically, the execution phase. It’s running your code where you have to wait 3 seconds.

When all of your code has been processed, it will log:
1) 3 seconds over
2) all done

Then it will continue onto the event queue. It will see the click events in there and process them one by one. Since it already has your handleEvent() in memory, it will invoke that function 4 times, and thus, you’ll see it display:

4 √ clicked

This is important because it means long-running functions that take up a lot of processing time can interrupt events being handled.

An execution context has 2 phases:

– Creation phase
– Execution phase

‘Let’ is processed in the Execution Phase.

Thus, unlike var, which is parsed and kept in memory in the Creation phase, let is processed in the Execution Phase and cannot be hoisted. This means the let variable will be visible inside the block which it was created. Like any other declared variables, it is also kept in memory.

Lexical Environment in JavaScript is created every time you create a scope using the curly brackets {}. It can be nested: {{…}}

The lexical environment entails all of the outers scopes available to the current context.

Let’s look at an example:

For function ‘a’, its outer environment is the global environment, it sees myVar = 1;

The function ‘b’ its outer environment is that of function a where a’s myVar is hoisted and assigned to 2.

Its reference to the outer environment is function ‘a’ scope.

Thus, when function b is invoked, myVar will be 2.

Example 2

In this example, let’s try to invoke b in the global scope. In this lexical environment, b was never defined, and thus, you’ll get an error saying ‘b was never defined’.

Example 3

In this example, we see the global context has function ‘a’ defined and myVar.
We invoke function ‘a’, which then defines function b. Then it invokes b().

In function b, we log myVar.

Now, in this situation, its outside reference is function ‘a’.
However, myVar is not defined in function ‘a’.
Now we go down the scope chain and it looks at function ‘a’s outer reference. It sees that myVar is defined and assigned 1.

Thus, it look log 1.

This is going up the scope chain.

execution-context-example-vid

Let’s go through an example:

We start at the global execution context:

(global) Create Phase – It parses our functions a and b and puts it into memory. It then puts myVar = undefined into its memory.

(global) Execution Phase – It executes and sees that myVar is assigned to 1.
Then it logs myVar as 1.
We then have a function invocation at a().

Thus, we push a() execution context onto the execution context stack:

(a) Creation Phase – It parses and puts myVar = defined in its memory.
(a) Execution Phase – It executes and assigns myVar to 2. It logs 2. Then it invokes b().

Thus, we push b() execution context onto the execution context stack:

(b) Creation Phase – I parses and puts myVar = defined in its memory.
(b) Execution Phase – It executes and logs myVar as undefined.

B() execution context finishes and pops.

We are now back to a() execution context. A() execution context finishes and pops.

We come back to the global execution context. We now log myVar, which is 1.

Invocation – Running a function. Calling a function. Invoke a function.

We do this by using ‘()’ behind a function reference.

When source is run, first

Global Execution Context (this, global obj, attach functions to this, hoisting everything)

In our example, the JS compiler will parse the code and put our functions an and b into memory.

In the Execution Phase, we hit a() first. At this point, an execution context for a() is created and placed on the execution stack.

Note that whichever context is at the top, is the current one running.

It will have its own memory space for variables and functions.

It will go through its own Create/Execution Phase.

Then in a()’s execution phase, it hits b().

An execution context for b() is created and placed onto the execution stack.

This is how function invocation happens in JS.

Every function creates a new execution context, and goes through its Create/Execution phase.

When b() finishes, it gets popped. Then a() gets popped. And back to the global.

Execution Context has two phases:

– Creation phase: sets up functions, variables inside of memory
– Execution phase: It runs your code

output:

Called b!
undefined
Hello World!


Basically after the creation phase, it starts executing.

Function as a whole was in memory. So executing it gives us:
Called b!

Then when we tried logging a, a is indeed in memory, but its value is undefined, which was set in the Creation Phase.

So it displays ‘undefined’.

Then we go down to the next line and sees that a is set to ‘Hello World!’.
Then we go down one line further and logs it. This time, a is set to a string, and we display that string.

Execution Context –

1st phase (Creation) –

– Global Obj
– this
– Outer Environment
– Hoisting – functions are in memory, variables names are valid, but undefined

output:

undefined


undefined

In JS, when we see undefined, its a special value that JS has which means the variable has not been set.

output:


a is undefined!


In the example below, you’ll get an error sayings its variable a is ‘not defined’ because after the JS compiler parses everything and put them into memory, it didn’t find anything for a variable named ‘a’.

Thus, when you try to access it in your execution phase, a does not exist.

Never set yourself to ‘undefined’

It’s better to let ‘undefined’ mean that the variable has NEVER been set. It should mean the developer has never touched it.

output:


Called b!
Hello World!


Now lets hoist our execution to the top.

output


Called b!
undefined


Now try removing the a

Now, you’ll get an error saying ‘a’ is not defined.

Reason – 5:00

Execution Context:

(1st) Creation Phase (global obj, this) – it sets up memory space for created variables and functions. This step is called Hoisting.

It’s not moving code on top of page. All it means is that before your code is being executed, the compiler has parsed your code, and those variables and functions already exist in memory. During execution, they exist and we can access them.

The function in its entirety (including its name) is placed into memory space.

(2nd) Execution Phase – However, in the next phase of executing your code, when it comes to variables, because it does not know ultimately what the values will be until it starts executing your code, will instead put a placeholder called undefined. It just means we don’t know what the value will be.

Hence, all javascript variables initially are set to undefined

Whenever code is run, it is run inside an execution context.

Execution context being first created, then run.

For example, the global execution context creates 2 things for you:

– a global object
– this variable

Then when you run it, the ‘this’ will point to the global object for you to reference. Anything you implement will also be attached to this global object.

Let’s see how it works:

1) create an empty html page
2) create an empty JS file
3) include this empty JS file in the html page

Now run the html page. Look in Inspect, and under Console tab, type this

You’ll see the Window object.

The execution context was created by the JS engine. And it decides the value of what ‘this’ be. In the currently situation, this is pointing to the window object.

If you’re running JS in Node, you’ll get a different object and ‘this’ will be pointing to that instead.

An execution context was created at the global level as a global object. ‘this’ refers to the window object.

Global simply means ‘not instead a Function’

Your definitions being attached to the global object

The execution context is created

the ‘this’ reference and ‘window’ object are available.

Anything you create globally (the variable ‘a’ and function ‘b’) will be attached to the global object:

console.log(window.a); // Hello World
window.b() // test

When code is executed, an execution context is created.

At the base level, you have a Global Object.
If you are in the browser, that global object is ‘window’ object.

You get a special variable called ‘this’, which references the global object.