👉 List of all notes for this book. IMPORTANT UPDATE November 18, 2024: I've stopped taking detailed notes from the book and now only highlight and annotate directly in the PDF files/book. With so many books to read, I don't have time to type everything. In the future, if I make notes while reading a book, they'll contain only the most notable points (for me).

Chap 1 — What’s the Scope?

• How does JS know which variables are accessible by any given statement, and how does it handle two variables of the same name? ← Answer: Scope
• First step: How the JS engine processes our program before it runs.

About This Book

• Focus: the scope system and its function closures + the power of the module design pattern.
• Closure: JS functions can be assigned and passed like numbers or strings. They can maintain the original scope of their variables no matter where the functions are executed.
• Module: a code organization pattern characterized by public methods that have access to hidden variables/functions in the scope of the module.

Compiled vs. Interpreted

Compiled vs. Interpreted Code

• Code compilation: a set of steps that process your code and turn it into a list of instructions the computer can understand. The whole source code is transform at once.
• Interpretation: It transform your code into machine-understandable instructions but with a different processing model. The source code is transformed line by line.
• Modern JS engines actually employ numerous variations of both compilation and interpretation in the handling of JS programs.
• JS is most accurately portrayed as a compiled language.

Compiling Code

• In classic compiler theory, a program is processed by a compiler in three basic stages:
  1. Tokenizing/Lexing: var a = 2; will be tokenized as var, a, =, 2 and ;.
  2. Parsing: convert array of tokens into Abstract Syntax Tree (AST) (a tree of nested elements). var a = 2 may start with a top-level node called VaraibleDeclaration, with a child node called Identifier (a),…
  3. Code Generation: convert AST to executable code.
• The JS engine is vastly more complex than just these three stages. There are steps to optimize the performance of the execution.
• Required: Two phases → parsing/compilation first, then execution. To prove this, there are 3 characteristics:

  • Syntax Errors from the Start: How JS knows ."Hi" without printing “greeting”? ← It reads whole code first!

    var greeting = "Hello";
    console.log(greeting);
    
    greeting = ."Hi"; // SyntaxError: unexpected token .
    

  • Early Errors: How JS know duplicated parameters “greeting” (becauase of "use strict") without printing “Howdy”? ← It reads the whole code first!

    console.log("Howdy");
    
    saySomething("Hello","Hi");
    // Uncaught SyntaxError: Duplicate parameter name not 
    // allowed in this context
    
    function saySomething(greeting, greeting) {
    	"use strict";
    	console.log(greeting);
    }
    

  • Hoisting: How JS know “greeting” is a block-scoped variable whereas there is var greeting...? ← It reads the whole code first!

    Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. Ref.

    function saySomething() {
    	var greeting = "Hello";
    	{
    		greeting = "Howdy"; // error comes from here
    		let greeting = "Hi"; // defines block-scoped variable "greeting"
    		console.log(greeting);
    	}	
    }
    saySomething();
    // ReferenceError: Cannot access 'greeting' before initialization
    

Compiler Speak

• How the JS engine identifies variables and determines the scopes of a program as it is compiled?