<commit_before>![General Assembly Logo](http://i.imgur.com/ke8USTq.png)

# Javascript Scope

## Objectives

By the end of this, students should be able to:

- Draw a diagram representing variable scope.
- Create a list that explains runtime behavior. 
- Create a program that hoists variables.


## Compilation

The code that you write **MUST** be translated into a form that the computer can understand.

Source code is human readable, *we hope*. This source code may be translated into a set of 1's and 0's that a computer's CPU can understand. Yep, the CPU is a chip on the computer that does all the processing, hey there is a reason it's called the Central Processing Unit(CPU).

`Source Code`  ==>  `1's and 0's`

Or, the source code may be translated into a another type of langauge, byte code, that can be understood by a Virtual Machine(VM).

`Source Code` ==> `byte code`

### Compiled Languages

Some languages are *explicitly* compiled. Another words,the programmer must run command to invoke compilation. 

For example, the **C** and **C++** languages are explicity compiled. The programmer must run a command like:

`gcc -o hello_world -c hello_world.c` 

To translate the C code in the hello_world.c file into an *executable* or *binary* file that contains the 1's and 0's understood by the CPU. 

*gcc* is a **C** compiler.

`Source Code`  ==>  `1's and 0's`

`hello_world.c`  ==>  `hello_world`

### Interpreted Languages
Some languages do **not** require the programmer to explicitly run a compiler. **Javascript**, **Java**, **Ruby** are a couple of intepreted languages. 

Don't get me wrong, there is still compilation being down but it's done automatically. 

`Source Code` ==> `byte code`

## From Source to Running Code.
There are two basic phases to go through when going from code in a file to a program running.

- Compile Time.  
 is a phase when the source code is translated to another form. 
 
 For example, when we run a javascript program we will compile javascript to an intermediate language/bytecode that the Javscript Virtual Machine(VM) understands.
- Runtime.  
	is the phase when the computer actually runs each statement in the program.  
	For example, this is when the computer runs the javascript program bytecode.

### Variable Scope
Is where in a program a variable can be seen. In other words, where it can be used. *We'll see more later*, but you've seen that variables declared within a function can *not* be seen or used in the Global Scope.


### Lexical Analysis

Part of the Compilation phase is Lexical Analysis. In general, Lexical Analysis scans through the source code, one character at a time, looking for language constructs like variables, functions, built-in keywords, etc.

It's during this time that the compiler builds variable scope and **declares** variable inside a variable scope.

### Summary
	
	1. Read the Source Code in a javascript file into memory.
	2. Compile the source code.  
		a. Lexical Analysis.
		b. Build Scope.
		c. Turn source code into a form understood by VM, bytecode.
	3. Execute bytecode.

## Building Scope.

Scope is built during the Lexical Analysis part of the Compilation phase. When scope is built during this phase it's called **Lexical Scope**. This is very common in many programming languages.

Let's see how it works, eh. Heres the code we'll work with.  

```javascript
var firstName = 'John'; // 1
var lastName = 'Dowd'; // 2
var age = 19; // 3

function displayPerson(fname, lname){ //4, 5
  var prefix = 'Mr'; // 6
  var fullName = null; // 6

  function getFullName(){ // 7
    var suffix = "Esq.";  // Everybody's a lawyer, eh.
    return  fullName = prefix + " " + fname + " " + lname + " " + suffix;
  };

  return getFullName();
};

function removeYears(){ // 8
  var minusYears = 10, age = 49;
  return age - minusYears;
};

console.log(displayPerson(firstName, lastName));
console.log(removeYears());

```

* Node will load this file and pass the source code on to it's Javascript VM.

* The VM will run do a Lexical Analysis of this source and build Variable Scope as follows:

    1) Found 'var firstName' variable declaration.  
    Put firstName variable in Global Scope.  
    2) Found 'var lastName' variable declaration.  
    Put lastName in Global Scope.  
    3) Found 'var age' variable declaration.  
    Put age in Global Scope.  
    4) Found 'var displayPerson' declaration.  
    Put age in displayPerson in Global Scope. 
    
    **Notice that displayPerson's value is a function. So, create a inner scope and process this function.**
    
    5) Found the fname and lname declarations.
    *Note: functions arguments behave just like local variables.*    
    Put them in the displayPerson function scope.  
    6) Found prefix, fullName variable declarations.  
    Put them in the displayPerson function scope.  
    7) Found getFullName declaration.  
    Put getFullName in the displayPerson function scope.
    
    **Notice that getFullName is a function. So, create an inner scope and  process this function.**
    **All done with getFullName function, no more variable declarations.**
    **All done with displayPerson function, no more variable declarations.**

    ![Scope](JS_Scope1.png)

    8) Found removeYears variable declaration.
    Put removeYears in Global scope.  

    **Notice that removeYears value is a function. So, create a inner scope and process this function.**

    9) Found age and minusYears variable declarations.  
    Put these in the function's scope.
    
    ![Scope](JS_Scope2.png)

