はじめに
アロー関数に慣れてアロー関数ばかりを書いて、ふと通常の関数に戻して処理をしてみたら動かなくなった。
script.js
const food = {
肉: ["豚肉", "牛肉", "鶏肉", "魚肉"],
野菜: ["レタス", "玉ねぎ", "キャベツ", "人参"]
};
const target_food = "レタス";
const result = Object.entries(food).filter(([category, food]) => food.includes(target_food));
result.forEach(([category, food]) => console.log(category));
//結果 => 野菜
script.js
const food = {
肉: ["豚肉", "牛肉", "鶏肉", "魚肉"],
野菜: ["レタス", "玉ねぎ", "キャベツ", "人参"]
};
const target_food = "レタス";
const result = Object.entries(food).filter(function([category,food]){
food.includes(target_food);
});
result.forEach(function([category, food]){
console.log(category);
});
//結果 => コンソールで何も表示されない
resultに対してconsoleで見ても空になっていた。なぜだ。。。
アロー関数と関数の違いとthisの評価のされ方
こちらの記事を参考にさせてもらうとアロー関数にするとreturnを省略できるみたい。
他にも色々と省略されてますが。。。
script.js
const food = {
肉: ["豚肉", "牛肉", "鶏肉", "魚肉"],
野菜: ["レタス", "玉ねぎ", "キャベツ", "人参"]
};
const target_food = "レタス";
const result = Object.entries(food).filter(function([category,food]){
return food.includes(target_food);
});
result.forEach(function([category, food]){
console.log(category);
});
//結果 => 野菜
結果
ただの凡ミスなんですが関数ごと特徴を理解して使うことが大事だなと思った次第です。