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

JavaScriptの変数の巻き上げ（ホイスティング）とは？仕組みをわかりやすく解説

変数の巻き上げ（Hoisting）とは

JavaScriptでは、宣言よりも前に変数を使用できるという特有の挙動があります。これは「巻き上げ（ホイスティング：Hoisting）」と呼ばれる仕組みによるものです。

JavaScriptのパーサーはコードを実行する前に、関数全体を読み込みます。このとき変数宣言がスコープの先頭に移動したかのように扱われるため、宣言より前のコードでも変数へアクセスできるのです。

宣言前に変数を使う挙動

宣言より先に変数が使われているように見えるこの動作こそが、巻き上げです。例えば、次のようなコードを見てみましょう。

points = 200;
var points;

上記のコードは、以下のように書いた場合とまったく同じように動作します。

var points;
points = 200;

つまり、varによる宣言は実行前に処理されるため、コードのどこに書いても問題なく動作します。

巻き上げで注意すべき点

巻き上げられるのは「宣言」だけで、「代入（初期化）」は巻き上げられない点に注意が必要です。宣言より前に変数へアクセスすると、値は undefined になります。

また、ES6で導入された let や const の場合、宣言より前の行でアクセスすると ReferenceError が発生します。これらは「一時的なデッドゾーン（TDZ）」と呼ばれる領域を持っているためです。現代のJavaScriptでは、予期しない挙動を避けるために let や const を使うことが推奨されています。

  1. JavaScriptで変数を定義する3つの方法｜let・var・constの違いを徹底解説

    JavaScriptで変数を定義する方法には、「let」「var」「const」の3種類があります。それぞれスコープ（有効範囲）や巻き上げ（ホイスティング）の挙動が異なるため、特徴を理解して適切に使い分けることが重要です。 3つのキーワードの特徴 1. let ― ブロックスコープの変数 2015年（ES2015）に導入されたキーワードで、ブロックスコープを持つ変数を宣言できます。let で宣言された変数は巻き上げの対象とならないため、宣言前にアクセスするとエラーになります。 2. var ― 関数スコープの変数 従来から使われているキーワードで、関数スコープの変数を作成します。var で宣言

  2. JavaScriptでアップロード前に画像をプレビュー表示する2つの方法

    セキュリティ上の理由により、ブラウザはinput要素で選択された画像ファイルのパスへの直接アクセスを許可していません。つまり、ブラウザ上で動作するJavaScriptはファイルシステムにアクセスできない仕組みになっています。そのため、ユーザーが選択した画像ファイルをサーバーやその他の場所へ送信する前にプレビュー表示したい場合は、少し工夫が必要です。本記事では、JavaScriptでアップロード前に画像をプレビューする2つの実装方法を、サンプルコード付きでわかりやすく解説します。方法1：URLクラスのcreateObjectURL()を使うURLクラスが提供するcreateObjectURL()