JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptは変数を宣言する前に使用できる?ホイスティングの仕組みを解説

結論から言うと、JavaScriptでは変数を宣言する前に使用することが可能です。これを実現しているのが「ホイスティング(hoisting:巻き上げ)」と呼ばれる仕組みです。

ホイスティングとは?

JavaScriptのパーサー(構文解析器)は、コードを実行する前に、まず関数全体を読み通します。その際、変数の宣言がスコープの先頭に「持ち上げられた」かのように扱われるため、宣言より前の行で変数を使ってもエラーにはなりません。

このように、宣言よりも前で変数が使われているように見える動作のことをホイスティングと呼びます。

コード例

たとえば、次のようなコードを見てみましょう。

rank = 5;
var rank;

一見すると、まだ宣言されていない変数 rank に値を代入しているためエラーになりそうですが、実際には問題なく動作します。上記のコードは、次のように書いた場合と同じ結果になります。

var rank;
rank = 5;

let・const を使う場合の注意点

なお、ES2015(ES6)で導入された letconst で宣言した変数も内部的にはホイスティングされますが、宣言が評価されるまでアクセスすることはできず、参照すると ReferenceError が発生します。このアクセスできない期間は「TDZ(Temporal Dead Zone:一時的デッドゾーン)」と呼ばれます。

そのため、予期しないバグを防ぐという意味でも、変数は使用する前に必ず宣言しておくことが現代のJavaScript開発におけるベストプラクティスとされています。

  1. JavaScriptの変数がロード済みかどうかを確認する方法をわかりやすく解説

    JavaScriptで変数がロード済み(値が代入済み)かどうかを確認するには、その変数が undefined または null であるかを比較することで判定できます。さらに、typeof 演算子は常に文字列を返すという特性があるため、これを利用して変数の状態をチェックすることも可能です。 それでは、実際にJavaScriptの変数がロードされているかどうかを確認できるサンプルコードを見ていきましょう。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

  2. MySQL 8で「rank」を列名として使える?予約語エラーの原因とバッククォートでの解決法

    MySQLでは、RANKはバージョン8.0.2から定義されている予約語(reserved word)です。そのため、「rank」をそのまま列名として使用することはできず、SQL構文エラーが発生します。この問題を回避するには、列名をバッククォート(`)で囲む必要があります。本記事では、実際にエラーが発生する例と、バッククォートを使った正しいテーブル作成・データ操作の手順を解説します。1. 動作環境の確認まず、使用しているMySQLのバージョンを確認しましょう。ここではMySQL 8.0.12を使用しています。mysql> select version(); +-----------+ |