Deep JS Foundations, v3

Original from Kyle Simpson's course Deep JavaScript Foundations, v3 in Frontend Master
原出處為前端大師 - Kyle Simpson深入JavaScript基礎 V3

Index 索引

• Introduction 簡介

• Types 類型

  • Primitive Types (基本類型)
  • Abstract Operations (抽象操作)
  • Coercion (強制轉型)
  • Equality (相等比較)
  • TypeScript, Flow, etc.

• Scope 範疇/範圍

  • Nested Scope (巢狀範疇)
  • Hoisting (提升)
  • Closure (閉包)
  • Modules (模組)

• Objects (Oriendted) 物件(導向)

  • this
  • class {}
  • Prototypes
  • OO vs. OLOO

Introduction 簡介

Why we need to learn JavaScript deeply,
before jump in to the framework or library.
在進入框架及函式庫之前，為什麼我們需要深入學習JavaScript呢？

When bugs happen, and most of developer blame,
includes language, framework, library,
but I think most of them just want to shirk responsibility.
許多開發者在面對bug時會將責任推給語言、框架或是函式庫，但就我而言這是在推卸責任。

Whenever there's a divergence between what your brain thinks is happening,
and what the computer does,
that's where bugs enter the code.
事實上bug更像是你的想法與電腦運算方式的分歧。

Try yourself to explain the following example:
請試著解讀以下的範例：

var x = 40;

x++; // 40
x; // 41

++x; // 42
x; // 42

if you really understand what happend above, try next example:
若你真的了解上述的範例，試著解讀下一段：

var x = "5"; 
x = x + 1; // "51"

var y = "5";

y++; // ??
y; // ??

If second example confuse you,
you will gain a lot from this article.
第二個範例讓你感到疑惑嗎？
那麼這篇文章將對你帶來一些幫助。

Types 類型

ES Spec 2021 官方規範

• data-types-and-values

Primitive Types 基本類型

ECMA 2021 only defined 8 types in the spec:
ECMA於2021年所公佈的規範中定義了8種類型：

• undefined
• null
• boolean
• string
• symbol
• number
• bigint
• object

One of the misunderstanding of JavaScript is,
"In JavaScript, everything is an object",
the answer is false, because false is not an object.
數個對於JavaScript的誤解之一是 –- 在JavaScrip中，所有的東西都是物件。 –- 這是錯誤的！

The reason behind why people say everything is an object,
is because most of the values in JavaScript can behave as objects.
的確，在JavaScript中，大部分的 value 行為可以表現得像是 object。

But we can figure out most of them are not object.
但他們並不都是物件型態，實際的分類如下表所示：

Not Object非物件	Object物件
undefined	object
string	function
number	array
boolean
symbol
bigint
null

Unlike languages like C++ or Java,
In JavaScript, variables dont have types, values do.
與C++、Java不同，在JavaScript裡，variables(變數)沒有型態，而value(值)則有型態。

typeof Operator

var v;
typeof v; // "undefined"

v = "1";
typeof v; // "string"

v = 2;
typeof v; // "number"

v = true;
typeof v; // "boolean"

v = {};
typeof v; // "object"

v = Symbol();
typeof v; // "symbol"

typeof doesntExist; // "undefined"

var v = null;
typeof v; // "object"

v = function(){};
typeof v; // "function"

v = [1, 2, 3];
typeof v; // "object"

var v = 42n;
typeof v; // "bigint"

It is critical to know, typeof operator return values are string.
And those strings values are predictable.
很重要！很重要！很重要！
typeof 運算子所回傳的值為string
而且回傳的String(字串)是可被預測的。

undefined vs undeclared vs uninitialized

undeclared

Its never been created in any scope that we have access to.
從來沒被宣告過。

undefined

there's a variable, but at that moment, it has no value.
已經宣告了這個變數，但是在被使用的當下沒有值。

uninitialized (aka TDZ)

the certain variable, dont get initialized.
尚未被初始化(指定值)的變數。又稱為TDZ。

