このJavaScriptコードを副作用が無いように書き換える為には？

Question

既にObject内に特定のキーが存在している場合は、そのキーの配列にデータを追加し、まだ、Object内に特定のキーが存在していない場合は、そのキーに配列をセットしてから、データを追加という処理を以下のコードで行なっているのですが、これを副作用のないコードに書き直したいです！

関数型プログラミング？？？

ですが、どうやったら副作用のない形に以下のコードを書き換えることが出来るかが頭を絞ってもわかりません >_<

副作用のあるコード

'use strict';

const payload = [
	{id: '001', score: 100},
	{id: '001', score: 40},
	{id: '100', score: 132},
	{id: '100', score: 482}
];

//(1)Deep Copyするには？（ライブラリで解決する方法は既に把握済みですが、ライブラリを使わない場合はどう書くのか？
const state = {
	'001': [
		{id: '001', score: 142},
		{id: '001', score: 112}
	],
	'010': [
		{id: '010', score: 142},
		{id: '010', score: 112}
	]
}

//(2)forEachは値をreturn出来ないが、forEachを使わず副作用の無いように書くにはどうしたら良いのか？
payload.forEach((data) => {
	
	if(typeof state[data.id] === 'undefined') {
		state[data.id] = [];
	}
	
	state[data.id].push(data);
	
});

得たい結果

{ 
	'100': [ 
		{ id: '100', score: 132 }, 
		{ id: '100', score: 482 } 
	],
		
	'001': [ 
		{ id: '001', score: 142 },
	 	{ id: '001', score: 112 },
	 	{ id: '001', score: 100 },
	 	{ id: '001', score: 40 } 
	],
	
	'010': [ 
		{ id: '010', score: 142 },
		{ id: '010', score: 112 } 
	] 
}

Answer 1

(1)Deep Copyするには？（ライブラリで解決する方法は既に把握済みですが、ライブラリを使わない場合はどう書くのか？

さりげに難問

// この方法は楽だけど、正規表現やDateみたいなインスタンスが来ると困る
JSON.parse(JSON.stringify(state));

// これは駄目
var hoge = {a: [1, 2, 3], b: 123};
var piko = Object.entries(hoge).reduce((a, it) => {
  a[it[0]] = it[1];
  return a;
}. {});
piko.a.push(5); // こんな風に破壊的な修正を加えると…

console.log(hoge);
// {a: [1, 2, 3, 5], b: 123} ←配列の参照が残ってるのでこっちも変更されてしまう

console.log(piko);
// {a: [1, 2, 3, 5], b: 123}

再帰呼び出しでコツコツ作っていくしかない。
結論、JSON.parse(JSON.stringify(state))で解決出来なければライブラリ使うべき。

(2)forEachは値をreturn出来ないが、forEachを使わず副作用の無いように書くにはどうしたら良いのか？

関数型プログラミングにはmapがあって、JSにも[].mapが用意されている。
配列に全て同じ関数を実行させて、その結果を取り出すという効果。
なのでforEachを使う場面はそう多くない。

forEach(もしくはeach)は順番に実行するという意味を持つ。
Ajaxを飛ばすとか、console.logで出力するとか、副作用のあるものをバシバシ実行していくためのもの。

こういった処理は関数的に解決するなら畳み込み！
JSでは[].reduceというプロトタイプメソッドがあるのでそれを利用する。

to_stateの部分は関数として切り出せたから楽にテスト出来るね。
しかしpushが破壊的なメソッドだからどう扱うかがJSの課題だね。
ディープコピーをしないとすぐにstateが壊れる。

草案だとmergeの最初でシャローコピーしてたけどそれじゃ駄目で、
ディープコピーが必要になったのでcloneというメソッドを作って入り口で作って対応した。

const payload = [
    {id: '001', score: 100},
    {id: '001', score: 40},
    {id: '100', score: 132},
    {id: '100', score: 482}
];

