Foundations of Javascript - Scope

Scope

• The current context of execution, which values and expressions can be referenced. If they are not in the scope then it won't be available to use. Child scopes can access parent scopes, but not vice versa
• Global Scope: Default scope for all code running in script mode.

    function exampleFunction() {
        testVar = "Inside Scope of Function"
    }
    exampleFunction() //Puts testVar into Global Scope
    console.log(testVar) //"Inside Scope of Function"

• Module Scope: Scope running in module mode
• Function Scope: Scope created with a function. Variables inside of function can't be accessed outside of function.

    function exampleFunction() {
        const testVar = "Inside Scope of Function"
        console.log(testVar) //"Inside Scope of Function"
    }

    console.log(testVar) //Get error testVar undefined

Emptiness

• Undefined: Variable that has been declared but has no value.
• Undeclared: Variable that was not declared anywhere
• Declared variables are constrained in the execution context in which they are declared. Undeclared variables are always global.
• Declared variables are created before any code is executed. Undeclared variables do not exist until the code assigning to them is executed.
• Declared variables are a non-configurable property of their execution context (function or global). Undeclared variables are configurable (e.g. can be deleted).

Function Expressions

• Function keyword can be used to define a function inside of expression.
• Anonmyous Functions and Named Functions

    const clickHandler = function(){
        //Anonymous Function
    }

    const clickHandler = function handler() {
        //Named Function
    }

• Syntax of functions

    const clickHandler = function() {
        //Do stuff
    }

    const clickHandler = () => {
        //Do stuff
    }

Immediately Invoked Function Expressions

• Functions that execute as soon as it's defined.
• Used so it doesn't pollute the global namespace. Encapsulates functionality inside of the IIFE.

    const firstVar = "Initial Value"
    (() => {
        console.log("Hello")
        const firstVar = "David" //Discarded after function is executed.
    })();

    console.log(firstVar) //"Initial Value"

Block Scoping

• Using let, function, class and const prevents a variable from polluting the global namespace, so that variables inside of the block statement won't affect same named variables in global scope.

    const firstVar = "David" //Global Scope
    {//Block Scope
        const firstVar = "Tom" //Wont affect the firstVar in global scope
        console.log(firstVar) //Tom
    }
    console.log(firstVar) //David Global Scope

Closure

• "Closure is when a function remembers the variables outside of it, even if you pass the function elsewhere"
• Gives access to outer scope Variables inside of a function

//Lexical Scoping
    function init() {
        var name = "Mozilla"; // name is a local variable created by init
        function displayName() { //is the inner function, that forms the closure
            console.log(name); // use variable declared in the parent function, outer scope variable 
        }
        displayName();
    }
    init();

• Another Example

    const ask = (name) => {
        return () => {
            console.log(name)
        }
    }
    const myName = ask("David")

    myName();