變數提升

在看變數提升之前，我們先看看以下例子

var x = 1
function ck(y) {
console.log(x)
var x = 50
return x * y
}

試想一下在函式內的console.log會印出什麼?
.
.
.
答案是undefined

我們先嘗試理解，其實在瀏覽器或編譯器的角度來看應該會是

var x = 1
function ck(y) {
var x
console.log(x)
x = 50
return x * y
}

因為在宣告x前就已經先使用到了此變數，此時JS會去搜尋哪裡有這個變數，最後在自己的scope找到了這個變數。

但能夠確定的是在自己的scope內就有宣告了，所以將這個宣告拉到scope的最上方，所以才沒有直接出現錯誤，才會變成上方的樣子。

我們將這種特性稱作為 「變數提升」(Hoisting) 雖然不會噴錯但還是盡量將宣告拉在最上方會是最好的喔!

但各為新手們要知道，往上抬其實只是假象，在程式碼他位子還是不變，只是在編譯階段會先將宣告放入記憶體!

let/const宣告

這是在ES6才新增的宣告方式，而他們與var最大的差異大概有以下

• 他們的變數作用範圍是以 { }來做區隔，而var是以函式做區隔。
• 如果在let、const之前就使用到變數，會毫不留情的直接噴ReferenceError的錯誤，而var只是undefined
• let與const不可以重複宣告，也會直接出錯，但var會覆蓋。
• let與const沒有變數提升

舉例:

var x = 1
function ck(y) {
console.log(x)
let x = 50

return x * y
}

這樣就會直接噴出ReferenceError的錯誤!請注意!'

函式提升

如果是透過函式宣告的話，函式也會被帶到最上面不會出錯且正常執行

ck(2)

function ck(x) {
return x * x
}

但如果是透過函式運算式，也就是指定成一個變數的話，就會出現錯誤!

ck(2)

var ck = function (x) {
return x * x
}

切記!只有宣告會被提升，其餘的都不會喔!今天就講到這邊大家明天見!