ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

javascriptのhoistingを今更理解した

javascriptをもっと知りたくて 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質 を読んでます

開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

そこで今まで適当に理解してた巻上げ(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)
}

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

ちなみにletでやってみた

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%越えてるし
ブラウザ屋さん頑張って……

参考