Scope & Scope Chains

The Global Environment & Global Window Object

The Global Environement

The base context that all functions and components in your program has access to.
"global" - code accessible to every line of code
- The global environment can be determined lexically (the physical placement of code in your program)
When your program executes, the global execution context is created.
- The Global Window Object
- "this"
- Created by the javascript engine

Global Execution Context

Global Window

Object

"this"

Code to Execute

Let's take a look at an example!

Execution Context

A wrapper that assists and manages the code that is running.
The lexical environments running are managed by execution contexts. Execution contexts contain values beyond what is written in your code.
Two Phases
- Creation Phase
- Execution Phase

Creation Phase

Global Execution Context is created
"this" is created
Outer Environment
Sets up all variables and functions in memory

Execution Context (Creation Phase)

Global Execution

Context

"this"

Creates Memory space for variables and functions

Outer

Environment

Execution Phase

Each line is executed line by line

What is "scope"?

"scope"

"scope" is a term used to describe what values your program has access to.
"scope" can be determined lexically (based on the physical position of code in your program)
There are two types of "scope", function aka local scope and global scope.

function grace(){
}



function hopper(){
    grace();
}


hopper();

Global Execution Context

(created and executed)

hopper()

Execution Context

(create and execute)

grace()

Execution Context

(create and execute)

function grace(){
}



function hopper(){
    grace();
}


hopper();

Global Execution Context

(created and executed)

hopper()

Execution Context

(create and execute)

grace()

Execution Context

(create and execute)

function grace(){
}



function hopper(){
    grace();
}


hopper();

Global Scope

window = {grace:function(){},
          hopper: function(){ 
            grace();
          }
         }

function hopper(){
    var myNum;    
}

function grace(){
   var myNum = 2;
   hopper();
   
}

var myNum = 1;
grace();

Global Execution Context

(created and executed)

hopper()

Execution Context

(create and execute)

grace()

Execution Context

(create and execute)

myNum

undefined

myNum

function hopper(){
    var myNum;    
}

function grace(){
   var myNum = 2;
   hopper();
   
}

var myNum = 1;
grace();

Global Execution Context

(created and executed)

hopper()

Execution Context

(create and execute)

grace()

Execution Context

(create and execute)

myNum

undefined

myNum

function hopper(){
    var myNum;    
}

function grace(){
   var myNum = 2;
   hopper();
   
}

var myNum = 1;
grace();

Global Execution Context

(created and executed)

hopper()

Execution Context

(create and execute)

grace()

Execution Context

(create and execute)

myNum

undefined

myNum

function hopper(){
    console.log(myNum);    
}

function grace(){
   var myNum = 2;
   hopper();
   
}

var myNum = 1;
grace();

Global Execution Context

(created and executed)

hopper()

Execution Context

(create and execute)

grace()

Execution Context

(create and execute)

myNum

Reference to Outer Lexical Environment

myNum

"closure"

"closure" is when a function remembers and accesses its lexical scope even when that function is executing outside its lexical scope