配列処理におけるシンプルな考察

JavaScriptにおける配列処理で、ちょっと考察したかったのでまとめてみた。
割とよい例題になったな。

さすがに手抜き過ぎたので、ちょっと解説を追記のつもりが書き換えのレベルになりました苦笑。


# その壱
### コード
```javascript
const aryObj1 = [
  {
    code: 'a001',
    name: 'リンゴ'
  },
  {
    code: 'a002',
    name: 'バナナ'
  },
  {
    code: 'a003',
    name: 'パイナップル'
  }
];

console.log('処理前：aryObj1');
console.log(aryObj1);

const aryObj2 = aryObj1.map(v => v.type = 'xyz');

console.log('処理後：aryObj1');
console.log(aryObj1);

console.log('処理後：aryObj2');
console.log(aryObj2);
```

### 出力結果
```console
"処理前：aryObj1"
[{
  code: "a001",
  name: "リンゴ"
}, {
  code: "a002",
  name: "バナナ"
}, {
  code: "a003",
  name: "パイナップル"
}]
"処理後：aryObj1"
[{
  code: "a001",
  name: "リンゴ",
  type: "xyz"
}, {
  code: "a002",
  name: "バナナ",
  type: "xyz"
}, {
  code: "a003",
  name: "パイナップル",
  type: "xyz"
}]
"処理後：aryObj2"
["xyz", "xyz", "xyz"]
```


### ポイントなど
`aryObj1`には`type`プロパティが追加されているけども、`aryObj2`は`v.type = 'xyz'`によりセットされた`aryObj1.type`の値だけの配列が生成されています。
(ちょっと自信ないが、結果からするとそう見える…。)
(つか、map使っているのに代入ってのが違和感はありまくりではあるが…。)


# その弐
### コード
```javascript
const aryObj3 = [
  {
    code: 'a001',
    name: 'リンゴ'
  },
  {
    code: 'a002',
    name: 'バナナ'
  },
  {
    code: 'a003',
    name: 'パイナップル'
  }
];

console.log('処理前：aryObj3');
console.log(aryObj3);

const aryObj4 = aryObj3.map(v => v);

console.log('処理前：aryObj4');
console.log(aryObj4);

aryObj3.map(v => v.code = 'x999');
aryObj3.map(v => v.type = 'abc');

console.log('処理後：aryObj3');
console.log(aryObj3);

console.log('処理後：aryObj4');
console.log(aryObj4);
```

### 出力結果
```console
"処理前：aryObj3"
[{
  code: "a001",
  name: "リンゴ"
}, {
  code: "a002",
  name: "バナナ"
}, {
  code: "a003",
  name: "パイナップル"
}]
"処理前：aryObj4"
[{
  code: "a001",
  name: "リンゴ"
}, {
  code: "a002",
  name: "バナナ"
}, {
  code: "a003",
  name: "パイナップル"
}]
"処理後：aryObj3"
[{
  code: "x999",
  name: "リンゴ",
  type: "abc"
}, {
  code: "x999",
  name: "バナナ",
  type: "abc"
}, {
  code: "x999",
  name: "パイナップル",
  type: "abc"
}]
"処理後：aryObj4"
[{
  code: "x999",
  name: "リンゴ",
  type: "abc"
}, {
  code: "x999",
  name: "バナナ",
  type: "abc"
}, {
  code: "x999",
  name: "パイナップル",
  type: "abc"
}]
```

### ポイントなど
まずは`aryObj3`を元に、`aryObj4`を新たに生成。
そのあとに、`aryObj3.code`を修正したり、`aryObj3.type`を追加したりすると、`aryObj4`も影響を受けて`aryObj4.code`が修正されたり、`aryObj4.type`が追加されたりする。

影響を受けると書いたが、同じメモリ番地のオブジェクトを参照しているのだから、当然と言えば当然。
一階層目は、新しいオブジェクトが生成されるのだが、二階層以降は`aryObj3`同じオブジェクトを参照しているのがポイント。



# その参
### コード
```javascript
const ary1 = [1, 2, 3];

console.log('処理前：ary1');
console.log(ary1);

const ary2 = ary1.map(v => v * 2);

console.log('処理後：ary1');
console.log(ary1);

console.log('処理後：ary2');
console.log(ary2);

ary1[1] = 5;

console.log('処理後2：ary1');
console.log(ary1);

console.log('処理後2：ary2');
console.log(ary2);
```

### 出力結果
```console
"処理前：ary1"
[1, 2, 3]
"処理後：ary1"
[1, 2, 3]
"処理後：ary2"
[2, 4, 6]
"処理後2：ary1"
[1, 5, 3]
"処理後2：ary2"
[2, 4, 6]
```

### ポイントなど
`ary1`から`v * 2`したもので`ary2`を新しく生成する。`ary1`と`ary2`は別のメモリ番地のオブジェクトなので、`ary1`を修正しても`ary2`には影響しない。



# その肆
### コード
```javascript
let ary3 = [9, 8, 7];

console.log('処理前：ary3');
console.log(ary3);

ary3 = ary3.map(v => v * 2);

console.log('処理後：ary3');
console.log(ary3);
```

### 出力結果
```console
"処理前：ary3"
[9, 8, 7]
"処理後：ary3"
[18, 16, 14]
```

### ポイントなど
`ary3`から`v * 2`したもので`ary3`を上書きする。と言うか新しく生成したオブジェクトを紐づけ直す感じ。なので、`const`ではなく`let`になっているのがポイント。





# いちおうね…
JSFiddleにコード乗っけておいた(いつまであるか分からんけど)
https://jsfiddle.net/vbam2syu/1/