My Raw Notes for the Week of 8-9-2021
Tags: javascript, fundamentals, frontendmasters, notes
Published: 2021-08-15 19:16:49

ENGLISH:

The "Holy Grail" is to make your code "self-describing", meaning that it reads like it executes. Be deliberate. Be explicit. You still need comments (so that a week later or three years later you remember what your code is doing), but you'll need fewer comments this way, and your code will just be better. We're writing code so that we can *maintain it in the future*, because this is what you'll spend much of your time doing. And don't overdo comments.

Naming JS variables is hard. Take the time to name semantically (appropriately). Name things based on what the named thing *does*.

JS is a "single-threaded" language, meaning it can only do one thing at a time; it can't do things concurrently, like in languages like Java. It can do things out of order, but still only one at a time.

Experimenting in the console is what's called using the console as a repl ("read-evaluate-print-loop").

The official name for an "if statement" is a Control Flow, but using "if statement" is fine.
The code inside the parentheses is called the "condition".
The code inside the curly braces is called a code "block".

Holt says always use === instead of == because then you know exactly what you're dealing with (given that == coerces and === does not). Using === instead of == will save you many hours over the long run.

A VS Code thing: There's a VS Code extension called "Prettier" that inserts semicolons right where they should be. He says it really doesn't matter if you have semicolons, but it's good to know of this option if you get in the habit of not putting them in (which is the case for me at this point) and you end up working at a place that wants them in.

Why not just use 'let' all the time and never use 'const'? This is a legitimate question and some programmers do actually do this. But Holt likes to abide by The Principle of Least Power, so he uses 'const' when appropriate.

Holt actually uses 'while' loops weekly and 'for' loops daily. He never uses or even sees 'do' loops (which he says are just like 'while' loops except they run once before asking the question, whereas 'while' loops don't). He also says 'while' loops function very similarly to 'if statements'.

For a 'for' loop: 'let i = 0' is the Control Variable, 'i <= 10' is the Condition, and 'i++' is what it's going to do at the END of each loop.

Generally it's a good idea (it's a good habit to form) to make function names *verbs*, because functions *do* something.

Generally try not to put anything in the global scope. Keep the global scope "unpolluted". The global scope is very powerful. So The Principle of Least Power referenced further above also applies here.


CODE:

