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

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);

出力結果

"処理前：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使っているのに代入ってのが違和感はありまくりではあるが…。)

その弐

コード

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);

出力結果

"処理前：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同じオブジェクトを参照しているのがポイント。

その参

コード

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);

出力結果

"処理前：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には影響しない。

その肆

コード

let ary3 = [9, 8, 7];

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

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

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

出力結果

"処理前：ary3"
[9, 8, 7]
"処理後：ary3"
[18, 16, 14]

ポイントなど

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

いちおうね…

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