const state = {
    '001': [
        {id: '001', score: 142},
        {id: '001', score: 112}
    ],
    '010': [
        {id: '010', score: 142},
        {id: '010', score: 112}
    ]
}

const clone = (it) => JSON.parse(JSON.stringify(it))
const merge = (data, it) => {
  if (data[it.id] == null) data[it.id] = [];
  data[it.id].push(it);
  return data;
}

console.log(payload.reduce(merge, clone(state)));
// Object {100: Array(2), 001: Array(4), 010: Array(2)}

console.log(state);
// Object {001: Array(2), 010: Array(2)}

Comments

[退会済みユーザー]

おー、まさに関数型プログラミングっぽい！参考になります！明日、コード書いて試してみます。ありがとうございました！さっきアマゾンで関数型プログラミングの本、2冊注文してみたので勉強してみます。

[miyabi-sun]

push自体は副作用のある破壊メソッドとして用意されたものだから、仕方のない部分はあるんだよねぇ。

JSは関数が第一級オブジェクトだから関数型プログラミングで問題解決出来ますよって言ってるけど、
JSそのものがCやJavaそっくりの命令型プログラミング。

ガチの関数型プログラミング言語みたいに、関数使って全ての問題を解決する為の便利な道具が揃ってるわけじゃないんだよね…。
結局行数増えたり、実行効率増えて微妙になっちゃう泣き所も多くてJSという言語の弱さが出てると思う。

[miyabi-sun]

＞明日、コード書いて試してみます。
電子辞書を何時でも持ち歩く博識な人がいるけど、
同じように簡単に書いて試せる環境用意するのをオススメするよ。

例えばChromeやFireFoxではF12押せばコンソール画面が出てきて、私のコードを丸々コピペして試せる。
色々ガチャガチャ変えながら試すなら腰を据えてになると思うけどね。

例えば私の使っているVimだったらビジュアルモードで行を選択して、
`:w !node`コマンドでファイルの部分保存をREPLコマンドに直接投げて確認という必殺技がある。
hayatomoさんの使ってるエディタやIDEでもなんかできそう。
フットワークの軽さはエンジニアの力を伸ばす事に繋がると思うから、時間が出来たら色々試してみて。

[miyabi-sun]

