変数と宣言

プログラミング言語には、数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数があります。

JavaScriptでは、「これは変数です」という宣言をするキーワードとして、 varletconstがあります。

この章では、変数の宣言方法を見ていきます。

var

varキーワードを使い変数宣言ができます。

たとえば、次のコードでは、bookTitleという変数を宣言しています。 この場合、bookTitleは値が代入されていないため、デフォルト値としてundefinedで初期化されます。

var bookTitle;

このbookTitleという変数には、=演算子を使うことで値を代入できます。

var bookTitle;
bookTitle = "JavaScriptの本";

変数宣言と同時に初期値を代入することもできます。 次の例では、bookTitleという変数を宣言し、同時に"JavaScriptの本" で初期化しています。

var bookTitle = "JavaScriptの本";

また、変数宣言は , で区切ることにより、同時に複数の変数を定義できます。 次のコードでは、bookTitlebookCategoryの変数を順番に定義しています。

var bookTitle = "JavaScriptの本",
    bookCategory = "プログラミング";

これは次のように書いた場合と同じ意味になります。

var bookTitle = "JavaScriptの本";
var bookCategory = "プログラミング";

変数名に利用できる文字種

JavaScriptでは変数名として使える識別子には次のルールがあります。

  • 先頭の1文字目は $_、アルファベット、\uXXXX 形式のUnicodeエスケープシーケンスのどれか
    • アルファベットは "A" から "Z"(大文字)と "a" から "z"(小文字)
  • 2文字目以降は、上記に加えて、数字、一部Unicode文字、U+200C、U+200Dのどれか

このルールの例外として、予約語として定義されているキーワードは変数名には利用できません。 JavaScript variable name validatorでどのような変数が利用可能かをチェックできます。

var $; // OK: $から開始できる
var _title; // OK: _から開始できる
var jquery; // OK: アルファベット
var es2015; // OK: 数字は先頭以外なら利用できる
var valid日本語; // OK: 先頭以外なら一部Unicode文字も利用可能

次のような変数は上記のルールに反するため、構文エラー(SyntaxError)となります。

var 2nd; // NG: 数字から始まっている
var var; // NG: `var`は予約語であるため利用できない

先ほど紹介したように変数の宣言に利用できるキーワードとして、var以外にもletconstがあります。 どちらも変数宣言の一種で、利用できる変数名のルールは同じとなります。

それでは、次はletconstについて見ていきます。

[ES2015] let

letキーワードを使い、現在のスコープに対して変数宣言できます。

letの使い方はvarとほとんど同じです。 次のコードでは、bookTitleという変数を宣言し、同時に"JavaScriptの本" で初期化しています。

let bookTitle = "JavaScriptの本";

letvarは、スコープの扱いと同じ変数名の再定義の扱いが異なります。 スコープについて「関数とスコープ」の章で扱うため、現時点では「よりよいvar」ということだけ覚えておくとよいです。

letconstは同一スコープ内で同じ変数名を再定義できません。 次のように同じ変数名で再定義しようとする構文エラー(SyntaxError)になります。 これにより、間違えて変数を二重に定義してしまうというミスを防ぐことができます。

let x; // "x"を定義する
let x; // 同じ"x"を定義するとSyntaxErrorとなる

一方、varは同一スコープ内で同じ変数名を再定義できます。 これは意図せずに同じ変数名を定義し値を上書きしてしまう問題があるため、varを避ける理由の1つとなります。

var x; // "x"を定義する
var x; // 同じ変数名"x"を定義できる

[ES2015] const

最後にconstですが、letに対してさらに制約をつけた変数宣言という位置づけになります。 基本的な使い方はletと同じですが、const再代入できない変数を定義するキーワードです。

varletでは、変数宣言と代入を別々に行うことができました。

// varやletで宣言した変数には代入できる
let bookTitle; // `undefined`で初期化される
bookTitle = "JavaScriptの本"; // 値を代入している

しかし、constでの宣言と代入を別々に行うコードは構文エラー(SyntaxError)となります。

const bookTitle; // SyntaxError: missing = in const declaration
bookTitle = "JavaScriptの本";

constは必ず宣言時に値を指定しなければなりません。

const bookTitle = "JavaScriptの本";

そして、一度constで宣言された変数には再代入できなくなります。 そのため、次のコードではbookTitleを上書きしようとしてTypeErrorとなります。

const bookTitle = "JavaScriptの本";
bookTitle = "上書き"; // TypeError: invalid assignment to const `bookTitle'

一般に変数への再代入は「変数の値は最初に定義した値と常に同じである」という参照透過性を壊すため、 バグを発生させやすい要因として知られています。

変数を再代入をしたいケースとしてループ中に値の変化させたい場合などがあります。 しかし、多くのケースで代替できる表現があるため必ずしもvarletを使わなくても実現できます。 constを使うことでバグに気づきやすくなるため、constを積極的に利用していくことを推奨しています。

まとめ

JavaScriptにおける変数宣言としてvarletconstがあることについて学びました。

varはもっとも基礎的な変数宣言方法です。 letconstvarの問題を改善するためにES2015で導入されました。

varは殆どのケースでletconstに置き換えが可能です。 constは再代入できない変数を定義するキーワードです。 再代入を禁止することで、ミスから発生するバグを減らすことが期待できます。

そのためconstで変数を定義できないかを検討してから、できない場合はletを使うことを推奨しています。