加工と処理の違い

Question

forEach()($.each())は、配列或いは連想配列の値を処理し、map($.map())は、値を加工しますが、
この加工と処理の違いとは何なのでしょうか。加工なら、単純に与えられた値を加算したり除算したりし、
処理なら、値を利用した何かしらの仕組みを作るという認識であっておりますか。

Answer 1

「処理」も「加工」も同じような意味ですね。eachを「処理」、mapを「加工」と表現したのは初めて見ました。誰かが適当に書いた日本語に捕らわれないで、eachとmapのそれぞれの動作をちゃんと理解した方が良いと思います。

Answer 2

jQueryのみならず、これらの操作はプログラミング言語の間で Optional とともに語られます。Optional の界隈において、
「加工」は
入力データに"対して"何らかの処理を施し、"出力データを伴う"ものです。
「処理」は
入力データを"元に"何らかの処理を行いますが"出力データを伴いません"。
これは map や each と言った操作を説明する上で、中間操作か終端操作かの違いを意味しています。この観点でいえば質問者の理解は正しいと言えます。

Answer 3

forEachは主に副作用を期待するメソッドであり、mapは副作用なく書けるメソッドである、という風に理解するといいと思います。

var arr=[1,2,3];
arr.map(function(e){return e*2});
//[2,4,6]が返る
arr.forEach(function(e){return e*2});
//undefinedが返る。他の変数に依存しないと結果を返せない。
var arr2 = [];
arr.forEach(function(e,i){arr2[i] = e*2});
//undefinedが返るが……
arr2:
//arr2は[2,4,6]になる
//しかし外部に依存しているので、こんなこともあり得る。
[10,20].forEach(function(e,i){arr2[i] = e*2});
arr2;
//[10,20]ではなく[10,20,6]

参考：副作用 (プログラム) - Wikipedia

Answer 4

map : e-words
とある配列の中身を機械的に加工することをmapといいます。
大きな機械（ハンコ）でたい焼きやおまんじゅうのような製品を一度で大量に作る事を指すようです。

基本的に以下が保証されます。

• inputとoutputの配列の要素数が同じ数であること
• input→outputの加工の結果、勝手にIndexが書き換わらないこと
• 全ての要素は同じ処理(関数)で同様に加工されること

var users = [
  {id: 1, name: "aaaaaaaa", score: 72},
  {id: 2, name: "miyabi", score: 38},
  {id: 3, name: "abe_nana", score: 17}
];

var user_names = users.map(function(it){
  return it.name;
});
console.log(user_names);
// ["aaaaaaaa", "miyabi", "abe_nana"]

---

eachは戻ってくる結果が必要ない場合に使います。

var users = [
  {id: 1, name: "aaaaaaaa", score: 72},
  {id: 2, name: "miyabi", score: 38},
  {id: 3, name: "abe_nana", score: 17}
];

var user_names = users.forEach(function(it){
  return it.name;
});
console.log(user_names);
// undefined

要らないので戻り値は捨てられてundefinedになってることがわかります。
下記のようにAjaxやDOMに影響を与える箇所に投げて終わり…という箇所で使いましょう。

var users = [
  {id: 1, name: "aaaaaaaa", score: 72},
  {id: 2, name: "miyabi", score: 38},
  {id: 3, name: "abe_nana", score: 17}
];

users.forEach(function(it){
  var $user = $("<tr></tr>")
    .append("<td>" + it.id + "</td>")
    .append("<td>" + it.name + "</td>")
    .append("<td>" + it.score + "</td>");
  $("table.users").append($user);
});

出来ること自体は完全にmapの劣化ですが、
他のエンジニアとの共同開発の場合に、
処理に着目したmapを使うと他のエンジニアさんが混乱するので是非使い分けて下さい。