JavaScript: Execution Context and Lexical Scope
Tags: javascript, beginners, webdev, learning
Published: 2020-04-24 20:50:45

---
title: JavaScript: Execution Context and Lexical Scope
published: true
description: When I can't fully explain something I try to go back and understand it better and often create notes. These are my notes from trying to further explain both JavaScript's execution context and lexical scope.
tags: #javascript #beginner #webdev #learning
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fljet8d7uak9nq89kdhl.jpg
---
When I can't fully explain something I try to go back and understand it better and often create notes. These are my notes from trying to further explain both JavaScript's execution context and lexical scope.


## Global Execution Context

When your code initially runs, JavaScript creates what is called a Global Execution Context. 

This context gives us access to two things right off the bat. 
- First is the global `this`
- Second is a global object. In the browser this global object is the window.

![Example of global this and global window object in JavaScript](https://dev-to-uploads.s3.amazonaws.com/i/afma8p6omy3eju8aw3hd.png)

In the above image I have opened a web page that only has html. There is a single paragraph element. 
Yet, in the console I can type in both this and window and see that they are available to me. 
The other thing to note is that currently they are the same thing. 

`this === window`

### Global Variables

In JavaScript(JS), if we create a variable like `var aNewVariable = "Hello world"`

this variable will now be globally available. 
Let's look at the variable in the console. 

Inside my JS panel I add the new variable.

![Adding a variable to my JavaScript called aNewVariable](https://dev-to-uploads.s3.amazonaws.com/i/4hg8ha7xe8m1673tkiup.png)

In the console I can call that variable by its name or with the global window object. 
If we type in window and open that up we will also see our new variable. 

![calling a variable by its name and with the global window object](https://dev-to-uploads.s3.amazonaws.com/i/vdjc8d5g4d6zsyfkm4ly.png)

{% codepen https://codepen.io/cgorton/pen/KKdWqQE default-tab=js,result %}

We are now getting in to what is referred as the Lexical Environment or Lexical Scope. 

### Lexical Environment
Right now our variable is `scoped` to the global window object. If we created extra functions or variables those would also be `scoped` to our global object. 

The lexical scope refers to where the code is written. 

Let's look at an example of where a function would not be globally scoped. 

I've created a silly function called `myName()` that returns another function called `firstName()`. If I were to go to the console and type firstName() what do you think would happen?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8labwkxtlombxxc1vczr.png)

We get `undefined.`

This function is `scoped` to the `myName()` function and is not available on the global object.

`myName()` is available on the global window object and when we type in `myName()` we now can see our firstName function and what `myName` returns. 
![Viewing our scoped function by looking at our global function myName](https://dev-to-uploads.s3.amazonaws.com/i/bmi5sf7wga2fle64ve89.png)

In this case `firstName` is executed inside our `myName` function and returns "Christina" .

{% codepen https://codepen.io/cgorton/pen/abvJGpw default-tab=js,result %}

More on `function execution context` in a bit.

### Hoisting

>"Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution." - [Mabishi Wakio](https://scotch.io/tutorials/understanding-hoisting-in-javascript)

If you have a variable declared with `var` or a `function` declaration, JavaScript will `hoist` it or allocate memory for it after the first run through of your code. 

So if your code looked something like this:

```jsx
console.log(perfectMatch)
austenCharacter();

var perfectMatch = "Willoughby"

function austenCharacter() {
  console.log("Colonel Brandon")
}
```

What would you expect to see in the console?

In the console we get `undefined` and `Colonel Brandon`.

What is going on here?

When the JS engine had a first pass at our code it looked for all of the `var` variables and functions and allocated memory to them. 

So in the case of `perfectMatch` when the code runs the first time it stores our variable `perfectMatch` as undefined. We do not actually define the variable until later on in the code but we do store the actual variable in memory. 

Our function is also `hoisted` or stored in memory but because it is a complete function we can execute the code inside even if `austenCharacter();` is called before the function is defined in our code. 

Because it has been `hoisted` JavaScript has kept this function in memory and wherever we then place the function call `austenCharacter();` no longer matters. 

## Local execution context

Another type of execution context happens within functions. 

When a function is called a new execution context is created.

Below is a common Javascript interview question surrounding local execution context. 

After looking at scope and hoisting a bit what do you think will happen when this code is run?

```jsx
var perfectMatch = "Willoughby"

var newMatch = function () {
  console.log(perfectMatch + " is the perfect match") // what do we expect?
  
  var perfectMatch = "Colonel Brandon"
  
  console.log(perfectMatch + " is the perfect match") // what do we expect?
};

newMatch()
```

You might expect the first console.log to be "Willoughby is the perfect match" and the second to be "Colonel Brandon is the perfect match". 

What we actually get is similar to what happened in our previous example. 

First we get undefined and then we get 

`"Colonel Brandon is the perfect match".`

{% codepen https://codepen.io/cgorton/pen/OJypOoE default-tab=js,result %}

When our function is called it is looking inside itself for its variables. 

A new execution context, in this case a function or local execution context, executed. 

So within the function JavaScript looks for the `var` variables and then runs the console.logs.

It allocates perfectMatch to undefined initially so when we run the first 
`console.log(perfectMatch + " is the perfect match")`

it returns `undefined`. 

We then define it with `var perfectMatch = "Colonel Brandon"`

And can then see "Colonel Brandon is the perfect match" with the second console.log.

Our code:

```jsx
var newMatch = function () {
  console.log(perfectMatch + " is the perfect match") // what do we expect?
  
  var perfectMatch = "Colonel Brandon"
  
  console.log(perfectMatch + " is the perfect match") // what do we expect?
};
```

A representation of our code after hoisting:

```jsx
var newMatch = function () {
  var perfectMatch = undefined // our hoisted variable
  console.log(perfectMatch + " is the perfect match") // So now this console.log is undefined
  
  var perfectMatch = "Colonel Brandon" // we now define our variable as "Colonel Brandon"
  
  console.log(perfectMatch + " is the perfect match")
// Now we can console.log our newly defined variable: 
// "Colonel Brandon is the perfect match"
};
```