ウェブプラスαウェブプラスαフリーランス歴13年のWebエンジニアです。学んだことをアウトプットしています。user01JavaScript(ES6)の変数スコープの違いによる挙動確認TwitterFacebookGoogle+はてブPocketこの記事は最終更新日から1年以上経過しています。ES6で追加されたletとconst、以前からあるvarとグローバル変数について、スコープの違いによる挙動をまとめました。まとめ関数スコープで挙動確認var今までよく使われていたvarは、スコープが関数となります。関数内で変数が宣言されている場合は関数内のスコープで変数が有効になります。関数内でなmyvarは宣言されていないがグローバル変数として宣言および初期化されているので「g変数」が表示されるlet関数レベルでのスコープはvarと同じ。関数内でなmyletは宣言されていないがグローバル変数として宣言および初期化されているので「g変数」が表示されるconst関数レベルでのスコープはvar,letと同じ。関数内でなmyconstは宣言されていないがグローバル変数として宣言および初期化されているので「g変数」が表示されるブロックスコープで挙動確認varvarは関数スコープなので、ブロックの影響は受けません。f1-1は「f11変数」、f1-2,f1-3は「f1ブロック変数」が表示されるletletはブロックスコープなので、ブロックが終了すると参照できなくなります。f1-1は「f11変数」、f1-2は「f1ブロック変数」、f1-3は「f1変数」が表示されるconstconstもletと同じブロックスコープなのでブロックが終了すると参照できなくなります。f1-1は「f11変数」、f1-2,f1-3は「f1ブロック変数」、f1-4は「f11変数(再宣言)」が表示されるletletはブロック内で再宣言できないのでJavaScriptのエラーが発生します。declared」というエラーメッセージが表示されました。※1の行でmyletがすでに宣言されているというJavaScriptエラーが発生します。constconstもletと同じくブロック内で再宣言できないのでJavaScriptのエラーが発生します。declared」というエラーメッセージが表示されました。※1の行でmyconstがすでに宣言されているというJavaScriptエラーが発生します。スコープ内で変数を変更するvar,letvar,letで宣言した変数はスコープ内で自由に変更することができます。constconstで宣言した変数はスコープ内で変更した場合、JavaScriptエラーが発生します。variable.」と表示されました。constで定義した変数は変更できないので変更処理でエラーが発生する。宣言前に変数を参照する変数を宣言しないで変数を参照した場合、当然エラーが発生します。defined」と表示されました。ブロック内で変数宣言はしているが宣言より前に変数を参照した場合、varとlet,costは挙動が変わります。varの場合はブロック内で宣言していればエラーではなくundefinedとなります。let,constは宣言前に参照するとJavaScriptエラーが発生します。defined」と表示されました。変数が定義されていないのでJavaScriptエラーが発生する。f12-1はJavaScriptエラーが発生。f13-1はJavaScriptエラーが発生。var変数の巻き上げ関数スコープであるvarの場合、スコープ内で変数が定義されている場合、変数宣言より前に参照してもその宣言自体は有効になります。変数の代入は最初に代入したあとからでないとあたいの参照はできないため、変数代入前はundefinedとなります。var変数の巻き上げは、varで宣言した変数の宣言部分は関数ブロックの先頭に記述されているものとして処理されるため発生します。let,constでは本現象は発生しないので変数み宣言でエラーとなります。まとめJavaScriptで変数を利用する場合、基本的にvarは使わずに変更しない変数はconst、変更する可能性がある変数はletで宣言するのがよく、varを使う場合は関数の先頭にまとめて定義することを意識することで予期せぬ問題を防ぐ可能性が高くなります。【jQuery】n番目の要素にアクセスするJavaScriptLeafletで地図を実装するデモ(3)prism.jsをWordPressに導入RECOMMENDこちらの記事も人気です。