Reading: YDKJSY 1 - Getting Start draft

Last modified 5 months ago / Edit on Github
draft
This is a draft, the content is not complete and of poor quality!

Note: This note is for those who have already read the book. The book is really compact, this note cannot replace it (and I do not want to). The book is not short, neither is this note!

👉 My github repository.
👉 Other notes in this book series.

Infor & Preface

  • Full name: You Don't Know JS Yet (2nd edition)
  • Author: Kyle Simpson
  • getify/You-Dont-Know-JS on Github
  • It's not just for starters, but for all developers who want to understand deeper.
  • "The primary point of the title “You Don’t Know JS Yet” is to point out that most JS developers don’t take the time to really understand how the code that they write works."
  • "My suggestion is you take your time going through YDKJSY. Take one chapter, read it completely through start to finish, and then go back and re-read it section by section. Stop in between each section, and practice the code or ideas from that section. For larger concepts, it probably is a good idea to expect to spend several days digesting, re-reading, practicing, then digesting some more."

Chap 1 — What is JS?[^1]

What's With That Name?

  • Not related with Java at all, not just a script but a programming language.
  • "Java" → attract mostlty Java programmers, "Script" → lighweight.
  • Official name specified by TC39 as "ECMAScript" (ES).
  • JS in browsers or Node.js is an implementation of ES2019 standard.
  • Hosted by ECMA.
  • Don't use "JS6" or "ES8", use "ES20xx" or "JS".

Language Specification

  • Who decides a new version of JS? → TC39 (~50-100 members) by votes via 5 stages.
  • There is just one JS in the wild (not multiple versions).
  • Environments run JS: browsers, servers, robots, lightbulbs,....
  • Not all are JS, eg. alert("Hello, JS!") or console.log() ← they're just APIs of JS environments.
    • There are many "JS-looking" APIs: fetch(), getCurrentLocation(), getUserMedia(),...
    • They follow JS rules but just "guests", not official JS specifications.
  • Complain "JS is so inconsistent!" ← it's because the environment hehaviors work, not because of JS itself!
  • Developer Tools (Inspect Element in Chrome, for example) are... tools for developers. They're NOT JS environment!
    • Something works in Dev Tool, doesn't mean JS compiler will understand it.

Many Faces

  • Paradigm-level code categories
    • Procedural: organizes codes in a top-down, linear progression. ← eg. C
    • Object-oriented (OO/classes): organizes codes into classes. ← eg. Java/C++
    • Functional (FP): organizes codes into functions. ← eg. Haskell
    • JS is a multi-paradigm language. => "meaning the syntax and capabilities allow a developer to mix and match (and bend and reshape!) concepts from various major paradigms"

Backwards & Forwards

  • Backwards compatibility:

    • Code from the past should still work today — "we don't break the web" (TC39)
    • Idea: JS developer can write code with confidence → their code won't stop working in new released versions.
    • Once it’s in JS, it can’t be taken out because it might break programs, even if we’d
      really, really like to remove it!
    • My idea to remember: old codes work with new engines but old engines may not work with old codes.
  • Forward compatibility:

    • Code from future don't break the web today.
    • CSS & HTML is forward, not backward!
    • Codes from the past may not work / work the same today.
    • Feature from 2019 in a browser 2010 => page isn't broken! Unrecognized things will be skipped!
    • My idea to remember: old engines work with new code but old codes may not work with new engine.
  • JS is backwards compatibility + not forward compability

    • Codes written today, will work in future JS engines.
    • Codes written today may be broken in old JS engines.
  • Why?

    • "Markup" (HTML) / "Styling" (CSS) languages => easier to "skip over".
    • "Programming language" (JS) => cannot skip something it doesn't understand (the rest may be effected!)
  • Fill the gaps?

    • JS has "forward-compability problems" (FC) (not compatible with old engines)

    • How today codes can be used in an old engine? => use transpiling (using a tool to convert a source code of a program from one form to another)

    • FC problems related syntax => use a transpiler (eg. Babel) -- convert "new" JS syntax to "older" syntax.

      // New
      if (something) {
      let x = 3; // "let" was added in ES6 (2015)
      console.log(x);
      } else {
      let x = 4; // "let" => block scope
      console.log(x);
      }
      // Old
      var x$0, x$1; // different variables
      if (something) {
      x$0 = 3; // diferent variables
      console.log(x$0);
      } else {
      x$1 = 4;
      console.log(x$1);
      }
    • "It’s strongly recommended that developers use the latest version of JS so that their code is clean and communicates its ideas most effectively." <= Let the tools take care of converting.

    • FC problems related to missing API method => use polyfill (aka "shim"). <= Normally, a transpiler like Babel will detect and add it automatically.

      // NEW: .finally() <= ES2019
      // getSomeRecords() returns us a promise for some // data it will fetch
      var pr = getSomeRecords();
      // show the UI spinner while we get the data
      startSpinner();
      pr.then(renderRecords) // render if successful
      .catch(showError) // show an error if not
      .finally(hideSpinner) // always hide the spinner
      // OLD:
      if (!Promise.prototype.finally) { // prevents running on engines already has this API
      Promise.prototype.finally = function f(fn){ // define new for old engines
      return this.then(
      function t(v){
      return Promise.resolve( fn() )
      .then(function t(){
      return v; });
      }, function c(e){}
      );
      };
      }

