JavaScriptの学習・参考リファレンス/ドキュメント

JavaScript、ECMAScriptの学習と参考メモ 入門~初心者~中級者~上級者を目指して

変数の宣言

JavaScriptでの変数の宣言方法について説明します。

変数の宣言方法3種類

変数の宣言は、let, const, varをのキーワードを使って以下のように行えます。

let 変数名 = 変数の値や参照;
const 変数名 = 変数の値や参照;
var 変数名 = 変数の値や参照;

いずれも以下のように複数の変数を同時に入れた記述も可能ですが、 わかりづらいので推奨はされていない書き方です。

let a = b = 1;
// a => 1 , b => 1
let c = 1 , d = 2;
// c => 1 , d => 2

昔のJavaScriptはvarしかありませんでした。 今後はlet, constを使うのが良いでしょう。

3種類の記述方法の違いは以降で説明します。

letを使った変数の宣言

キーワードletを使うと一般的な変数が宣言できます。

let a = 1;
a = 2;
console.log(a); // -> 2

letを使った変数はブロック・スコープ内で有効な変数となります。 他の言語の変数のイメージに一番近いものになります。

let a = 1;
{
  let a = 2;
}
console.log(a); // => 1

一方、varで宣言すると中括弧内の変更が外にまで反映されている事がわかります。 これはあまり一般的でない動きに感じられます。

var a = 1;
{
  var a = 2;
}
console.log(a); // => 2

また、letは再定義ができないので、コーディングのミスがvarに比べてわかりやすいです。

let a = 1;
let a = 2; // "SyntaxError: Identifier 'a' has already been declared"

varを使った定義だとエラーは起こりません。

var a = 1;
var a = 2;

constを使った変数の宣言

キーワードconstを使うと、再代入できない変数を宣言できます。

const a = 1;
a = 2; //TypeError: Assignment to constant variable.

対象が数値や文字列であれば、定数のように変更できない値という事になります。

これは変数の参照を別のものに代えられないというだけで、 例えば中身がオブジェクトであればプロパティの変更を行えます。

const a = { name : "Taro" };
console.log(a); // => Object {name: "Taro"}
a.name = "Jiro";
console.log(a); // => Object {name: "Jiro"}

対象が数値や文字列の場合、letでないといけない場面も多くありますが、 オブジェクトを扱っている場合、constを使える場面も多いです。

varを使った変数の宣言

ここまで見てきたように変数の利用に当たってはletおよびconstが使えます。 動きも直感的でない面があり、letおよびconstが使える状況であればvarを使う必要性はありません。

他にもletやconstにはないvar独自の動作があります。

グローバルなコンテキストでvarで宣言した変数は グローバルオブジェクト (global object) (ブラウザで動かしている場合window) のプロパティとしてアクセスできるようになります。

var a = 1;
console.log(window.a); // => 1
更新日 : 2020年06月06日   作成日 : 2019年09月08日