# Deep JS Foundations, v3

###### tags: `javascript`

Original from Kyle Simpson's course [Deep JavaScript Foundations, v3](https://frontendmasters.com/courses/deep-javascript-v3/) in [Frontend Master](https://frontendmasters.com/)
原出處為[前端大師](https://frontendmasters.com/) - Kyle Simpson[深入JavaScript基礎 V3](https://frontendmasters.com/courses/deep-javascript-v3/)

## Index 索引

- [Introduction 簡介](#Introduction)

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

- [Scope 範疇/範圍](#Scope)
- Nested Scope (巢狀範疇)
- Hoisting (提升)
- Closure (閉包)
- Modules (模組)

- [Objects (Oriendted) 物件(導向)](#Objects)
- 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](https://tc39.es/ecma262/#sec-ecmascript-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](https://tc39.es/ecma262/#sec-abstract-operations)

#### 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