ReactやTypeScriptを学んでる上でJavaScriptの重要性について感じたので復習していきたいと思います!
ホイスティングについて
よく記事で『宣言の巻き上げ』というワードを目にするんですがよくわからない。。。
コードを見ながらの方がイメージが湧きやすいと思うので実際にコードを書いていきます!
hello();
function hello (){
console.log('こんにちは')
}
上記の例は関数の定義前に関数の実行を行ってます。
本来コードをは上から読み込まれていくので変な感じがしますよね。。。
コンテキスト内で宣言した関数や変数は実行前にメモリに保存されるので先に実行されても問題なく実行することができます!
varとlet・constの違い
次にvarを使用した時とlet・constを使った時の挙動の違いについてです!
console.log(b); // undifinedが出力
var b= 0 ;
console.log(b); // 0が出力
console.log(c) //Uncaught ReferenceError: Cannot access 'c' before initialization
at
let c = 100
何が違うのか
varはundifinedの初期値が設定されてる為エラーが発生しない
逆にいうとletとconstに関してはundifindedの初期値が設定されてない為、エラーが表示されるという仕組みです!
基本はletとconstを使用すれば問題ないかと思います!
無名関数(関数式)の場合
気付いてる方もいるかも知れませんが、無名関数は変数の形をとっていますよね!
const a = (){}
これって。。。
変数の形と一緒ですよね!
なので関数式を使用する場合はundifinedが初期値と設定されてないので
bye() //Uncaught ReferenceError: Cannot access 'bye' before initialization
const bye = function(){
console.log('byebye')
}
エラーが出てしまいますね!
なのでbye()
の位置を関数下で呼び出すことでエラーなく表示することができます!