[JavaScript] 繰り返し処理でforEachを避けたい

Question

背景

以下の記事を読み、可読性含めforEachを避けるようにしようと感じた。

JavaScript で forEach を使うのは最終手段

早速 forEach を避けられない

連想配列の各値に同じ計算（例えば3倍など）をして、
計算した結果を新しいobjectとして返す。

const obj = {
  a: 3,
  b: 4,
  c: 5
};

const calculatedObj = {};

Object.keys(obj).forEach((key) => {
  calculatedObj(key) = obj[key] * 3;
}

console.log(calculatedObj); // { a: 9, b: 12, c: 15}

質問

こういったケースは頻繁に起こりうると思いますが、forEachを使わない方法はありますでしょうか？　for ... in は、Lintに弾かれてしまうので、for in 以外で考えたいと思っております。アドバイスのほどお願いいたします。

Comments

[kei344]

まだ質問が「受付中」になっていますが、だいたい出揃っていると思いますので、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

[gano]

ご指摘ごもっともです。各回答にコメント後、解決済みにいたします。
ありがとうございます。

Answer 1

reduceを使って書けます。

const obj = {
  a: 3,
  b: 4,
  c: 5
};

const calculatedObj = Object.keys(obj).reduce((previous, key) => {
  previous[key] = obj[key]* 3
  return previous;
}, {});

console.log(calculatedObj); // { a: 9, b: 12, c: 15}

Comments

[gano]

早速の回答ありがとうございます。
previous の初期値を {} にするのですね。。大変勉強になりました。

Answer 2

こんにちは。２案、回答します。

1. Object.entries、Object.fromEntries および map を使う

Object.entriesで配列にして map で３倍にし、Object.fromEntries で再度オブジェクトにします。

const calculatedObj = Object.fromEntries(
   Object.entries(obj).map(([k, v]) => [k, 3 * v])
);

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/QWjOBmE?editors=0012

2. lodash の mapValues を使う

配列やオブジェクトの操作で便利なライブラリ lodash の _.mapValues を使います。

const calculatedObj = _.mapValues(obj, v => 3 * v);

• 動作確認用CodePen： https://codepen.io/jun68ykt/pen/ZEbajxy?editors=0012

以上、参考になれば幸いです。

追記

上記の回答のうち、１つ目は、以下のサンプルと（２倍か３倍かの違いを除いて、）ほとんど同じです。

• MDN - Object.fromEntries() - オブジェクトの変形から引用：

オブジェクトの変形

Object.fromEntries、逆のメソッド Object.entries()、配列操作メソッドを使用して、以下のようにオブジェクトを変形することができます。

const object1 = { a: 1, b: 2, c: 3 };

const object2 = Object.fromEntries(
  Object.entries(object1)
  .map(([ key, val ]) => [ key, val * 2 ])
);

console.log(object2);
// { a: 2, b: 4, c: 6 }

Comments

[gano]

entries, fromEntries,mapValues, いずれも知らなかったため、大変勉強になりました。様々回答頂きましたが、_.mapValues が一番見やすいなと感じています。一方で reduceを用いた時に計算をしてると一目でわかるのでreduceも良いかなと思っております。

最初の方とどちらをベストアンサーにするか迷いましたが、早い方にベストアンサーをつけさせていただきます。申し訳ありません。
大変勉強になりました、ありがとうございました。

[jun68ykt]

どういたしまして????
参考になれば幸いです。

Answer 3

以下の記事を読み、可読性含めforEachを避けるようにしようと感じた。
JavaScript で forEach を使うのは最終手段

ご質問で示された記事の要約：

1. Array に実装されたメソッドは全て理解して適切に使い分けてください
2. forEach()だけだと、スパゲッティ・ソースになっちゃってる（苦言）

2.1. Arrayの処理は forEach()だけじゃなく、map()やfilter()、reduce()もセットで覚えてほしい.
2.2. for文は読みにくいけど早いはず。

for in 以外で考えたい

敢えて読みにくい方向の for 文を回答します（for in がダメだと「ぐぬぬ…」という気分）

var obj = {
    a: 3,
    b: 4,
    c: 5
  },
  keys = Object.keys(obj),
  rslt = {},
  i, l, key;

for( i=0, l=keys.length; i<l; ++i ) {
  key = keys[i];
  rslt[key] = obj[key] * 3;
}

console.log(rslt); // { a: 9, b: 12, c: 15}

こうなると、pollyfill とか考える人のいなかった時代のコードに逆戻りです。
せっかくなので、var宣言に変えてみましたが、Object.keys() の実装っていつ頃だっけかな？と疑問も湧いてきます。

そんなわけで、参照記事の通り、map()やfilter()、reduce() を使うのが正解だと思います。

Answer 4

mapを使う方がシンプルですね

calculatedObj = {};
Object.keys(obj).map( key => calculatedObj[key] = obj[key] * 3);
console.log(calculatedObj); // {a: 9, b: 12, c: 15}

Comments

[gentaro]

破壊的変更になっており、質問文の
> 計算した結果を新しいobjectとして返す。
を満たしてません。

[gano]

回答ありがとうございます。mapを使う方法もありますね。
個人的にですが、mapは意図して配列を返す時か、Promise.allの引数として使う形で考えていたので、頭にありませんでした。

Answer 5

reduceで。

const calculatedObj = Object.keys( obj ).reduce( ( pre, curr ) => {
  pre[ curr ] = obj[ curr ] * 3;
  return pre;
}, {} );
```**動くサンプル：**[https://jsfiddle.net/cjgoty4a/](https://jsfiddle.net/cjgoty4a/)

---

【Array.prototype.reduce() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)

Comments

[kei344]

ああ、遅かった。

[gano]

回答ありがとうございました。
reduceに不慣れなので、初期値の設定の部分がうまく思いつきませんでした。
70_10 さんの方が早かったのでベストアンサーは70_10さんにつけますが、感謝いたします。