javascriptで二次元の連想配列にデータを追加

Question

#前提・実現したいこと
javascriptで多次元の連想配列に対して動的にデータを追加したいと考えています．
以下のjavascriptに表現したような配列を動的に作成したいです．
最初が空の二次元連想配列から，コードによって作成される変数を代入していきたいです．
下の例で行くと，data1,somedata,data2などのキーが分かっている一方で"test"や"hoge"に対応する部分は処理後にしか分からずサイズも分からないので，プログラム内で配列を追加したいです．

可能であれば，この連想配列の形を崩さずに実装したいです．

#発生している問題・エラーメッセージ
二次元の連想配列に対してデータを追加してもundefinedと表示されてしまいます．

data= [
  {
    data1:"test" ,
    somedata: {
      a: "hogeA",
      b: "hogeB"
     } ,
    data2:"test2"
  },
  {
    data1:"test3" ,
    somedata: {
      a: "hogeA2",
      b: "hogeB2"
     } ,
    data2:"test4"
  },
  {
    data1:"test5" ,
    somedata: {
      a: "hogeA3",
      b: "hogeB3"
     } ,
    data2:"test6"
  }
];

#試したこと
.pushを試してみましたが，undefinedとなってしまいました．

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[aygakusei]

ご指摘頂きありがとうございます．
後ほど修正させていただきます．

Answer 1

二次元の連想配列に対してデータを追加してもundefinedと表示されてしまいます

JavaScript(以下JS)に連想配列なんてありませんけど？

というわけで解説。
これはPHPを普段メインに使っており、JSをサブで扱っているエンジニアに陥りがちなミスです。

---

PHPとJSの違いとは？

PHPはどんな形式で配列を作っても内部的にはハッシュマップを使った連想配列という扱いになります。
(PHP7では速度を稼ぐ為に裏で本物の配列を用意するようになりましたが、PHP5.6までは全てハッシュマップの連想配列ですし、表面上は7になっても全て連想配列です)

JSには配列とオブジェクトの2つが存在します。
この配列とオブジェクトにFirefox作ってる団体が管理しているMDNというサイトのリンクを張りましたのでそちらを確認してほしいのですが、所持しているプロパティやメソッドが全くと言って良いほど違うことがわかります。

因みに[1, 2, 3].push(value)みたいな感じで使うメソッドは、
Array.prototype.pushという風にJSのプロトタイプ拡張という機能を使って実装されたメソッドを指します。

---

data= [
  {
    data1:"test" ,
    somedata: {
      a: "hogeA",
      b: "hogeB"
     } ,
    data2:"test2"
  }
]
data[0].somedata.push("hogeC");
// VM78:1 Uncaught TypeError: data[0].somedata.push is not a function
//    at <anonymous>:1:18

JSではこれをオブジェクトの配列と呼びます。
あくまで配列自体は一次元。
そこからハッシュマップ的な使い方をしているオブジェクトを並べていると表現します。

somedataに値を追加しようとpushメソッドを実行しましたが、「お前は関数じゃないだろ」エラーが出てしまいました。
これはsomedataはキーと値のセットを表現するためにオブジェクトで作りましたが、
配列とは違ってpushメソッドがないことから生じるエラーになっています。

---

オブジェクトへのキーの追加は代入式で行います。
配列もそれで出来ますが、配列は末尾に追加するならpushを使った方が自然でしょう。

data= [
  {
    data1:"test" ,
    somedata: {
      a: "hogeA",
      b: "hogeB"
     } ,
    data2:"test2"
  }
]

data[0].somedata.c = "hogeC";
// プロパティに変数名や可変文字列でアクセスしたいなら[]を使う
data[0].somedata["d"] = "hogeD";

console.log(data);
// [
//   {
//     "data1": "test",
//     "somedata": {
//       "a": "hogeA",
//       "b": "hogeB",
//       "c": "hogeC",
//       "d": "hogeD"
//     },
//     "data2": "test2"
//   }
// ]

Comments

[aygakusei]

回答いただきありがとうございます．
アクセスの仕方(data[0].somedata.c = "hogeC";)は連想配列に似ているが，あくまでもオブジェクトを扱っているため連想配列ではないという認識で合っていますか？

また，私の質問の仕方が悪かったため補足させていただきます．
hogeCやhogeDを追記したいのではなく以下のような配列に対して
```javascript
data= [
{
data1:"test" ,
somedata: {
a: "hogeA",
b: "hogeB"
} ,
data2:"test2"
}
}
```
以下のデータを変数から追加したいと考えています．
```javascript
{
data1:"test3" ,
somedata: {
a: "hogeA2",
b: "hogeB2"
} ,
data2:"test4"
}
```
つまり，data[0]までしか定義していない状態で，data[1]やdata[2]にdata[0]と同様のキーと値の関係でデータを格納したいです．

[aygakusei]

ありがとうございます．先に連想配列を定義してからpushをすることで実装できました．

Answer 2

下記引用に対する回答

まさかこういう意味ではないと思うが、dataにpushしてエラーになると思えない。

const data= [
  {
    data1:"test" ,
    somedata: {
      a: "hogeA",
      b: "hogeB"
    } ,
    data2:"test2"
  },
]
const next = {
  data1:"test3" ,
  somedata: {
    a: "hogeA2",
    b: "hogeB2"
  } ,
  data2:"test4"
}
data.push(next);
console.log(data);

また、キーが分かっているならそういうクラスを定義しておいて、newするときにコンストラクタ引数を渡すとか考えたほうがよさそう(somedataみたいなのがいなければ、Object.assignでいいのだが)

--- 以下引用

また，私の質問の仕方が悪かったため補足させていただきます．

hogeCやhogeDを追記したいのではなく以下のような配列に対して

data= [
{
data1:"test" ,
somedata: {
a: "hogeA",
b: "hogeB"
} ,
data2:"test2"
}
}

以下のデータを変数から追加したいと考えています．

{
data1:"test3" ,
somedata: {
a: "hogeA2",
b: "hogeB2"
} ,
data2:"test4"
}

つまり，data[0]までしか定義していない状態で，data[1]やdata[2]にdata[0]と同様のキーと値の関係でデータを格納したいです．