Advanced JS Notebook

JavaScript is a single-threaded language that can be non-blocking.

For the code below:

const f()=>{
    const ff()=>{
        console.log("a");
        }
    }
f();

f(), ff()and console.log("a") will be push in the call stack one by one and be popped out in the reverse order (first in last out).

Single threaded means the JavaScript Engine has only one call stack. (simple, multithreaded environment is complicated and has many issues like "deadlock" to deal with.)

Synchronous programming means the program gets executed one line after another in order. If we have one function that takes a lot of time, the whole line will be held up.
When we need to do things like image processing or making requests over the network like API calls, we should do asynchronous programming.

We can do asynchronous programming with setTimeout(), for example:

console.log("1");
setTimeout(() => {
    console.log("2");
}, 2000);
console.log("3");
//>> 1, 3, 2

console.log("1") is pushed in the call stack and executed, then popped out;

setTimeout() was pushed in the call stack. Bc it is not part of JavaScript but part of Web APIs, it triggers the Web APIs, then is popped out of the call stack. And the Web APIs starts a timer of 2 seconds.

During the 2 seconds, as the call stack is empty, console.log("3") is pushed in, executed and pushed out.

After 2 seconds, the Web APIs adds a callback of setTimeout to the callback queue, ready to rune the content inside of setTimeout().

The event loop keeps checking the callback stack and only if the call stack is empty, it will push the first thing in the queue to the stack and do some work. So the callback is removed from the callback queue and added in the call stack, and by running it we add console.log("2") in the call stack, when it is done, the callback is popped out. Now everything is empty.

⚠️ if the time in setTimeout() is set to 0, the output order is still the same, bc only if the call stack is empty, it will push the first thing in the queue to the stack and do some work.

⚠️ JavaScript is synchronous in the sense that it is single-threaded but can have asynchronous code by using the event queue on things like AJAX requests.

The latest ECMAScript standard defines seven data types (built-in types):

Six primitive data types:

Boolean

Null

Undefine

Number

String

Symbol (new in ECMAScript6)

Object

Array and Function are two specialized version of the Object type. Use typeof operator to figure out the type of the value that held by a variable (only values have types, variables are only containers):

var a;
typeof a; // >>"undefined"

var b = null;
typeof b; // >>"object"

var c = undefined;
typeof c;// >>"undefined"

typeof function() {} === "function"; // >>"True"

var arr = [1, 2, 3];
typeof arr; // >>"object"
// use Array.isArray or Object.prototype.toString.call
// to differentiate regular objects from arrays

⚠️ typeof null returns Object instead of null is a long-standing bug in JS, but one that is likely never going to be fixed. Too much code on the Web relies on the bug and thus fixing it would cause a lot more bugs!

⚠️ The typeof of arrays is object.

⚠️ A variable value can be undefined by 1. explicitly assignment, 2. declared with no assignment, 3. function return with no value, 4. usage of void operator

A non-boolean value can always be coerced to a boolean value. The specific list of "falsy" values are as follows:

empty string: ""

0, -0

invalid number: NaN

null, undefined

false

There are four equality operators: ==, ===, !=, and !==.
Overall, the difference between == and === is that == checks the equality with coercion allowed, and === checks the equality without coercion allowd ("strictly equality").

check Ecma-262 Edition 5.1 Language Specification here

if: typeof x differs from typeof y, return false

elif: typeof x is "undefine" or "null", return true, else:

elif: typeof x is "number"

if: x or y is NaN, return false (⚠️NaN === nothing)

elif: x is the same number value as y, return true

elif: x is +0, y is -0 and vice versa, return true

else: return false

elif: typeof x is "string"

if: x and y are exactly the same sequence of characters (same length and same characters in corresponding positions), return true

else: return false

elif: typeof x is "boolean"

if: x and y are both "true" or "false", return true

else: return false

elif: typeof x is "object"

if: x and y both refer to the same object, return true

else: retrun false

else: pass

if: typeof x is the same as typeof y, return the same result as x === y

elif: typeof x is undefined and typeof y is null, and vice versa, return true

elif: typeof x is "string" and typeof y is "number", return the result of ToNumber(x) == y, and vice versa

elif: typeof x is "boolean", return the result of ToNumber(x) == y, and vice versa ⁉️

elif: typeof x is "object", typeof y is "string" / "number", return the result of ToPremitive(x) == y, and vice versa ⁉️

else: return false