## Lab.
For the following code enumerate how scope is built and draw a diagram of this scope. *As I have done above*

Work in teams.

Compare the above with another team's deliverable.

```javascript

var autoMake = "Ford";
var autoModel = "LTD";

function showAuto(year){
  function autoInfo(){
    var price = 124;
    console.log("Auto is a " + year + " " + autoMake + " " + autoModel + ", it's price is " + price + "$");
  }

  autoInfo();
};

showAuto(1969);
```

## We do

### Execute Code

```
var firstName = 'John'; // 1
var lastName = 'Dowd'; // 2
var age = 19; // 3

function displayPerson(fname, lname){ // 6, 7
  var prefix = 'Mr'; //6, 7
  var fullName = null;  //6, 7<commit_msg>Fixed up README<commit_after>![General Assembly Logo](http://i.imgur.com/ke8USTq.png)

# Javascript Scope

## Objectives

By the end of this, students should be able to:

- Draw a diagram representing variable scope.
- Create a list that explains runtime behavior. 
- Create a program that hoists variables.


## Compilation

The code that you write **MUST** be translated into a form that the computer can understand.

Source code is human readable, *we hope*. This source code may be translated into a set of 1's and 0's that a computer's CPU can understand. Yep, the CPU is a chip on the computer that does all the processing, hey there is a reason it's called the Central Processing Unit(CPU).

`Source Code`  ==>  `1's and 0's`

Or, the source code may be translated into a another type of langauge, byte code, that can be understood by a Virtual Machine(VM).

`Source Code` ==> `byte code`

### Compiled Languages

Some languages are *explicitly* compiled. Another words,the programmer must run command to invoke compilation. 

For example, the **C** and **C++** languages are explicity compiled. The programmer must run a command like:

`gcc -o hello_world -c hello_world.c` 

To translate the C code in the hello_world.c file into an *executable* or *binary* file that contains the 1's and 0's understood by the CPU. 

*gcc* is a **C** compiler.

`Source Code`  ==>  `1's and 0's`

`hello_world.c`  ==>  `hello_world`

### Interpreted Languages
Some languages do **not** require the programmer to explicitly run a compiler. **Javascript**, **Java**, **Ruby** are a couple of intepreted languages. 

Don't get me wrong, there is still compilation being down but it's done automatically. 

`Source Code` ==> `byte code`

## From Source to Running Code.
There are two basic phases to go through when going from code in a file to a program running.

- Compile Time.  
 is a phase when the source code is translated to another form. 
 
 For example, when we run a javascript program we will compile javascript to an intermediate language/bytecode that the Javscript Virtual Machine(VM) understands.
- Runtime.  
	is the phase when the computer actually runs each statement in the program.  
	For example, this is when the computer runs the javascript program bytecode.

### Variable Scope
Is where in a program a variable can be seen. In other words, where it can be used. *We'll see more later*, but you've seen that variables declared within a function can *not* be seen or used in the Global Scope.


### Lexical Analysis

Part of the Compilation phase is Lexical Analysis. In general, Lexical Analysis scans through the source code, one character at a time, looking for language constructs like variables, functions, built-in keywords, etc.

It's during this time that the compiler builds variable scope and **declares** variable inside a variable scope.

### Summary
	
	1. Read the Source Code in a javascript file into memory.
	2. Compile the source code.  
		a. Lexical Analysis.
		b. Build Scope.
		c. Turn source code into a form understood by VM, bytecode.
	3. Execute bytecode.

## Building Scope.

Scope is built during the Lexical Analysis part of the Compilation phase. When scope is built during this phase it's called **Lexical Scope**. This is very common in many programming languages.

Let's see how it works, eh. Heres the code we'll work with.  

```javascript
var firstName = 'John'; // 1
var lastName = 'Dowd'; // 2
var age = 19; // 3

