変数したい（var / let / const）

1var a = 任意のオブジェクト
2
3// ES6で追加
4let b = 再代入できるオブジェクト
5const c = 再代入できないオブジェクト

変数を宣言する方法はvar、const、letの3種類があります。 varはどのような変数にも使うことができます。 constは再代入ができない変数、letは再代入してもよい変数に使います。

もともとvarしかなかった世界に、constとletが導入されたみたいです。 プログラミングでは、変数のスコープは最小限にするほうがよいとされています。 なので基本はconstかletを使えばよく、varはあまり出番がないでしょう。

ヒント

constは「定数」というイメージがあったため、あとから書き換えることができないように変数を宣言するときに使うものだと思っていましたが、大きく間違っていました。 あくまで再代入を禁止する宣言なので、オプジェクトのプロパティは変更できます。

ウェブで検索したコードはvarやconst/letが入り混じっています。 varになっているものは積極的にconstに書き換えればよいでしょう。 そこで、エラーがでる場合はletに置きかえましょう。 そして、プログラムが動けばOKです。

分割代入したい

 1const person = {
 2    "name": "John Doe",
 3    "age": 999,
 4}
 5
 6// オブジェクトを分割代入
 7// - 変数名はプロパティと同じにしなければならない
 8const {name, age} = person;
 9
10// 新しい変数名に分割代入
11// - オブジェクトのキーはプロパティと同じにする
12// - 値を新しい変数名で受け取ることができる
13const {name: anotherName, age: anotherAge} = person;
14
15// 配列に分割代入
16// - オブジェクトを配列で受け取ることはできない
17const [name, age] = person;  // これはエラーになる

複数のプロパティを持つオブジェクトを、アンパックした状態で受け取ることができます。 上のサンプルだとありがたみが分かりづらいですが、 オブジェクトを返り値に持つ関数を受け取るときに便利です。

初期化したい（null / undefined）

1// 変数が空（から）である場合
2let name = null;  // nullを明示的に代入

nullはJavaScriptで「値が空であること」を示すための特殊な値です。 変数やプロパティに値が割り当てられていない状態を明示的に表現したい場合に使用します。

1// 変数名のみを定義
2let name;  // undefined

undefinedは、変数やプロパティが「未定義」であることを示す値です。 変数名だけを定義した場合や、関数が値を返さない場合、 存在しないプロパティにアクセスした場合などにundefinedとなります。

 1// nullを判定したい場合
 2if (name === null) {
 3    console.log("名前の設定が null です")
 4};
 5
 6// undefinedを判定したい場合
 7if (name === undefined) {
 8    console.log("名前の設定が undefined です");
 9};
10
11// 同時に判定したい場合（例外処理）
12if (name == null) {
13    throw new Error("Error: 名前が設定されていません")
14};
15
16// 除外したい場合
17if (name) {
18    console.log(`名前が ${name} に設定されています`)
19} else {
20    console.log("名前の設定が null もしくは undefined です")
21}

nullやundefinedはそれぞれ===演算子で判定します。 両方を同時に判定したい場合は==演算子を使います。 例外処理を発生させたい場合によく使います。

注釈

自分で変数を定義する場合はnullで初期化しておけばOKです。

型変換したい

 1// 数値に変換
 2Number("123");     // -> 123（数値）
 3Number("123abc");  // -> NaN（変換できない）
 4Number(true);      // -> 1
 5Number(false);     // -> 0
 6
 7// 文字列から数値を抽出
 8parseInt("42px");      // -> 42
 9parseFloat("3.14em");  // -> 3.14
10
11// 文字列に変換
12String(456);        // -> "456"（文字列）
13String(true):       // -> "true"
14String([1, 2, 3]);  // -> "1,2,3"
15
16// 真偽値に変換
17Boolean(1);        // true
18Boolean(0);        // false
19Boolean("");       // false（空の文字列はfalse）
20Boolean("hello");  // true
21Boolean([]);       // true（空の配列はtrue）
22Boolean({});       // true（空のオブジェクトはtrue）
23
24// JSON形式の文字列に変換
25const data = {...};
26JSON.stringify(data);
27
28// 等価演算子／厳密等価演算子
295 == "5";     // true（暗黙の型変換）
305 === "5";    // false（暗黙の型変換されない）

型を変換するメソッドも多数用意されています。 JSでは暗黙の型変換がデフォルトになっているのですが、これは予期せぬバグを引き起こす可能性があります。 とくに等価演算子を使って条件分岐する際は、 ===（厳密等価演算子）を使うとよいと思います。