ドキュメント
forとmapコード例
cartItemsに商品の税込み価格(includeTax)を追加する.
-
before
const cartItems = [
{
name: '掃除機',
price: 10000
},
{
name: '電子レンジ',
price: 8000
},
{
name: '冷蔵庫',
price: 30000
}
]
-
after税込価格であるincludeTaxを追加する
const cartItems = [
{
name: '掃除機',
price: 10000,
includeTax: 11000
},
{
name: '電子レンジ',
price: 8000,
includeTax: 8800
},
{
name: '冷蔵庫',
price: 30000,
includeTax: 33000
}
]
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
}
-
forのイケてない点
forでは、下記のようにindexを指定する必要があります.
助長になりますし、可読性も良いとは思えません.
const tax = cartItems[index].price * (taxRate/100)
cartItems[index].includeTax = cartItems[index].price + tax
-
map
const cartItems = [...] // 長いので省略
cartItems.map((item)=>{
const taxRate = 10
const tax = item.price * (taxRate/100)
return item.includeTax = item.price + tax
})
-
forと比べてイケている点
それに比べてmapはどうでしょうか？
mapでは下記のように複数の要素を順番に取り出します.
cartItems.map((item)=>{...}
順番に取り出したオブジェクトはitemという変数に渡され下記のように各パラメーターにアクセスできます.※名前は自由に決められます.
forのようにindexを指定する必要はありません.
const tax = item.price * (taxRate/100)
item.includeTax = item.price + tax
可読性もforよりかなりよいかと個人的には感じます.
ケースバイケースですが、積極的にmapを使っていきましょう！
最後に
2022年4月から新潟県佐渡島でwebエンジニアとして働いています！
普段は、幹事が得するグルメ予約サイトリザくるの開発しています！
お店によりますが還元される金額の単位は万〜です!
開発や、個人学習していくなかで「おっ」と思ったことを記事として発信しています.
Top comments (0)