function displayPerson(fname, lname){ //4, 5
  var prefix = 'Mr'; // 6
  var fullName = null; // 6

  function getFullName(){ // 7
    var suffix = "Esq.";  // Everybody's a lawyer, eh.
    return  fullName = prefix + " " + fname + " " + lname + " " + suffix;
  };

  return getFullName();
};

function removeYears(){ // 8
  var minusYears = 10, age = 49;
  return age - minusYears;
};

console.log(displayPerson(firstName, lastName));
console.log(removeYears());

```

* Node will load this file and pass the source code on to it's Javascript VM.

* The VM will run do a Lexical Analysis of this source and build Variable Scope as follows:

    1) Found 'var firstName' variable declaration.  
    Put firstName variable in Global Scope.  
    2) Found 'var lastName' variable declaration.  
    Put lastName in Global Scope.  
    3) Found 'var age' variable declaration.  
    Put age in Global Scope.  
    4) Found 'var displayPerson' declaration.  
    Put age in displayPerson in Global Scope. 
    
    **Notice that displayPerson's value is a function. So, create a inner scope and process this function.**
    
    5) Found the fname and lname declarations.
    *Note: functions arguments behave just like local variables.*    
    Put them in the displayPerson function scope.  
    6) Found prefix, fullName variable declarations.  
    Put them in the displayPerson function scope.  
    7) Found getFullName declaration.  
    Put getFullName in the displayPerson function scope.
    
    **Notice that getFullName is a function. So, create an inner scope and  process this function.**
    **All done with getFullName function, no more variable declarations.**
    **All done with displayPerson function, no more variable declarations.**

    ![Scope](JS_Scope1.png)

    8) Found removeYears variable declaration.
    Put removeYears in Global scope.  

    **Notice that removeYears value is a function. So, create a inner scope and process this function.**

    9) Found age and minusYears variable declarations.  
    Put these in the function's scope.
    
    ![Scope](JS_Scope2.png)

## Lab.
For the following code enumerate how scope is built and draw a diagram of this scope. *As I have done above*

Work in teams.

Compare the above with another team's deliverable.

```javascript

var autoMake = "Ford";
var autoModel = "LTD";

function showAuto(year){
  function autoInfo(){
    var price = 124;
    console.log("Auto is a " + year + " " + autoMake + " " + autoModel + ", it's price is " + price + "$");
  }

  autoInfo();
};

showAuto(1969);
```

## Lab

### Execute Code

```
var firstName = 'John'; // 1
var lastName = 'Dowd'; // 2
var age = 19; // 3

function displayPerson(fname, lname){ // 6, 7
  var prefix = 'Mr'; //6, 7
  var fullName = null;  //6, 7
{'fraction_non_alphanumeric': 0.08692172242676485, 'fraction_numerical': 0.00896430286537538, 'mean_word_length': 3.4656897784131524, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5638539', 'n_tokens_mistral': 3697, 'n_tokens_neox': 3436, 'n_words': 1748}