JavaScript 配列(Array)

New Arrayの基本

配列の作成は2つの方法があります。

１．要素の数を指定して配列を作成する

let arr = New Array(5);
console.log(arr); // [undefined, undefined, undefined, undefined, undefined]

＝＝＝
console.log(arr)は、変数arrの内容をブラウザのコンソールに出力します。
＝＝＝

この方法では、指定した数のundefined要素が入った配列が作成されます。

２．初期要素を指定して配列を作成する：

let arr = new Array(1, 2, 3);
console.log(arr); // [1, 2, 3]

この方法では、引数に渡された要素がそのまま入った配列が作成されます。

配列リテラルについて

New Arrayを使う代わりに配列リテラル（[]）を使って配列を作成することもできます。

＝＝＝
配列リテラルとは、JavaScriptで配列を簡単に作成するための表記方法です。中括弧 [] を使って、配列の要素を直接記述します。
＝＝＝

let arr1 = new Array(1, 2, 3);
let arr2 = [1, 2, 3];

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

基本的には、両方とも同じ配列が作成されますが、配列リテラルの方がシンプルで直感的です。

New Arrayの注意点

要素数を指定する場合

let arr = new Array(3);
console.log(arr.length); // 3

配列の長さを指定すると、その長さの空配列が作成されますが、要素はundefinedになります。

undefined
コンピューティング、特にプログラミングにおける未定義値とは、式が正しい値を持たない状態・状況である。空の文字列、ブーリアン型の「偽値」、またはその他の「空の値」 とは異なるため、混同してはならない。

ウィキペディア

要素が数値で1つの場合：

let arr = new Array(7);
console.log(arr); // [empty × 7]

単一の数値を渡すと、その数値を配列の長さと解釈してしまいます。

その他の配列を作成する方法

Array.ofメソッド：

Array.ofはES6（ECMAScript 2015）で導入された、配列を作成するためのメソッドです。Array.ofは、渡された引数を要素とする新しい配列を作成します。このメソッドは、特に引数が1つのときに有用であり、new Arrayの挙動と異なる点が重要です。

let arr = Array.of(7);
console.log(arr); // [7]

Array.ofは、常に渡された引数をそのまま配列の要素として解釈します。new Arrayのように引数が1つの場合に挙動が変わる(要素数と解釈する)ことがありません。

Array.fromメソッド：

Array.fromは類似配列オブジェクトや反復可能なオブジェクトから新しい配列を作成します。

let arr = Array.from([1, 2, 3]);
console.log(arr); // [1, 2, 3]

類似配列オブジェクトとは、配列のようにインデックス（数値キー）でアクセスでき、lengthプロパティを持つオブジェクトのことです。
ただし、Array.prototypeのメソッドは使えません。
つまり、見た目は配列に似ていますが、実際には配列ではないオブジェクトです。

Array.fromは、これらの類似配列オブジェクトを実際の配列に変換するために使います。これにより、配列のメソッド（map, filter, reduceなど）を使えるようになります。

結論

New Arrayは歴史的に使われてきましたが、配列リテラル（[]）やArray.of、Array.fromといったメソッドの方が、コードが読みやすくバグが少ないため、現代のJavaScriptではこれらの方法を推奨します。
特に配列リテラルはシンプルでエラーの原因になりにくいので、最も一般的に使われています。

※補足　letとvarについて

letとvarは、どちらもJavaScriptで変数を宣言するために使われますが、いくつかの重要な違いがあります。それぞれの違いと使い方を説明します。

varとは
varは、JavaScriptのES5まで使われていた変数の宣言方法です。次の特徴があります：

関数スコープ：
変数は関数全体で有効です。ブロックスコープ（ifやforなどのブロック内）を無視します。

function example() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10
}
example();

巻き上げ（Hoisting）：
変数宣言はスコープの先頭に巻き上げられます。ただし、初期化は元の位置に残ります。

console.log(y); // undefined
var y = 5;

letとは
letは、JavaScriptのES6（ECMAScript 2015）で導入された変数の宣言方法です。

変数は宣言されたブロック内でのみ有効です。これにより、より細かいスコープ管理が可能になります

function example() {
    if (true) {
        let x = 10;
        console.log(x); // 10
    }
    console.log(x); // ReferenceError: x is not defined
}
example();

巻き上げ（Hoisting）されない
letで宣言された変数は、宣言する前に使用できません。これを「一時的デッドゾーン（Temporal Dead Zone）」と呼びます。

console.log(y); // ReferenceError: y is not defined
let y = 5;

constについて
constもES6で導入され、letと同様にブロックスコープを持ちますが、変数の再割り当てができません。初期化時に値を設定する必要があります。

const z = 10;
z = 20; // TypeError: Assignment to constant variable.

letとvarの使い分け
ブロックスコープが必要な場合はletやconstを使います。
再代入が必要ない場合はconstを使い、再代入が必要な場合はletを使います。
レガシーコードや特定の古いブラウザ環境ではvarを使うことがあるかもしれませんが、letとconstがサポートされている場合はそれらを優先します。

まとめ

現代のJavaScriptプログラミングでは、変数宣言にletやconstを使用することが推奨されます。これにより、スコープ管理がより厳密になり、コードの可読性と保守性が向上します。