変数（variable）
変数名の命名規則
JavaScriptの変数の命名規則には次のようなものがあります。
- 大文字／小文字は区別される。
- 最初の文字は、半角英字／アンダースコア／ドル記号以外使用できない。
- 2文字目以降は1文字目に使用できる文字と数字が使用できる。それ以外の記号などは使用できない。
- JavaScriptの予約語は使用できない。
変数の宣言
文字列を代入する時は、ダブルクォーテーションでもシングルクォーテーションでも変わりはないようです。Google JavaScript Style Guide にはシングルクォーテーションで囲むように書かれているのでそれに従いたいと思います。
// 変数の宣言 var foo; // 宣言した変数の中身はundefined console.log(foo); // 宣言していない変数は、ReferenceError: bar is not defined console.log(bar); // 変数の代入 foo = 1000; // 変数の宣言と初期値設定 var foo = 1000; // varを省略するとグローバル変数になる bar = 2000; // グローバル変数でも代入をしないと、ReferenceError: bar is not define bar;
値の格納されている変数と同じ変数名を再度宣言した場合、値は保持されたままになります。
// 変数の宣言 var foo = 1000; // 値「1000」が出力される console.log(foo); // 同じ変数を再度宣言 var foo; // 値はそのまま「1000」が出力される console.log(foo);
変数の型
JavaScriptの変数の型は次の基本の5種類のプリミィテブ型があります。
| 型名 | Type | |
|---|---|---|
| 文字列型 | String | var foo = ‘bar’; |
| 数値型 | Number | var foo = 1000; |
| 論理型 | Boolean | var foo = true; |
| Null型 | Null | var foo = null; |
| 未定義型 | Undefined | var foo; |
変数の型を知るためには、typeof演算子を使用します。
基本の5種類のプリミティブ型以外はオブジェクト型となります。
変数の型変換
JavaScriptは動的型付け言語なので、変数の宣言をするときにデータ型の指定をしません。代入された値に応じて自動的に型が決定します。
また、型が異なる変数同士の演算結果を代入する場合は、JavaScriptのルールに従って型が決定します。次の例はよく見かける変換例です。
// 変数に数値を代入するので数値型になる var foo = 1000; // 数値型の変数に文字列を代入すると文字型に型変換されます。 foo = 'bar'; // 引き算は文字列の数値でも正しく計算されます。 var foo = '123' - 100; // 値は数値の「23」 console.log(foo); // 足し算は文字列の結合とみなされます。 var foo = '123' + 100; // 値は文字列の「'123100'」 console.log(foo);
変数の参照
オブジェクト型はプリミティブ値を持たず、参照（ポインタ）を持ちます。配列（array）を例に参照渡しの動作を見てみます。
// オブジェクト型（配列）の宣言 var foo = ['kinoko']; // 中身を確認（kinoko） console.log(foo[0]); // オブジェクト型を別の変数に代入 var bar = foo; // 中身を確認（kinoko） console.log(bar[0]); // オブジェクトの中身を変更 foo[0] = 'takenoko'; // fooオブジェクトの中身を確認（takenoko） console.log(foo[0]); // barオブジェクトの中身を確認（takenokoになっている） console.log(var[0]);
変数のスコープ
プログラム内で変数の参照できる範囲のことを変数のスコープといいます。異なるスコープ間では、同じ変数名を使用してもお互いに影響がありません。JavaScriptの変数はグローバルとローカルの2種類のスコープを持ちます。
グローバル変数
- 関数外で宣言された変数
- 関数内でvarで宣言されていない変数
- プログラム内のどこからでも参照可能
ローカル変数
- 関数内でvar宣言した変数
- 宣言した関数内でのみ参照可能
// グローバル変数定義
var foo = 'Global';
// ローカル変数定義
function local(){
var foo = 'Local';
return foo;
}
// グローバル変数の値変更
function global(){
foo = 'Global foo';
}
console.log(foo); // Global
console.log(local()); // Local
console.log(foo); // Global
global();
console.log(foo); // Global foo
参考サイト
- JavaScriptの予約語（MDN）
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words
- Google JavaScript Style Guide（Use single quotes）
- https://google.github.io/styleguide/jsguide.html#features-strings-use-single-quotes
- typeof 演算子（MDN）
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof
- JavaScriptのデータ構造（MDN）
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures
