Quick Notes Based On "Scope" Section of Frontend Masters' "Complete Intro to Web Development, v2"
Tags: javascript, fundamentals, scope, frontendmasters
Published: 2021-08-13 02:53:39

What I did:

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

&nbsp;&nbsp;&nbsp; `console.log(learnScopeBasics(5))` // 15
&nbsp;&nbsp;&nbsp; `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...

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

&nbsp;&nbsp;&nbsp; `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:

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

&nbsp;&nbsp;&nbsp; `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.

&nbsp;&nbsp;&nbsp; `let globalVar`

&nbsp;&nbsp;&nbsp; `function addFive(number) {`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `globalVar = 'changed'`
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `return number + 5`
&nbsp;&nbsp;&nbsp; `}`

&nbsp;&nbsp;&nbsp; `console.log(globalVar)` // undefined
&nbsp;&nbsp;&nbsp; `console.log(addFive(10))` // 15
&nbsp;&nbsp;&nbsp; `console.log(globalVar)` // changed

What I still might not understand:
- What I described just above, under "What I learned:".

&nbsp;&nbsp;&nbsp; - 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`.