Special Values 特殊值

NaN

var v = Number("n/a") // NaN
typeof v; // "number"

typeof NaN returns "number",
better to think about NaN is invalid number
NaN 回傳 "number"，可以想像它是個無效的數字。

---

var myAge = Number("0o46"); // 38
var myNextAge = Number("39"); // 39
var myCatsAge = Number("n/a"); // NaN
myAge - "my son's age"; // NaN, see below

When you give numerical operator something that is not a number,
JavaScript Engine will turns that into number first, related to coercion.
當你把非數字丟給算術運算子，JavaScrip會強制將其轉成數值。

---

myCatsAge === myCatsAge; // false

NaN is the only value it is not equal to itself.
NaN並不會等於自己。

---

isNaN(myAge); // false
isNaN(myCatsAge); // true
isNaN("my son's age"); // true

isNaN is early utility to check NaN,
but it coerces values to numbers before it checks for them.
isNaN 可檢查該值是否為NaN，但它會將值強制轉型為數值後再檢查。

---

Number.isNaN(myCatsAge); // true
Number.isNaN("my son's age"); // false

In ES6, we have Number.isNaN utility to check NaN,
this will match NaN exactly.
在ES6中可以使用Number.isNaN的寫法來檢查NaN。

---

Object.is(NaN, NaN) // true

or using Object.is.
也可以使用Object.is來檢查NaN。

---

Negative Zero

var trendRate = -0;
trendRate === -0; // true

trendRate.toString(); // "0"
trandRate === 0; // true
trandRate < 0; // false
trandRate > 0; // false

Object.is(trandRate, -0); // true
Object.is(trandRate, 0); // false

Math.sign(-3); // -1
Math.sign(3); // 1
Math.sign(-0); // -0
Math.sign(0); // 0

// "fix" Math.sign(..)
function sign(v) {
  if (v !== 0) {
    return Math.sign(v)
  }

  return Object.is(v, -0) ? -1 : 1;
}

sign(-3); // -1
sign(3); // 1
sign(-0); // -1
sign(0); // 1

Coercion 強制轉型(型別轉換)

In JavaScript, we refer to type conversion as coercion.
And the first thing you need to know is that
the coercion is an Abstract Operations.
在JavaScript裡面，我們稱coercion為強制轉型(型別轉換)。
首先我們要知道coercion是一種抽象操作。

ES Spec 2021 官方規範

• Abstract Operations in tc39

Abstract Operations 抽象操作

The abstract operations are not a part of the ECMAScript (aka. JavaScript),
they are defined to aid the specification of the semantics of language.
Not need to be an actual function inside JavaScript Engine,
they are conceptual operation.
抽象操作的定義是為了協助語言語義的規範，其本身並不屬於JavaScript，只是概念上的操作。

The first abstract operation that we need to know is called ToPrimitive(input [, preferredType]).
第一個必須知道的抽象操作為ToPrimitive(值 [, 期望型別])。

the ToPrimitive takes an optional type hint,
and hint is either string or number,
so if you have something that is not a primitive,
this function ask you about what kind of type you would like it to be.
ToPrimitive運算的主要用途為改變值得原始型別。
其接受一個值及一個期望型別(字串或數字)，把該值轉化為我們期望的型別。

NOTE
When ToPrimitive is called with no hint, then it generally behaves as if the hint were number. However, objects may over-ride this behaviour by defining a @@toPrimitive method, like Date and Symbol.
當未告知ToPrimitive期望型別時，其預設會優先將值轉為數字(Number)。
但是有例外！在遇到Date(日期)及Symbol(物件)時會優先轉為字串(String)。

If we have something non-primitive, like an object, an array, a function.
and we need to make it into a primitive,
this is the abstract operation that's going to be involved in doing that.
當我們有非原始型別的物件、矩陣或函示必須要賦予原始型別的概念時，就會使用到ToPrimitive這個抽象操作。

Scope

TODO

Objects (Oriented)

TODO