# hoisting 觀念知多少?

- 此筆記參考**六角學院**影音課程: JavaScript 及 [techbridge](https://blog.techbridge.cc/2018/11/10/javascript-hoisting/)

- 首先先來觀察這段程式碼的結果:

console.log(a);
var a = 3;
console.log(a);

// undefined
// 3

- 基於認知來說，我一開始會認為這段 code 應該會是 找不到變數、再來才會列印出:3，但 a 一開始卻是 undefined，這可神奇了，究竟是為什麼?

- 以往對程式的認知: 代碼是由上至下開始看，但一個結果卻顯示變數存在，為空值 Why~?

---

### JavaScript 的 hoisting:

- 這種現象就叫做 hoisting，提升，在第二行的`var a`因為某種原因被「提升」到了最上面，所以上面的程式碼你可以「想像」成這樣：

var a;
console.log(a); // undefined
a = 3;
console.log(a); // 3

- 這邊要特別提醒一下，**程式碼本身是不會換行的**，但這個就是 JS 的特性 - hoisting (提升)，所以**變數會自動被提升至最上面**，但注意: **值是不會被提升的**!

---

### 函式也有 hoisting 概念:

- 檢視以下程式碼:

console.log(a);
var a = 3;
console.log(a);


count();

function count() {
    console.log('hello!');
}

// undefined
// 3
// hello

### 總結:

jack，真是太神奇了!
函式先被執行卻也可以顯示呢!

原因是:

變數宣告跟函式宣告都會提升
只有宣告會提升，賦值不會提升

###### tags: `JavaScript - 學徒篇`