```javascript
const monthlyRent = 500

const yearlyRent = monthlyRent * 12
console.log(yearlyRent) // 6000

//-------------------------------------------------------------------

const myFirstName = 'Ben'
const myLastName = 'Boorstein'

const sentenceOldWay = 'Hi, ' + myFirstName + ' ' + myLastName + ', ' + 'how are you?'
const sentenceNewWay = `Hi, ${myFirstName} ${myLastName}, how are you?`

console.log(sentenceOldWay) // Hi, Ben Boorstein, how are you?
console.log(sentenceNewWay) // Hi, Ben Boorstein, how are you?

//-------------------------------------------------------------------

const tempToday = 86

if (tempToday < 55) {
    console.log('Make it warmer, please!')
} else if (tempToday <= 100) {
    console.log('Yes, this is in my happy temperature range!')
} else {
    console.log('I like it hot, but this may actually be TOO hot!')
}

//-------------------------------------------------------------------

let brownieSundaes = 8
while (brownieSundaes > 0) {
    brownieSundaes--
    console.log("I'm in hedonist heaven") // I'm in hedonist heaven (logs 8 times)
}

let chocolateCreamPieSlices = 0
for (let i = 0; i < 8; i++) {
    chocolateCreamPieSlices++
    console.log("I'll be full once I've eaten eight") // I'll be full once I've eaten eight (logs 8 times)
}

console.log(4 ** 3) // 64

//-------------------------------------------------------------------

const character = 'a'
const timesRepeated = 50
let answer = ''

for (let i = 0; i < timesRepeated; i++) {
    answer += character
}

console.log(answer) // aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
console.log(answer.length) // 50

//-------------------------------------------------------------------

function add2() {
    return 5 + 2
}

console.log(add2()) // 7


function addTwo(num) {
    return num + 2
}

console.log(addTwo(5)) // 7


const birthCity = "Ann Arbor"
const birthState = "Michigan"
const birthCountry = "USA"

function logBirthPlace(city, state, country) {
    console.log(`You were born in ${city}, ${state}, ${country}.`)
}

console.log(logBirthPlace(birthCity, birthState, birthCountry)) // You were born in Ann Arbor, Michigan, USA.

//-------------------------------------------------------------------

function learnScopeBasics(num) {
    const sentence = "Hey, leave me alone, I'm trying to learn this thing right now."
    return 3 * num
}
console.log(learnScopeBasics(5)) // 15
console.log(sentence) // Uncaught ReferenceError: sentence is not defined

function learnScopeBasics(num) {
    const sentence = "Hey, leave me alone, I'm trying to learn this thing right now."
    if (true) {
        console.log(sentence) // Hey, leave me alone, I'm trying to learn this thing right now.
    }
    return 3 * num
}
console.log(learnScopeBasics(5)) // 15

let peopleAtTheParty = 0
for (let i = 0; i <= 10; i++) {
    peopleAtTheParty++
}
console.log(i) // Uncaught ReferenceError: i is not defined

let globalVar
function addFive(number) {
    globalVar = 'changed'
    return number + 5
}
console.log(globalVar) // undefined
console.log(addFive(10)) // 15
console.log(globalVar) // changed

//------------------------------------------------------------------

// Holt said whether each console.log 'works' or 'doesn't work" but didn't say what it logs. The comments below are correct (I discussed with Robert).
// Note that the four heavily indented lines are placed there ONLY so that the rest of the program can run so that I can see what's logged. If they weren't there then the error in the line right below each heavily indented line would stop the program from running. 
const A = "A";
let F;

function doStuff(B) {
  console.log(B); // 'B' (because of the function being called further down)
  const C = "C";
  let H = "H";
  if (1 + 1 === 2) {
    const D = "D";
    H = "something else";
  }
          const D = 'DDD'
  console.log(D); // error: undefined (assuming the heavily indented line just above weren't there)
  console.log(H); // 'something else' (not 'H', because the variable H is declared above/outside the if statement and mutated in the if statement...If the variable were declared in the if statement, this console.log statement would behave differently)
  F = "F"; // note, just for vocab, that this is a "side effect" of the doStuff function because F is not an input (parameter/argument) in the doStuff function
}

let E = 0;
while (E < 3) {
  E++;
  console.log(A); // 'A' 'A' 'A' (by the way this is the FIRST console.log statement run in this program)
  const G = "G";
}
console.log(E); // 3 (by the way this is the SECOND console.log statement run in this program)
        const G = 'GGG'
console.log(G); // error: undefined (assuming the heavily indented line just above weren't there) (this is the first error the program gets to and any error stops the program, so nothing below here runs...AND remember that the function -- which gets stored, but not called, when the program first starts -- doesn't run either, because the error occurs before the function call)

doStuff("B"); // runs the function
        const B = 'BBB'
console.log(B); // error: undefined (assuming the heavily indented line just above weren't there)
        const C = 'CCC'
console.log(C); // error: undefined (assuming the heavily indented line just above weren't there)
console.log(F); // 'F' (this would log 'undefined' except that it's after/below the 'doStuff' function call, and in 'doStuff' the variable F is given the value of 'F'...therefore, this line logs 'F')

//-------------------------------------------------------------------

console.log('BEn BoOrstEiN'.toLowerCase()) // ben boorstein
console.log('BEn BoOrstEiN'.toUpperCase()) // BEN BOORSTEIN

console.log(Math.round(5.5)) // 6
console.log(Math.floor(5.999)) // 5
console.log(Math.ceil(5.1)) // 6

console.log('Ben Boorstein'.substr(4, 5)) // Boors
console.log('Ben Boorstein'.substr(2, 4)) // n Bo
console.log('Ben Boorstein'.substr(6)) // orstein

//-------------------------------------------------------------------

person = {
  firstName: 'Benjamin',
  lastName: 'Boorstein',
  nickname: 'Ben',
  state: 'SC',
  country: 'USA',
  favoriteNumber: 8,
  favoriteDessert: 'The Franklin Fountain\'s Mt. Vesuvius',
  favoriteThingMomMade: 'Potato latkes'
}
console.log(person) // the whole `person` object
console.log(person.state) // SC
console.log(person['state']) // SC

people = {
  person1: {
    firstName: 'Jim',
    lastName: 'Beam'
  },
  person2: {
    firstName: 'Michael',
    lastName: 'Jordan',
    knownAs: 'Jordan',
    greatDefenderToo: true,
    basketballJerseyNumbers: [23, 45, 12],
    baseballJerseyNumber: 45,
    theBest() {
      return 'Jordan is the best.'
    }
  },
  person3: {
    firstName: 'Dave',
    lastName: 'Weckl'
  }
}
console.log(people) // the whole `people` object
console.log(people.person2) // the whole `person2` object
console.log(people.person2.theBest()) // Jordan is the best.
console.log(people.person3.lastName) // Weckl
```