0
0

More than 3 years have passed since last update.

アロー関数を理解していなくてツマッタ。

Posted at

はじめに

アロー関数に慣れてアロー関数ばかりを書いて、ふと通常の関数に戻して処理をしてみたら動かなくなった。

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);
  });

//結果 => 野菜

結果

ただの凡ミスなんですが関数ごと特徴を理解して使うことが大事だなと思った次第です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0