JavaScriptの変数スコープはどのように機能するのか?基本をわかりやすく解説
変数スコープとは
変数のスコープとは、プログラム内でその変数が定義され、参照できる範囲のことです。JavaScriptの変数には、大きく分けて2種類のスコープが存在します。
グローバル変数
グローバル変数はグローバルスコープを持ちます。つまり、JavaScriptコード内のどこからでも定義・参照できる変数です。関数の外で宣言された変数は、自動的にグローバル変数となります。
ローカル変数
ローカル変数は、定義された関数の内部でのみ有効です。関数の外から参照することはできません。また、関数の引数(パラメータ)も常にその関数にローカルな変数として扱われます。
関数内での変数の優先順位
関数の内部では、同じ名前を持つローカル変数がグローバル変数よりも優先されます。グローバル変数と同じ名前のローカル変数や関数の引数を宣言すると、グローバル変数は実質的に隠蔽されます。この現象は「シャドーイング(変数の隠蔽)」と呼ばれます。
それでは、JavaScriptにおける変数スコープの動作を、具体的なコードで確認してみましょう。
実行例
<html>
<body onload = checkscope();>
<script>
<!--
var myVar = "global"; // グローバル変数を宣言
function checkscope( ) {
var myVar = "local"; // ローカル変数を宣言
document.write(myVar);
}
//-->
</script>
</body>
</html>
このコードでは、まずグローバル変数 myVar に "global" を代入しています。その後、checkscope 関数内で同じ名前のローカル変数 myVar に "local" を代入しています。関数が実行されると、document.write(myVar) はローカル変数の値である "local" を出力します。これは、関数内ではローカル変数が優先されるためです。
補足:let・constによるブロックスコープ
なお、現代のJavaScript(ES6以降)では var 以外に let と const を使った変数宣言が推奨されています。let や const で宣言された変数はブロックスコープ({ } で囲まれた範囲)を持ち、if文やfor文の中でも独立したスコープが生成されるため、より直感的で安全な変数管理が可能になります。新しくコードを書く際は、特別な理由がない限り let または const の使用を心がけるとよいでしょう。
-
【JavaScript】変数が配列かどうか判定する3つの方法(isArray・instanceof・constructor)
JavaScriptでは、ある変数が配列(Array)であるかどうかを判定したい場面はよくあります。本記事では、代表的な3つの判定方法を、サンプルコードと出力結果付きでわかりやすく解説します。 1)Array.isArray() メソッド Array.isArray() メソッドは、引数として渡された変数が配列かどうかをチェックします。変数が配列であれば true を返し、そうでなければ false を返します。ES5以降で利用できる標準メソッドであり、現在最も推奨されている判定方法です。 構文 Array.isArray(variableName) 例 <html> <
-
JavaScriptはブロックスコープ(block scope)に対応している?let・const・varの違いを実例付きで解説
JavaScriptとブロックスコープの関係 JavaScriptでは、let または const キーワードを使って宣言された変数に対してのみ、ブロックスコープが適用されます。 一方で、var キーワードで宣言された変数は関数スコープには従いますが、ブロックスコープには従いません。つまり、波括弧 { } で囲まれたブロックの中で var を使って変数を宣言しても、その変数はブロックの外側からでもアクセスできてしまいます。 let・const と var のスコープの違い let / const: ブロック単位でスコープが生成されるため、ブロックの外部からは参照できません。 var: 関数