Javascript the Hard Parts

Closures, Scope, and Execution Context

A scope in Javascript

A set of all objects, variables, and functions that you have access to.

Scopes are defined by functions

For Instance

var firstName = "Will";

function addLastName() {
    var lastName = "Gottschalk";
    return firstName + " " + lastName;
}

var fullName = addLastName();

console.log(fullName) // Will Gottschalk

var firstName = "Will";

function addLastName() {
    var lastName = "Gottschalk";
    return firstName + " " + lastName;
}

var fullName = addLastName();

console.log(fullName);

What's going on under the hood?

Python Tutor

Lets Refactor

var firstName = "Will";

function addLastName() {
    var lastName = "Gottschalk";
    return firstName + " " + lastName;
}

var fullName = addLastName();

console.log(fullName);

var firstName = "Will";

function addLastName(first) {
    var lastName = "Gottschalk";
    return first + " " + lastName;
}

var fullName = addLastName(firstName);
var anotherName = addLastName("Adam")

console.log(fullName);
console.log(anotherName);

Another Example of Scope

var firstName = "Will";

function addLastName() {
    var lastName = "Gottschalk";
    return firstName + " " + lastName;
}

console.log(firstName + lastName);

Funception

A function inside of a function

var number = 5;
function double(num) {
    function add() {
        return num + num;
    }
    var output = add();
    return output;
}

var ans = double(number);
console.log(ans);

Refactor

var number = 5;
function double(num) {
    function add(n) {
        return n + n;
    }
    var output = add(num);
    return output;
}

var ans = double(number);
console.log(ans);

Pair up

Answer these:

• 1. I know what a variable is
• 2. I know what an object is (in programming)
• 3. I've created a function before
• 4. I've added a CSS style before
• 5. I understand 'callback functions'
• 6. I've built a project in React or Angular
• 7. I've coded a project and put it online

Where we left off

var number = 5;
function double(num) {
    function add(n) {
        return n + n;
    }
    var output = add(num);
    return output;
}

var ans = double(number);
console.log(ans);

What if we want to return a function instead of an output?

Where we left off

var number = 5;
function double() {
    function add(n) {
        return n + n;
    }
    return add;
}

var returnedFunction = double();
var ans = returnedFunction(number)
console.log(ans); // 10

​

What if we want to return a function instead of an output?

The Closure

The variables you have access to are determined by where you define your function, not where you execute you function

The Closure

function initializeCount() {
    var count = 0;
    function incrementCount() {
        count += 1;
        console.log(count)
    }
    return incrementCount;
}
var countA = initializeCount();

var countB = initializeCount();

countA(); // 1

countA(); // 2

countB(); // 1

The Closure

Each time you run a function that creates a closure, a brand new block of memory is created