JavaScriptのホイスティングについて説明します!

JavaScript
スポンサーリンク

こんにちは!最近模写コーディングを始めました。マダラ蝶です。

皆さん暑い中、体調は大丈夫でしょうか?

この記事を読むとJavaScriptのホスティングという概念が理解できるようになります。

この記事はこんな方におすすめ!

  • JavaScriptの関数の仕組みが理解したい!
  • スコープは理解できたけど、ホスティングって何?
  • 巻き上げ処理ってなんなの?

ホスティングとは変数巻き上げ処理のこと

変数巻き上げ処理とは、あるスコープ内で宣言されたローカル変数は、すべてそのスコープの先頭で宣言されたものとみなされることです。

例えば、

  1. function hoge(){
  2.     console.log(x);
  3.     var x;
  4. }
  5. hoge();

基本的にプログラムは上から順番に処理が行われるので、上記の場合は変数『x』の宣言の前に『x』を出力する、という形になっています。そのためエラーになりそうですが、実際にはなりません。

これは、「常に宣言はスコープの先頭で行われたことにする」という処理が裏側で行われているからです。

次に応用編です。

  1. var x = 0; // ここはグローバル変数
  2. function hoge(){
  3.     console.log(x);
  4.     // ここに処理が沢山書いてあるとします。
  5.     // …
  6.     // …
  7.     // …
  8.     // …
  9.     // …
  10.     var x = 1;
  11. }
  12. hoge(); //undefined

この関数は’undefined’と出力されるのですが、実際の処理の順番はこの様になっています。↓

  1. var x = 0; // ここはグローバル変数
  2. function hoge(){
  3.     var x; // 宣言のみが巻き上げられます。グローバル変数ではなくローカル変数『x』の定義となりますので『undefined』が入ります。
  4.     console.log(x); // ローカル変数『x』の『undefined』が出力されます。
  5.     // ここに処理が沢山書いてあるとします。
  6.     // …
  7.     // …
  8.     // …
  9.     // …
  10.     // …
  11.     x = 1; // ローカル変数『x』に『1』が代入されます。
  12. }
  13. hoge();

このような、巻き上げに関する予期せぬミスを予防する策として、

「変数宣言をすべて関数の最初にもっていってしまう」という手法があります。

  1. function hoge(){
  2.     var x = 0,
  3.         y = 1,
  4.         z = 2;
  5.     console.log(x);
  6.     console.log(y);
  7.     console.log(z);
  8. }
  9. hoge();

↑のように関数宣言を最初に行うことで未然にホスティングからなるエラーを防ぐことができます。

ぜひ皆さんも活用して、見やすく簡潔なJavaScriptをかけるように一緒に勉強していきましょう!!!

では今夜はおやすみなさい。ここまで読んでいただき、ありがとうございました。

コメント

タイトルとURLをコピーしました