JavaScript Day 22. Hoisting

在 JavaScript 里还有一个概念称为「Hoisting ( 提升 )」，底下先执行一段范例：

console.log(a)
// ReferenceError: a is not defined

当还没有宣告变数的时候，JavaScript 也不会知道你要他执行什麽，於是当然会抛出错误；那麽如果我们改成写这样：

console.log(a) // undefined
var a

我们会发现他不是抛出错误，而是给了一个 undefined，而实际上这样的结果，我们就称他为「Hoisting ( 提升 )」。但现在我们会很纳闷，JavaScript 不是有所谓的运行顺序吗？照上面这个范例来看，明明不是先宣告变数，却仍然会回传值？

刚刚说这种情况就是所谓的「Hoisting ( 提升 )」，而「Hoisting ( 提升 )」的概念主要是在说变数、函式在宣告期间就会先建立一个记忆体空间，而这个记忆体空间就是全域记忆体( Global Memory ) 或称记忆体堆积（Heap），等到实际运行时再将值放入到这个记忆体空间内，因此我们可以理解到为什麽上面这个范例会回传 undefined。

另外有一点要注意的是，只有变数的宣告会提升，赋值不会。以下面这个范例为例：

console.log(a) // undefined
var a = 5

可以直接把他拆开来看：

var a
console.log(a) // undefined
a = 5

分成两个阶段，第一阶段宣告变数 var a 的时候被提升了，第二阶段 a = 5 赋值则不会被提升。

let 与 const 是否也有提升的动作？

let 与 const 是 ES6 之後新产生的两个宣告变数的方法，那麽他会不会也有提升的行为呢，来看一下底下的范例：

console.log(a) // ReferenceError: a is not defined
let a

上面的范例我们会以为 let 与 const 没有提升行为，但其实是有的，只是提升後的行为与 var 不太一样：

var a = 10
function test(){
  console.log(a)
  let a
}
test()

这个范例的意思是说，假如 let 与 const 没有提升行为，那输出应该会是 10，但最後执行的结果是 ReferenceError: a is not defined，因此可以断定 let 与 const 也有提升行为。

参考资料：

JS 原力觉醒 Day06 - 提升 Hoisting
我知道你懂 hoisting，可是你了解到多深？