Quick Notes Based On "Scope" Section of Frontend Masters' "Complete Intro to Web Development, v2"

What I did:

    function learnScopeBasics(num) {
       const sentence = 'Hey, shhh, I'm learning scope.'
       return 3 * num
    }

    console.log(learnScopeBasics(5)) // 15
    console.log(sentence) // Uncaught ReferenceError: sentence is not defined

Instead of the sentence being logged to the console, we get an error in the console: "Uncaught ReferenceError: sentence is not defined". This is because sentence in console.log(sentence) cannot "see" inside the learnScopeBasics function. In other words, the variable definition const sentence = 'Hey, shhh, I'm learning scope.' cannot be accessed from outside of the function in which that variable definition resides. If we were, however, to put console.log(sentence) inside of the function, then the sentence would get logged to the console.

And if we create an if statement inside of this function and put console.log(sentence) inside this if statement's code block, like this...

    function learnScopeBasics(num) {
       const sentence = 'Hey, shhh, I'm learning scope.'
       if (true) {
          console.log(sentence) // Hey, shhh, I'm learning scope.
       }
       return 3 * num
    }

    console.log(learnScopeBasics(5)) // 15

...then the sentence does get logged to the console. This is because, as a general rule, a variable definition in the outer scope can be accessed from an inner scope, but not vice versa.

A different example to illustrate this aspect of scope:

    let peopleAtTheParty = 0
    for (let i = 0; i <= 10; i++) {
       peopleAtTheParty++
    }

    console.log(i) // Uncaught ReferenceError: i is not defined

"Uncaught ReferenceError: i is not defined" is logged because console.log(i) is in the outer scope and is trying to access what's in the inner scope.

What I learned:

• I learned that the below code logs what it logs. The first console.log() line I understood. Same with the second. But the third I did not.

    let globalVar

    function addFive(number) {
       globalVar = 'changed'
       return number + 5
    }

    console.log(globalVar) // undefined
    console.log(addFive(10)) // 15
    console.log(globalVar) // changed

What I still might not understand:

• What I described just above, under "What I learned:".

    - An explanation from a mentor:

The first console.log statement: A global variable, globalVar, is declared, but not initialized. So it exists for reference anywhere in the script, and it doesn't have a value yet, thus it is 'undefined'.

The second console.log statement: This runs the function:

Inside the function, the existing global variable, globalVar, is mutated such that its value is now 'changed'.

There is no let, var, or const keyword in front of globalVar inside the function. Therefore, it is referencing the one declared in the global scope.

The third console.log statement: By the time this is run, globalVar's value has been changed to 'changed' due to the calling of addFive.