LoginSignup
0
1

More than 3 years have passed since last update.

【JavaScript】ホイスティングについて ~復習~

Posted at

ReactやTypeScriptを学んでる上でJavaScriptの重要性について感じたので復習していきたいと思います!

ホイスティングについて

よく記事で『宣言の巻き上げ』というワードを目にするんですがよくわからない。。。
コードを見ながらの方がイメージが湧きやすいと思うので実際にコードを書いていきます!

main.js
hello();

function hello (){
console.log('こんにちは')
}

上記の例は関数の定義前に関数の実行を行ってます。
本来コードをは上から読み込まれていくので変な感じがしますよね。。。
コンテキスト内で宣言した関数や変数は実行前にメモリに保存されるので先に実行されても問題なく実行することができます!

varとlet・constの違い

次にvarを使用した時とlet・constを使った時の挙動の違いについてです!

main.js
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が初期値と設定されてないので

main.js
bye() //Uncaught ReferenceError: Cannot access 'bye' before initialization
const bye = function(){
    console.log('byebye')
}

エラーが出てしまいますね!
なのでbye()の位置を関数下で呼び出すことでエラーなく表示することができます!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1