javascriptのhoistingを今更理解した

そこで今まで適当に理解してた巻上げ（hosisting）について学んだので
自分なりに整理がてらにまとめようと思う

巻上げとは

javascriptには巻上げという機能があります
プログラムは基本的に上から順番に実行されますがこの機能があるおかげで以下のような実行の仕方が可能になります

//まだ定義されてないのに呼び出せる
func() //=>funcを実行しました

function func() {
  console.log('funcを実行しました');
}

これはjavascriptが実行される前にfunctionで定義されているものを探しているらしいです

関数が巻上げされるのは関数宣言で定義された関数だけで
式として定義された関数は巻上げられません

例

func() //=> Error: func is not a function
var func = function() {
  console.log('funcを実行しました')
}

基本的に関数は関数宣言で定義しないので気にしたことはなかったのですが
巻上げされない時があるというのは勉強になった

javascriptでは変数も巻上げが発生します

どういうことかというと

a = 1
var a

みたいなコードを実行すると
内部では

var a
a = 1

として実行されます

なのでこんな感じのコードを書くとちゃんと値を表示してくれません（コードが雑でごめんなさいw

var a = 1
function func() {
  console.log(a) //=> undefined 1ではないことに注目
  var a = 2
  console.log(a) //=> 2
}
func()

これは内部的には

var a = 1
function func() {
  var a
  console.log(a)
  a = 2
  console.log(a)
}

のようになってるからです

es2015で変数定義する際にletが追加されましたがこれを使うとちゃんとエラーで怒ってくれる

let a = 1
function func() {
  console.log(a) //=>ここで「a is not defined」エラーが出る
  let a = 2
  console.log(a)
}
func()

varとか使わずに、letとかconstだけで早く生活したい……

es2015の機能も次のchromeのバージョンから実装率が91%越えてるし
ブラウザ屋さん頑張って……