DEV Community

koki-takishita
koki-takishita

Posted on

[JS]forではなくmapを使う

ドキュメント

map

formapコード例

cartItemsに商品の税込み価格(includeTax)を追加する.

  • before
const cartItems = [
  {
   name: '掃除機',
   price: 10000
  },
  {
    name: '電子レンジ',
    price: 8000
  },
  {
    name: '冷蔵庫',
    price: 30000
  }
]
Enter fullscreen mode Exit fullscreen mode
  • after 税込価格であるincludeTaxを追加する
const cartItems = [
  {
   name: '掃除機',
   price: 10000,
   includeTax: 11000
  },
  {
    name: '電子レンジ',
    price: 8000,
    includeTax: 8800
  },
  {
    name: '冷蔵庫',
    price: 30000,
    includeTax: 33000
  }
]
Enter fullscreen mode Exit fullscreen mode

formap比較

  • for
const cartItems = [...] // 長いので省略
for(let index = 0; index < cartItems.length; index++){
  const taxRate = 10  
  const tax = cartItems[index].price * (taxRate/100)
  cartItems[index].includeTax = cartItems[index].price + tax
}
Enter fullscreen mode Exit fullscreen mode
  • forのイケてない点

forでは、下記のようにindexを指定する必要があります.
助長になりますし、可読性も良いとは思えません.

const tax = cartItems[index].price * (taxRate/100)
cartItems[index].includeTax = cartItems[index].price + tax
Enter fullscreen mode Exit fullscreen mode
  • map
const cartItems = [...] // 長いので省略
cartItems.map((item)=>{
  const taxRate = 10
  const tax = item.price * (taxRate/100)
  return item.includeTax = item.price + tax
})
Enter fullscreen mode Exit fullscreen mode
  • forと比べてイケている点

それに比べてmapはどうでしょうか?
mapでは下記のように複数の要素を順番に取り出します.

cartItems.map((item)=>{...}
Enter fullscreen mode Exit fullscreen mode

順番に取り出したオブジェクトはitemという変数に渡され下記のように各パラメーターにアクセスできます.※名前は自由に決められます.
forのようにindexを指定する必要はありません.

const tax = item.price * (taxRate/100)
item.includeTax = item.price + tax
Enter fullscreen mode Exit fullscreen mode

可読性もforよりかなりよいかと個人的には感じます.
ケースバイケースですが、積極的にmapを使っていきましょう!

最後に

2022年4月から新潟県佐渡島でwebエンジニアとして働いています!
普段は、幹事が得するグルメ予約サイトリザくるの開発しています!
お店によりますが還元される金額の単位は万〜です!
開発や、個人学習していくなかで「おっ」と思ったことを記事として発信しています.

Top comments (0)