<aside> ⚠️ I’m still reading…

</aside>

<aside> ⚠️ This note serves as a reminder of the book's content, including additional research on the mentioned topics. It is not a substitute for the book. Most images are sourced from the book or referenced.

</aside>

<aside> 🚨 I've noticed that taking notes on this site while reading the book significantly extends the time it takes to finish the series. I've stopped noting everything, as in previous chapters, and instead continue reading by highlighting or hand-writing notes and use . I plan to return to this series when I have more time.

</aside>

All notes in this series

Infor & Preface

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