What's in an Interpretation?

img
Source of the image.

  • To clearify JS is interpreted or compiled => see how errors are handled.

  • Historically, scripted/interpreted languages were executed a top-down, line-by-line

    image-20211030214022778
    Interpreted./Scripted Execution. Lines 1-4 must be executed before finding an error in line 5.

  • Parsing whole process before any execution,

    image-20211030214228849
    Parsing + Compilation + Execution. An error in line 5 would be caught in parsing phase before any execution.

  • "Parsed" language 🤝 "compiled" language: All compiled are parsed.

  • JS code is parsed before it's executed. => "early errors" => JS is a parsed language

  • JS is closer to compiled than interpreted (but not clearly a compiled or clearly a interpreted) => "meaning the tools (including the JS engine) process and verify a program (reporting any errors!) before it executes."

  • Flow of a JS source program:

    image-20211030215050566
    Parsing, Compiling, and Executing JS.

    1. Program leaves IDE => transpiled by Babel => packed by Webpack => ... => form1 => delivered to a JS engine.
    2. JS engine parses the code to an AST (Abstract Syntax Tree) <= subsequent execution: form1 > AST > executable form.
    3. Engine convert that AST to a kind-of byte code => then to JIT (just in time) compiler.
    4. JS VM executes the program.
  • Web Assembly (WASM) => augments what the web (including JS) can accomplish.

    • 2013, "ASM.js" (a subset of JS lang, transpiled from C) was introduced (by Mozilla) to demonstrate the performance of JS engine where it can run an Unreal 3 game at full 60fps. => ASM.js is just a transpiled language (not for coding).
    • After ASM.js > another group (also Mozilla's) released Web Assembly (WASM) <= provide a path for non-JS program (like C) to be converted to a form that could run in the JS engine.
      • WASM's format is entirely unlike JS => skipping the parsing/compilation JS engine normally does
      • codes => WASM parsing/compilation => binary packed (easier for JS engine to understand) > JS engine execute them.
      • Ex: Go program has threaded programming => WASM convert it => JS engine can understand (JS no need to have something like threads feature)
      • 💡TC39 aren't stressed to add more features (from other "concurrent" languages) => just keep their rules, WASM will make the bridge.
    • WASM isn't only for the web, also isn't JS.

Strictly Speaking

  • ES5 (2009) => "strict mode" => encourage better JS programs.

  • Why?

    • Not a restriction but rather a "guide" so that JS engine can optimize and effectciently run the code.
    • Prevent some "stupid" coding ways when working in group, for example.
  • In form of "early errors" => ex: disallows naming 2 function parameters the same.

  • Some examples

    // only whitespace and comments are allowed
    // before the use-strict pragma
    "use strict";
    // the rest of the file runs in strict mode
    // Per function scope
    // Used when you wanna convert non-strict to strict programs
    function someOperations() {
    // whitespace and comments are fine here "use strict";
    // all this code will run in strict mode
    }
  • Cannot be default => otherwise, it will break "backward compatibility" rule.

  • Virtually, all transpiled codes (codes in production) ends up in strict mode.

Chap 2 — Surveying JS

  • The best way to learn JS is to start writing JS.
  • Goal: get a better feel for it, so that we can move forward writing our own programs with more confidence.

Each File is a Program

  • In JS, each standalone file is its own separate program. <= for error handling.
  • How multiple files talk together? => Only way: sharing their state + use "global scope".
  • ES6 => module (also a file-based) <= files are imported to module and be considered as a single module.
    • JS does still treat each module separately
  • A JS file: either standardlone or module.

Value

  • Values come in 2 forms in JS: primitive and object

  • Primitive: string, number, boolean, undefined, null, symbol

    • literals: string, number, boolean

      • string literals, eg: const name = "Thi." <= Using "" or '' is optional but should pick one and to use it consistently throughout the program.

        // Also can use backtick ``
        console.log("My name is ${name}.") // Output: My name is ${name}.
        console.log(`My name is ${name}.`) // Output: My name is Thi.

        This is called an interpolation

      • number, eg. 3.14 or Math.PI

      • boolean: true, false.

    • The "emptiness": undefined, null (They're not the same!) => it’s safest and best to use only undefined as the single empty value

    • symbol, eg. const a = Symbol("meaning of life") <= Symbols are mostly used in low-level code such as in libraries and frameworks.

  • Arrays:

    names = ["France", 1, null]
    names.length // 3
    names[0] // France
    typeof names // "object" <= yep!

    // array can contains a function
    const func = () => true;
    arr = [func, 1]
    typeof func // "function"

    Fact: JS array indices are 0-based (eg. a[0])

  • Objects: an unordered, keyed collection of any various values

    name = {
    first: "Thi",
    last: "Dinh",
    age: 30,
    specialties: [ "JS", "Drawing" ]
    };
    console.log(`My name is ${ name.first }.`); // My name is Thi.
  • Value Type Determination:

    typeof 42;                                    // "number"
    typeof "abc"; // "string"
    typeof true; // "boolean"
    typeof undefined; // "undefined"
    typeof null; // "object" <= yep!
    typeof { "a": 1 }; // "object"
    typeof [1,2,3]; // "object" <= yep!
    typeof function hello(){}; // "function"

Declaring and Using Variables

  • var vs let

    var adult = true;
    if (adult) {
    var name = "Thi"; // <= "var" says "this variable will be seen by a wider scope"
    let age = 30; // <= "let" limit access to "block scope"
    }
    console.log(name) // Thi
    console.log(age) // Error!

    Note: var should be avoided in favor of let (or const) => prevent confusing in scoping behaviors.

  • let vs const <= must give const an initial value and cannot re-assign.

    const somethingToBeAssignedLater; // Error!
    const myBirthday = true;
    let age;
    age = 30;
    if (myBirthday) {
    age=age+1; //OK!
    myBirthday = false; // Error!
    }
  • However,

    const odds = [1, 3, 5];
    odds[1] = 7; // OK :(
    odds = []; // Error!
  • 💡 Use const when you need a meaningful variable like myBirthDay instead of just true . Also, with primitive values, const helps avoid confusion due to reassignment problems.

Functions

  • In JS, the word "functions" takes a broader meaning of "procedure" -- a collection of statements can be invoked many times.

  • Different types,

    // Function declaration <= appear as a statement by itself
    function functionName(coolThings) {
    // ...
    return returnedValue;
    }
    // Association between "functionName" and "returnedValue" happens during
    // the compile phase, before the code is executed.
    // Function as an expression
    // Could be "let", "var"
    const functionName = function(coolThings) {
    // ...
    return returnedValue;
    }
    // (Diff from func declaration) Function expression is not associated with
    // its identifier until that statement during runtime.
  • Function are values that can be assigned and passed as an argument. It's a special type of object.

  • Functions can be assigned as properties of objects

    var whatToSay = {
    greeting() { console.log("Hello!"); },
    question() { console.log("What's your name?"); },
    answer() { console.log("My name is Kyle."); }
    };
    whatToSay.greeting(); // Hello!
  • Appendix A -- So many function forms

    • Named function expression

      // Could be "let" or "var"
      const awesomeFunc = function someName(arg) {
      // ...
      return amzingStuff;
      }
      awesomeFunc.name; // "someName"
      // "awesomeFunc" and "someName" are only linked at the runtime
      // 👌 They should have the same name!
    • Should a function have a name? => "In my opinion [Kyle's], if a function exists in your program, it has a purpose; otherwise, take it out! And if it has a purpose, it has a natural name that describes that purpose."

    • Some more forms (early 2020, maybe more)

      // generator function declaration
      function *two() { .. }

      // async function declaration
      async function three() { .. }

      // async generator function declaration
      async function *four() { .. }

      // named function export declaration (ES6 modules)
      export function five() { .. }
      // IIFE
      (function(){ .. })();
      (function namedIIFE(){ .. })();

      // asynchronous IIFE
      (async function(){ .. })();
      (async function namedAIIFE(){ .. })();
    • Arrow function expression

      var f;
      f = () => 42;
      f = x => x * 2;
      f = (x) => x * 2;
      f = (x,y) => x * y;
      f = x => ({ x: x * 2 });
      f = x => { return x * 2; };
      f = async x => {
      var y = await doSomethingAsync(x);
      return y * 2;
      };
      someOperation( x => x * 2 );
      • "Since I don’t think anonymous functions are a good idea to use frequently in your programs, I’m not a fan of using the => arrow function form."
    • As methods in classes

      class SomethingKindaGreat {
      // class methods
      coolMethod() { .. } // no commas!
      boringMethod() { .. }
      }
      var EntirelyDifferent = {
      // object methods
      coolMethod() { .. }, // commas!
      boringMethod() { .. },
      // (anonymous) function expression property
      oldSchool: function() { .. }
      };

Comparisons

  • Equal...ish

    • We must be aware of the differences between an equality and equivalence comparisons.

    • "Triple equal" === <= Checking both the value and the type (in fact, all comparisons in JS, not just ===, does consider the type but === disallow any kind of conversion while others do)

      3 === 3.0;                    // true
      "yes" === "yes"; // true
      null === null; // true
      false === false; // true

      42 === "42"; // false
      "hello" === "Hello" // false
      true === 1; // fasle
      0 === null; // fasle
      "" === null; // fasle
      null === undefined; // fasle
    • === is lying (not really "strict"),

      NaN === NaN;                                                        // false
      Number.isNaN(NaN) === Number.isNaN(NaN) // true

      0 === -0; // true
      Object.is(0, -0) // false <= should use it, like an "===="
    • === isn't a structural equality but identity equality for object values <= In JS, all object values are held by reference= (cf. App. A -- Values vs References)

      [ 1, 2, 3 ] === [ 1, 2, 3 ]         // false
      { a: 42 } === { a: 42 } // false
      ( x => x * 2) === ( x => x * 2 ) // false
      var x = [ 1, 2, 3 ];
      var y = x;
      y === x; // true (Both point to the same "reference")
      y === [ 1, 2, 3] // false
      x === [ 1, 2, 3] // false
    • "Deep comparison" for "structural equality" is more complicated than you think (even if you stringify them and then compare, it's not always correct). That's why JS doesn't give any mechanism for this.

  • Coercive Comparisons

    • Coercion means a value of one type being converted to its respective representation in another type.

      42 == "42";        // true ("42" is converted to number)
      1 == true; // true
      // Allowed but avoid to use
      "" == 0; // true
      0 == false; // true
    • If the comparison is between the same value type, both == and === do exactly the same thing, no difference whatsoever.

    • Why not just use ===? => Because >, <, >=, <= use coercive also!

      var arr = [ "1", "10", "100", "1000" ];
      for (let i = 0; i < arr.length && arr[i] < 500; i++) {
      // will run 3 times
      }
      // Watch out
      var x = "10"
      var y = "9"
      var x = 9
      x < y // true (use alphabetical comparison of string instead)
      x < z // false
      • It’s still pretty likely you’re going to run into a case where the types may differ.

How We Organize in JS

Two major patterns: Classes and Modules.

  • Classes

    • A class in a program is a definition of a "type" of custom data structure that includes both data and behaviors that operate on that data.
    • Classes define how data structure works but not themselves concrete values. => to get a concrete value of a class, use new to instantiate it!
    class Page {
    constructor(text) {
    this.text = text;
    }

    print() {
    console.log(this.text);
    }
    }

    class Notebook {
    constructor() {
    this.pages = [];
    }

    addPage(text) {
    var page = new Page(text);
    this.pages.push(page);
    }

    print() {
    for (let page of this.pages) {
    page.print();
    }
    }
    }

    var mathNotes = new Notebook();
    mathNotes.addPage("Arithmetic: + - * / ...");
    mathNotes.addPage("Trigonometry: sin cos tan ...");
    mathNotes.print();
    // ..
    • Behaviors (methods) can be only called by instance, not the classes, eg. mathNotes.addPage().
  • Class Inheritance

    // Base class
    class Publication {
    constructor(title, author, pubDate) {
    this.title = title;
    this.author = author;
    this.pubDate = pubDate;
    }

    print() {
    console.log(`Title: ${this.title}, By: ${this.author}, On: ${this.pubDate}`);
    }
    }
    // Extended classes
    class Book extends Publication {
    constructor(bookDetails) {
    super(bookDetails.title, bookDetails.author, bookDetails.pubishedOn);
    this.publisher = bookDetails.publisher;
    this.ISBN = bookDetails.ISBN;
    }

    print() { // overrides parent's print()
    super.print(); // call (again) parent's print()
    console.log(`Publisher: ${this.publisher}, ISBN: ${this.ISBN}.`);
    }
    }

    class BlogPost extends Publication {
    constructor(title,author,pubDate,URL) {
    super(title,author,pubDate);
    this.URL = URL;
    }

    print() {
    super.print();
    console.log(this.URL);
    }
    }
    • super() delegates to parent's constructor for its initial- ization work.
    • Parent's print() and child's print() can have the same name and co-exits => called polymorphism!
    var YDKJS = new Book({
    title: "You Don't Know JS",
    author: "Kyle Simpson",
    publishedOn: "June 2014",
    publisher: "O'Reilly",
    ISBN: "123456-789"
    });
    YDKJS.print();
    // Title: You Don't Know JS, By: Kyle Simpson, On: June 2014
    // Publisher: O'Reilly, ISBN: 123456-789

    var forAgainstLet = new BlogPost(
    "For and against let",
    "Kyle Simpson",
    "October 27, 2014",
    "https://davidwalsh.name/for-and-against-let"
    );
    forAgainstLet.print();
    // Title: For and against let, By: Kyle Simpson, On: October 27, 2014
    // https://davidwalsh.name/for-and-against-let
  • Modules

    • Like classes, modules can "include" or "access" the adata and behaviors of other modules.

    • From the early days of JS, modules was an important and common pattern, even without a dedicated syntax.

    • Classical module

      function Publication(title,author,pubDate) {
      var publicAPI = {
      print() {
      console.log(`Title: ${this.title}, By: ${this.author}, On: ${this.pubDate}`);
      }
      };
      return publicAPI;
      }

      function Book(bookDetails) {
      var pub = Publication(
      bookDetails.title,
      bookDetails.author,
      bookDetails.publishedOn
      );
      var publicAPI = {
      print() {
      pub.print();
      console.log(`Publisher: ${this.publisher}, ISBN: ${this.ISBN}.`);
      }
      };
      return publicAPI;
      }

      function BlogPost(title,author,pubDate,URL) {
      var pub = Publication(title,author,pubDate);
      var publicAPI = {
      print() {
      pub.print();
      console.log(URL);
      }
      };
      return publicAPI;
      }
      • In classes, data and methods are accessed with this. while modules, they're accessed as identifier variables in scope.
      // Their usage
      var YDKJS = Book({...});
      YDKJS.print();

      var forAgainstLet = BlogPost();
      forAgainstLet.print();
      • The only difference is with/without new!
    • ES Modules (ESM).

      • 3 different things compared to the classicial modules,

        1. No need to define a wrapper function, ESMs are always file-based, one file one module.
        2. Whenever we wanna make an API public, use export, otherwise, we cannot call this API from another module.
        3. We don't "instantitate" an ESM, use import instead.
      • Rewrite above publication module as,

        // publication.js
        function printDetails(title,author,pubDate) {
        console.log(`...`);
        }

        export function create(title,author,pubDate) {
        var publicAPI = {
        print() {
        printDetails(title,author,pubDate);
        }
        };
        return publicAPI;
        }
        // blogpost.js
        import { create as createPub } from "publication.js";

        function printDetails(pub,URL) {
        pub.print();
        console.log(URL);
        }

        export function create(title,author,pubDate,URL) {
        var pub = createPub(title,author,pubDate);
        var publicAPI = {
        print() {
        printDetails(pub,URL);
        }
        };
        return publicAPI;
        }
        // main.js
        import { create as newBlogPost } from "blogpost.js";

        var forAgainstLet = newBlogPost(...);
        forAgainstLet.print();

The Rabbit Hole Deepens

  • Recall, this chapter is just like a "brief" of JS world.
  • "I'm serious when I suggest: re-read this chapter, maybe several times."
  • Next chapters, we dig more.

Chap 3 — Digging to the roots of JS

Chap 4 — The bigger picture

Appendix A — Exploring further

Values vs References

  • If you assign/pass a value itself, the value is copied. Primitives are held by values.

    var myName = "Kyle";
    var yourName = myName;
    myName = "Thi";
    console.log(myName); // Thi
    console.log(yourName); // Kyle
  • References are the idea that two or more variables are pointing at the same value. Edit one, others change. In JS, only object values (arrays, objects, functions,...) are treated as references.

    var myAddress = {
    street: "123 JS Blvd".
    city: "Austin",
    state: "TX"
    }
    var yourAddress = myAddress;

    myAddress.street = "456 TS Ave";
    console.log(yourAddress.street); // 456 TS Ave

Appendix B — Practice, practice, practice!

Support Thi Support Thi