スライドショースライドショー

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

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

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

この記事では、

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

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

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

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

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

配列や変数の初期化

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

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

JavaScriptの変数って何? varで宣言や初期化をしてみよう!
更新日 : 2019年4月26日

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

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

コンストラクタとは、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入門】配列の使い方と操作まとめ(初期化・追加・結合・検索・削除)
更新日 : 2019年4月21日

まとめ

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

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

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

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ヨシダ ジュン

フリーランスエンジニア、ライター。

組込みソフト開発歴が6年ほどあります。
一部上場のソフト開発会社でソフトウェア開発(基本設計、詳細設計、コーディング、テスト)に従事。
その中でC言語を使ったドライバ、アプリ開発、Linuxやサーバなどのネットワーク関係のスキルを身につけました。

2015年4月にフリーランスとして独立し、スクレイピングやHP制作、ライティングなど幅広い仕事を手がけています。さらに、認識技術という次世代技術を活用して日常生活に応用活用したライフスタイルを送っています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説