シャローコピーはstate['100']に入っている配列の参照が紐付いたままだったからstateが壊れてた(´・ω・`)
cloneメソッドを書き足したので見といてね。

[退会済みユーザー]

ありがとうございます！ネストされたstateオブジェクトはうっかり、元のオブジェクトを完コピしたつもりでもコピー先の編集と同時にコピー元も編集してしまったりして、ハマります。。。つい最近、それでハマったので！

Answer 2

コード

シャローコピーで十分なような。

'use strict';

const payload = [
    {id: '001', score: 100},
    {id: '001', score: 40},
    {id: '100', score: 132},
    {id: '100', score: 482}
];

const state = {
    '001': [
        {id: '001', score: 142},
        {id: '001', score: 112}
    ],
    '010': [
        {id: '010', score: 142},
        {id: '010', score: 112}
    ]
}

for (let data of payload) {
  const id = data.id;
  data = Object.assign({}, data); // シャローコピー

  if (!Object.prototype.hasOwnProperty.call(state, id)) {
    state[id] = [data];
  } else {
    state[id].push(data);
  }
}

var expectedResults = {
    '100': [
        { id: '100', score: 132 },
        { id: '100', score: 482 }
    ],

    '001': [
        { id: '001', score: 142 },
         { id: '001', score: 112 },
         { id: '001', score: 100 },
         { id: '001', score: 40 }
    ],

    '010': [
        { id: '010', score: 142 },
        { id: '010', score: 112 }
    ]
};

console.log(JSON.stringify(state) === JSON.stringify(expectedResults)); // true
console.log(JSON.stringify(state)); // {"100":[{"id":"100","score":132},{"id":"100","score":482}],"001":[{"id":"001","score":142},{"id":"001","score":112},{"id":"001","score":100},{"id":"001","score":40}],"010":[{"id":"010","score":142},{"id":"010","score":112}]}

副作用がないというか、参照透過性？のある純粋関数を作りたいのです。

'use strict';
const payload = [
    {id: '001', score: 100},
    {id: '001', score: 40},
    {id: '100', score: 132},
    {id: '100', score: 482}
];

const state = {
    '001': [
        {id: '001', score: 142},
        {id: '001', score: 112}
    ],
    '010': [
        {id: '010', score: 142},
        {id: '010', score: 112}
    ]
};

var expectedResults = {
    '100': [
        { id: '100', score: 132 },
        { id: '100', score: 482 }
    ],

    '001': [
        { id: '001', score: 142 },
         { id: '001', score: 112 },
         { id: '001', score: 100 },
         { id: '001', score: 40 }
    ],

    '010': [
        { id: '010', score: 142 },
        { id: '010', score: 112 }
    ]
};

function sample (payload, state) {
  const hasOwnProperty = Object.prototype.hasOwnProperty;
  const results = JSON.parse(JSON.stringify(state));

  for (let data of payload) {
    const id = data.id;
    data = Object.assign({}, data);

    if (!hasOwnProperty.call(state, id)) {
      results[id] = [data];
    } else {
      results[id].push(data);
    }
  }

  return results;
}

const results = sample(payload, state);

console.log(JSON.stringify(state) === JSON.stringify(expectedResults)); // true
console.log(JSON.stringify(state)); // {"100":[{"id":"100","score":132},{"id":"100","score":482}],"001":[{"id":"001","score":142},{"id":"001","score":112},{"id":"001","score":100},{"id":"001","score":40}],"010":[{"id":"010","score":142},{"id":"010","score":112}]}

Deep Copy

//(1)Deep Copyするには？（ライブラリで解決する方法は既に把握済みですが、ライブラリを使わない場合はどう書くのか？

プリミティブ値の集合なら、

JSON.parse(JSON.stringify(object));

そうでないなら、Object.assign もしくは Object.assign の互換コードを再帰処理して下さい。

• deep-copy-object.js: オブジェクトをディープコピー

完全な deep copy ではなく、変数 state 特化のコードで良ければ、次のように書けます。

const state = {
    '001': [
        {id: '001', score: 142},
        {id: '001', score: 112}
    ],
    '010': [
        {id: '010', score: 142},
        {id: '010', score: 112}
    ]
};

const stateClone = Object.entries(state).reduce((state, entry) => {
  state[entry[0]] = entry[1].map(Object.assign.bind(null, {}));
  return state;
}, state);

console.log(JSON.stringify(state) === JSON.stringify(stateClone));  // true

Re: hayatomo さん

Comments

[退会済みユーザー]

ご回答ありがとうございます！
しかーし！ぬぁー！！まだ、回答募集するつもりが、誤タップでベストアンサーボタン押してしまいました！

[退会済みユーザー]

このコードですと、stateオブジェクトを直接アップデートしてしまってるので、副作用ありますよね？

[退会済みユーザー]

副作用がないというか、参照透過性？のある純粋関数を作りたいのです。

[think49]

なるほど。では、回答後半の方法を参照してディープコピーして下さい。

[退会済みユーザー]

stateとpayloadを引数に渡す関数を作れば良いのですよね？
その関数の中でstateをディープコピーして、あとは、掲載頂いたコードを交え、最後にコピーしたstateをアップデートしたものをリターンすれば、純粋関数になりますよね？

[think49]

payload を参照するオブジェクトは返していないので、state を deep copy すれば良いはずです。

[think49]

コードを追記しておきました。

[think49]

関数型プログラミングがお好きなようなので、変数 state を複製するコードを追記しておきました。

[退会済みユーザー]

ご丁寧にありがとうございます！！！参考にさせていただきます！