DEV Community

koki-takishita
koki-takishita

Posted on

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

#watercooler

ドキュメント

map

forとmapコード例

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

forとmap比較

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