【JavaScript入門】配列の初期化(コンストラクタ/配列リテラル)

こんにちは!ライターのヨシダジュンです。

JavaScriptにて配列や変数を使う際に、その中身を最初にどうするかを決めるための初期化という処理があります。

この記事では、

・配列や変数の初期化方法

という基本的な内容から、

・配列を初期化する際に用いるコンストラクタと配列リテラルの違い
・多次元配列の初期化

などの応用編に関しても解説していきます。

今回はそんな「配列や変数の初期化」について、わかりやすく解説します!

目次

配列や変数の初期化

本記事では配列の初期化を中心に解説していきます。

変数の初期化について詳しく知りたい方は以下の記事を参考にしてください。

次に、配列の初期化方法にはどのようなものがあるかをご紹介します。

コンストラクタで初期化する方法

コンストラクタとは、JavaScriptなどのオブジェクト指向型言語において、新たなオブジェクトを生成するときに用いるメソッドです。

配列を初期化するときのコンストラクタとしてはArray()メソッドを用います。

以下がサンプルコードです。

var hoge = new Array();
hoge[ 0 ] = 496;
hoge[ 1 ] = 'foo';

console.log( hoge );

実行結果:

[ 496, ‘foo’]

hogeという名前の配列をコンストラクタで初期化し、配列に代入しています。

引数付きコンストラクタで初期化する方法

コンストラクタには引数を指定することもできます

配列の要素をコンマ「,」で区切って羅列することで、その羅列した要素で初期化することができます。

また、引数に数値を1つだけ指定した場合、配列の長さを指定したとみなされます。配列の中身は未定義の状態で初期化されます。

以下がサンプルコードです。

var hoge = new Array( 496, 'foo' );

引数に配列要素を指定する場合ですね。

こちらは、まず配列を長さ2で初期化した後、配列に「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)」で初期化しています。

コンストラクタと配列リテラルとの違い

配列初期化の方法として、コンストラクタと配列リテラルの大きく分けて2つをご紹介しました。

用途としては同じ配列の初期化ですが、2つは具体的に何が違うのでしょうか?

シンプルに言うと、引数に数値を1つ渡したときの挙動が違います。

以下がサンプルコードです。

var hoge = new Array(3);
var hoge2 = [3];

console.log( hoge );
console.log( hoge2 );

実行結果:

undefined, undefined, undefined
3

コンストラクタの場合は、要素が3つで中身が未定義の配列を生成している一方、配列リテラルは要素が1つの配列を生成しています。

多次元配列の初期化

これまでは配列の次元が1次元という前提で説明してきました。

しかし、配列は2次元配列や3次元配列など、多次元を扱うことができます

ここでは2次元配列の初期化を例にして説明します。

以下がサンプルコードです。

var hoge = [];
for (var i = 0; i < 3 ; i++) {
	hoge[i] = [,,,];
}

3行4列の2次元配列hogeを初期化しています。

あらかじめ要素数が決まっている2次元配列を初期化する場合は、「[ ]」の中に「列の数 – 1」記述します。

配列の使い方総まとめ

配列の様々な使い方についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。

まとめ

今回は、JavaScriptにおける配列の初期化方法についてご紹介しました。

最後にもう一度ポイントをおさらいしておきましょう。

・配列の初期化方法としては大きく分けて、「コンストラクタ」と「配列リテラル」がある。
・コンストラクタには引数を指定しない使い方と指定する使い方がある。
・コンストラクタと配列リテラルでは、引数に数値を1つ渡したときの挙動が異なる。

今回ご紹介した、配列の初期化についての知識を踏まえながら、ご自分で行うプログラミングにもぜひ生かしてみてください!

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次