【JavaScript】[バグ]配列にemptyという要素が挿入されてしまう

はじめに
環境
本事象が発生した原因
参考サイト

はじめに

TypeScriptを使用し、配列に配列の要素数 + 1 の数値を代入するメソッドを３回呼んだところ、配列が[1, 2, 3]ではなく、[empty, 1, empty, 3, empty, 5]になってしまった。

本事象が発生した誤ったコード

  public array: number[] = [];

  constructor() {
    this.addArray();
    this.addArray();
    this.addArray();
    console.log(this.array);
    // [1, 2, 3]ではなく、[empty, 1, empty, 3, empty, 5]と表示されてしまう
  }

  /**
   * 配列に 配列の要素数 + 1 の数字を代入する
   *
   * @memberof AppComponent
   */
  public addArray() {
    let item = this.array.length++;
    this.array.push(item);
  }

環境

typescript: 3.5.3

本事象が発生した原因

this.array.length++の部分でArray.lengthに1を加算することによって、意図せず配列の要素数(Array.length)を一つ増加し空白(empty)を作ってしまっていることが原因となります。

Array.lengthは書き込み可能なプロパティであるため、加算するとその分配列の要素数が増加して空白ができてしまいます。

例えば、次の例のように空の配列のArray.lengthに5を加算するとemptyが5件代入されている配列が作成されます。

    this.array = [];
    this.array.length += 5;
    console.log(this.array); // [empty × 5]

最初の誤ったコードを意図した通りに動くように修正すると次のようなコードになります。

  /**
   * 配列に 配列の要素数 + 1 の数字を代入する
   *
   * @memberof AppComponent
   */
  public addArray() {
    let item = this.array.length;
    this.array.push(++item);
  }