In 'n' Out

空宣言とは？

JavaScriptでは、値を決めずに変数や配列だけを先に用意しておくことができます。
このように、あとから値や要素を代入する前提で宣言する書き方を、ここでは「空宣言」と呼びます。
最初に入れ物だけを用意しておく考え方は、配列や後のfor文を理解するうえで欠かせません。
ここでは、空変数と空配列の宣言方法を整理し、それぞれの役割を確認していきます。

空変数の宣言

JavaScriptでは、値がまだ決まっていない段階でも変数を先に用意しておくことがあります。
処理の流れの中で値が後から決まる場合、あらかじめ変数だけを宣言しておくことで、コードの見通しが良くなります。

構文

let 変数名;

この時点では変数は存在していますが、値は代入されていません。
中身は値が存在しないundefinedという状態になります。

コード例

//emptyVariable.js
let num;

num = 5;
alert(num);

動作例

このように、宣言と代入を分けて書くことができます。
なお、定数であるconstは空宣言ができません。
constは「再代入できない変数」を作るため、宣言と同時に値を決める必要があります。

空配列の宣言

配列も、最初から要素が揃っているとは限りません。
処理の途中で要素を追加していく場合、空配列を用意するのが一般的です。

構文

let 配列名 = [];
const 配列名 = [];

この時点では要素は1つもありませんが、配列としては正しく作成されています。
空配列にはもう1つ宣言方法があります。

let 変数名;
変数 = [];

この書き方でも空配列は作成できますが、可読性が下がり、constも使えないため、積極的には使いません。
そのため、最初から[]を代入する方法が無難です。

コード例

//emptyArray1.js
const arr1 = [];
let arr2 = [];

alert(arr1.length + '個');
alert(arr2.length + '個');

arr1[0] = 'りんご';
arr1[1] = 'みかん';
arr2[0] = 150;

alert('要素数：' + arr1.length + '個、1つ目の要素：' + arr1[0]);
alert('要素数：' + arr2.length + '個、1つ目の要素：' + arr2[0]);

動作例

このように空配列を変数・定数ともに作成して、後からインデックスを使って追加しました。
lengthも要素数0から自動的に増え、arr1は2個、arr2は1個の要素を持つようになりました。
少ない配列数ならこれでもいいのですが、インデックスを使うと数が増えるとどの番号を使ったかわかりにくくなります。
また、インデックス指定では番号を飛ばして代入できてしまう点も管理しづらさの原因になります。
まとめて書きたくなるのが人情というものですが、下記のように書くとエラーが起こります。

コード例

//emptyArrayError.js
const arr1 = [];
let arr2 = [];

arr1 = ['りんご', 'みかん', 'いちご'];
arr2 = [150, 120, 800];

alert(arr1.length + '：' + arr1[0]);
alert(arr2.length + '：' + arr2[0]);

constで宣言した配列は中身の変更はできますが、配列そのものを入れ替えることはできません。
これはconstは再代入ができない仕組みによるものです。
ただし、letで宣言した配列はエラーを起こしません。
では、constに配列をインデックスを使わずに追加するにはどうすればいいでしょうか？

コード例

//emptyArray2.js
const arr = [];

arr.push('りんご');
arr.push('みかん');

alert('1つ目の要素：' + arr[0]);
alert('2つ目の要素：' + arr[1]);

動作例

このようにpushを使えば配列の末尾に要素が順番に追加されます。
そのため、インデックスを意識する必要はありません。
ただし、問題が1つ残っています。
それは1つずつしか追加できないため、インデックスで追加するのと大きな差はないことです。
その問題については次の繰り返しで取り扱います。