目次
findがうまく動かない？returnの罠にご注意
最近JavaScriptで簡単なショッピングカート機能を作ってみました。
やりたかったことは、以下のようなこと：
- 商品をカートに追加
- 同じ商品が2回追加されたら、数量を増やす
「商品名を使って、すでに追加されている商品があるか探して、あれば個数を＋1、なければ新規で追加」というシンプルな処理です。
実際に書いたコード
まずは試しに書いたコードがこちら：
const cartArray = [];
function addToCart(cart, productName) {
const product = cart.find((item) => {
item.name === productName;
});
if (product) {
product.quantity += 1;
} else {
cart.push({ name: productName, quantity: 1 });
}
}
addToCart(cartArray, "apple");
addToCart(cartArray, "banana");
addToCart(cartArray, "apple");
cartArray.forEach((item) => console.log(item));出力された結果がこれ…
{ name: "apple", quantity: 1 }
{ name: "banana", quantity: 1 }
{ name: "apple", quantity: 1 }
えっ！？
appleが2個になってないじゃん！！😱
原因はアロー関数の “{}” にありました
コードをよーく見返してみると…
(item) => {
item.name === productName;
}これは実は、戻り値が undefined になっているんです。
なぜなら、アロー関数で波かっこ {} を使ったときは return を明示しないといけないから。
正しい書き方
修正方法は2つあります👇
1. return を書く
const product = cart.find((item) => {
return item.name === productName;
});2. 波かっこを使わず、1行で書く
const product = cart.find(item => item.name === productName);修正後の出力結果
{ name: "apple", quantity: 2 }
{ name: "banana", quantity: 1 }やった〜！意図通りに動いた！
学びメモ：アロー関数のreturnルール
- アロー関数に
{}を使うときはreturnを忘れずに！ - 逆に、1行処理なら
{}を省略してもOK！ findなどのメソッドは「条件がtrueになる最初の要素を返す」ので、戻り値がないと常にundefinedになる
おわりに
今回のつまずきで、アロー関数の使い方をより深く理解できました。
見た目はあってるのに動かない、というときほど「関数の戻り値」を意識することが大事だなと実感。
同じように「なんでうまくいかないの〜〜！」と悩んでいる方のヒントになれば嬉しいです🌷
コメント