[JavaScript]アロー関数の書き方

従来のJSの関数

function func1(str) {
  return str;
}

console.log(func1('func1です'));



const func2 = function (str) {
  return str;
};
console.log(func2('func2です。'));

アロー関数

// アロー関数の形
//     ( ) => {  }



// アロー関数　・基本形
const func3 = (str) => {
  return str;
};

console.log(func3('アロー関数の基本的な書き方です。'));




// アロー関数　・引数が一つの場合は()を省略できる
const func4 = str => {
  return str;
};

console.log(
  func4('アロー関数の引数１つの時に（　）が省略パターンです。覚えてね。')
);



// アロー関数　・関数の中身が単一式の場合 returnと{  }が 省略できる。そのため続けて１行で書ける。
const func5 = (str) => str;

console.log(
  func5('アロー関数の中身が単一式のため、{}波括弧とreturnが省略されています')
);

アロー関数の練習

// アロー関数の練習1
const funcPractice = (val1, val2) => {
  return val1 + val2;
};


console.log(funcPractice(1, 2));



// アロー関数の練習2　・引数２つでも1行でかけた。それは関数の中身が単一式だから。
const funcPractice2 = (number1, number2) => number1 + number2;

console.log(funcPractice2(1, 2));




// アロー関数の練習3 
//　　関数の結果として何かしらのオブジェクトを返却する関数定義
//   オブジェクトの返却は単一行で書けるが、オブジェクトの定義自体が複数行になってしまう時、
//　　(   )で囲ってあげて１つの返却として扱えるので、
//   アロー関数の　{  } とreturn　の省略ができる。
const funcPractice3 = (num1, num2) => ({
  age: num1,
  weight: num2,
});

console.log(funcPractice3(20, 50));



// 上記はこれと同じ
const funcPractice4 = (num1, num2) => ({ age: num1, weight: num2 });