こんにちは！ライターのヨシダジュンです。
JavaScriptにて配列や変数を使う際に、その中身を最初にどうするかを決めるための初期化という処理があります。
この記事では、
・配列や変数の初期化方法
という基本的な内容から、
・配列を初期化する際に用いるコンストラクタと配列リテラルの違い
・多次元配列の初期化
などの応用編に関しても解説していきます。
今回はそんな「配列や変数の初期化」について、わかりやすく解説します！
配列や変数の初期化
本記事では配列の初期化を中心に解説していきます。
変数の初期化について詳しく知りたい方は以下の記事を参考にしてください。
次に、配列の初期化方法にはどのようなものがあるかをご紹介します。
コンストラクタで初期化する方法
コンストラクタとは、JavaScriptなどのオブジェクト指向型言語において、新たなオブジェクトを生成するときに用いるメソッドです。
配列を初期化するときのコンストラクタとしてはArray()メソッドを用います。
以下がサンプルコードです。
var hoge = new Array(); hoge[ 0 ] = 496; hoge[ 1 ] = 'foo'; console.log( hoge );
実行結果：
[ 496, ‘foo’]
hogeという名前の配列をコンストラクタで初期化し、配列に代入しています。
引数付きコンストラクタで初期化する方法
コンストラクタには引数を指定することもできます。
配列の要素をコンマ「,」で区切って羅列することで、その羅列した要素で初期化することができます。
また、引数に数値を１つだけ指定した場合、配列の長さを指定したとみなされます。配列の中身は未定義の状態で初期化されます。
以下がサンプルコードです。
var hoge = new Array( 496, 'foo' );
引数に配列要素を指定する場合ですね。
こちらは、まず配列を長さ２で初期化した後、配列に「496」と「hoge」を代入しています。
var hoge = new Array( 2 ); console.log( hoge ); hoge[ 0 ] = 496; hoge[ 1 ] = 'hoge'; console.log( hoge );
実行結果：
undefined, undefined [ 496, ‘hoge’ ]
配列リテラルで初期化する方法
中カッコ「[ ]」の中に、カンマ「,」で区切って配列要素を記述するのが配列リテラルです。
以下がサンプルコードです。
var hoge = [ 496, 'hoge' ];
配列リテラルを利用して「数値（496）」と「文字列（hoge）」で初期化しています。
コンストラクタと配列リテラルとの違い
配列初期化の方法として、コンストラクタと配列リテラルの大きく分けて２つをご紹介しました。
用途としては同じ配列の初期化ですが、２つは具体的に何が違うのでしょうか？
シンプルに言うと、引数に数値を１つ渡したときの挙動が違います。
以下がサンプルコードです。
var hoge = new Array(3); var hoge2 = [3]; console.log( hoge ); console.log( hoge2 );
実行結果：
undefined, undefined, undefined 3
コンストラクタの場合は、要素が３つで中身が未定義の配列を生成している一方、配列リテラルは要素が１つの配列を生成しています。
多次元配列の初期化
これまでは配列の次元が1次元という前提で説明してきました。
しかし、配列は２次元配列や３次元配列など、多次元を扱うことができます。
ここでは２次元配列の初期化を例にして説明します。
以下がサンプルコードです。
var hoge = [];
for (var i = 0; i < 3 ; i++) {
hoge[i] = [,,,];
}
３行４列の２次元配列hogeを初期化しています。
あらかじめ要素数が決まっている２次元配列を初期化する場合は、「[ ]」の中に「列の数 – 1」記述します。
配列の使い方総まとめ
配列の様々な使い方についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。
まとめ
今回は、JavaScriptにおける配列の初期化方法についてご紹介しました。
最後にもう一度ポイントをおさらいしておきましょう。
・配列の初期化方法としては大きく分けて、「コンストラクタ」と「配列リテラル」がある。
・コンストラクタには引数を指定しない使い方と指定する使い方がある。
・コンストラクタと配列リテラルでは、引数に数値を１つ渡したときの挙動が異なる。
今回ご紹介した、配列の初期化についての知識を踏まえながら、ご自分で行うプログラミングにもぜひ生かしてみてください！
