アロー関数（Arrow）の使い方と注意点‼

投稿日 : 2022年02月16日 更新日 :

関数の書き方各種

  function name(引数){ }
  const name = function(引数) { }
  const name = (引数) => { }

アロー関数の書き方

  const properWeight = function(tall){
    return (tall**2) * 22;
  }

  const properWeight = (tall) => {
    return (tall**2) * 22;
  }

  console.log(properWeight(1.76));
  // 結果 : 68.1472  (身長1.76mの適正体重)

  const properWeight = tall => (tall**2) * 22;

引数が2つ以上の場合

  const bmi = (weight, tall) => weight / tall**2;
            
  console.log(bmi(66, 1.76));
  // 結果 : 21.306818181818183  (体重66㎏、身長1.76mのBMI)

引数がない場合

  const properWeight = () => 66 / (1.76**2);

アロー関数内の"this"

function

  document.getElementById("btn1").addEventListener("click", function(){
    console.log(this);
  });

アロー関数

  document.getElementById("btn2").addEventListener("click", () => {
    console.log(this);
  });

まとめ