Note: Eloquent JavaScript was recommended to me by Leon from #100Devs. While I’ve been participating in a JavaScript study using The Modern JavaScript Tutorial, I had an itch to also read Eloquent JavaScript as a refresher.

Eloquent JavaScript TIL - Chapter 2 to 3.

Chapter 2 - Program Structure

• Expressions vs. statements

Expression vs. statement always confuses me so I took it upon myself to refer to Josh Comeau’s post on the difference between statements and expressions.

• Expression: any code that produces a value

// Examples of expressions:

1
true
"hello"
10 > 20 // produces false
name ? 'anonymous' : 'boyeon'

• Statement: an instruction for JavaScript to do something

// examples of statements 
const name = 'boyeon' // this is instructing the program to create a variable and assign it a string value

if (name) { // this is telling the program to do something if the name value exists 
//...
}

• Josh recommends console.log() a particular code to see if it is a expression or not. If it is an expression, it should log on the console (unless it is invalid JS).
• Per Josh, expressions cannot stand on its own - they are always part of a statement. Sometimes a statement’s only substance if an expression slot.
• tl;dr - a statement can wrap around an expression without anything else. But it is inaccurate to call an expression a statement.

Control flow

• Programs can be configured to run in a certain direction or way, depending on the statements.
• Usually a program runs from top to bottom in order
• They can also branch off using conditional statements
• Difference between do... while and while loop - do... while is guaranteed to run at least once (because it does the condition check after the do block code has run).
• Indentation is not required - it’s more for our readability

Chapter 3 - Functions

• Some functions produce a value, and some only result in a side effect (e.g. running a console.log(), displaying alert window, etc).
• A function without a return statement (or a return statement without a value after it) will have undefined value.
• each function has its own scope - therefore, variables declared inside it will not be accessible globally.
• Scope: the area where a variable or function is accessible to other code.
• Function binding - the variable name that refers to the piece of code (function)
• Function value: the actual content and behavior of the function itself
• Call stack: computer stores the context of the program running: when a function is called, a new context of that function is stacked on top of the stack. Once the function finishes running, it is removed from the call stack and the previous context is now on top.
• You can pass more than the required number of arguments to the function - it just gets ignored.

Closure

• local variables/bindings within a function are re-created every time a function is called.
• closure: “being able to reference a specific instance of a local binding in an enclosing scope”.
• In other words, closure is a combination of a function bundled together (e.g. a function that is embedded in the return statement of another function) that has references to its lexical environment
• Closure allows the inner function to access the outer function’s scope.

// Code from MDN's Closure

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

• Upon the creation of function displayName, it has access to init function’s local variable such as Mozilla and will have access to it when it actually runs upon the call of init() at the bottom of the code.