ray88’s diary

お仕事で困ったとき用の自分用の覚書

JavaScript アロー関数

JavaScript 目次 - ray88’s diary
JavaScript 関数リテラルによる定義 - ray88’s diary
■アロー関数
 ・関数リテラルをより短縮し、スマートに記述可能。
 ・アロー関数による関数も変数や定数に代入でき、その代入式をアロー関数という
 ・アロー関数式により関数を代入した変数や定数は、その名前を関数として呼び出すことができる。
【構文①】

(仮引数1,仮引数2,・・・) => {
  //処理
}

【サンプルコード①】

function myFunction(){
  //アロー関数呼び出し
  fullName_('山田','太郎')
}
//アロー関数
const fullName_ =(lastName,FirstName) => {
  console.log(lastName,FirstName);
}


【構文②】
仮引数が1つの場合は、仮引数をかこむカッコは省略可能

仮引数1 => {
  //処理
}

【サンプルコード②】

function myFunction(){
  //アロー関数呼び出し
  fullName_('山田太郎')
}
//アロー関数
const fullName_ = strName => {
  console.log(strName);
}

※出力結果はサンプルコード①の出力結果と同じ
【構文③】
関数を含むステートメントが1つの場合はステートメントを囲む波カッコは省略可能

(仮引数1,仮引数2,・・・) => ステートメント

【サンプルコード③】

const sum = (num1, num2) => num1 + num2;
console.log(sum(1, 2)); // 結果: 3


【構文④】
関数を含むステートメントが1つ、かつreturn文である場合はreturnを省略して戻り値のみの記述にできる

(仮引数1,仮引数2,・・・) => 戻り値

【サンプルコード④】

const calcCircleArea = (radius) => Math.PI * radius ** 2;
console.log(calcCircleArea(3)); // 結果: 28.274333882308138

const getFullName = (firstName, lastName) => `${firstName} ${lastName}`;
console.log(getFullName('太郎', '山田')); // 結果: '太郎 山田'