これこれアロー関数！

こんにちは！サキナオコです^o^
肌寒いですね。

さあ今日も進みましょう！

無名関数（関数式）にはもう一つ別の書き方があり
それがアロー関数！来た！

以前のJavaScript学習で唯一覚えているのはこの矢印の形⇒だけだったという…

アロー関数式(arrow function expression)

const 関数名 = (引数) => {
  // 中身
};

const 関数名 = (引数) => 式;  // 式の計算結果が戻り値になる

アロー関数は中身が “式” で書けるときは { } を省略できる。{ } を省略すると return 文は書けなくなるが、式の計算結果がそのまま戻り値となる。

はぁそうなんですか…(本日も思考停止に陥る)

式であればいいということは、三項演算子を使えば条件分岐もワンライナー（1 行）で記述できる。

逆に、map メソッドの処理が文（複数行）になるときは { } で囲う。

ただし、新しい配列の要素にしたい値を return で指定する必要がある。

…ね、眠…

アロー関数で普通に関数宣言した例

const sayHello = (who) => `Hello ${who}!!`;  // 関数宣言

const msg = sayHello('World');  // 関数呼び出し
console.log(msg);  // → Hello World!!

同じ関数宣言を function 関数式で書く

const sayHello = function(who) {
  return `Hello ${who}!!`;
}

関数宣言や関数式ではアロー関数を積極的に使うとよい。

いくつかの用途ではアロー関数は使えない。その一つがメソッドの定義。

…眠い。。ChatGPTさああ～ん！

---

ChatGPTにアロー関数のわかりやすい例を聞いてみました。

---

アロー関数の基本的な構文を使ったわかりやすい例を示します。例えば、数値を2倍にする関数をアロー関数で書く場合は、以下のように記述できます。

const double = (num) => {
  return num * 2;
};

// 使用例
console.log(double(5)); // 出力: 10

この例では、doubleという名前の関数を定義し、numという引数を受け取って、その値を2倍にして返しています。

また、アロー関数は処理が1行だけであれば、return文を省略し、より簡潔に書くことができます。

const double = (num) => num * 2;

// 使用例
console.log(double(5)); // 出力: 10

このようにアロー関数を使うことで、簡潔な構文で関数を定義でき、コードがより読みやすくなります。

---

ほうほう、なるほど。

いいですね！簡潔版！カッコとreturnを取っ払うのですね！こういうのが好きです。

メソッド

メソッドは オブジェクト.メソッド() の形を取るだけで、他は関数と全く同じように振る舞う。

メソッドはオブジェクトのプロパティに関数式を指定したもの。

オブジェクトのプロパティにはほとんど何でも指定でき、関数式も指定することができる。

関数式が与えられたプロパティは、呼び出すときに「オブジェクト.プロパティ名()」と後ろに ( ) を付けることでメソッドとなる。

キーワード function を省略して書ける。この書き方が推奨される。

関数とメソッドの違いとして、メソッドでは同じオブジェクト内のプロパティの値が使える。使いたいプロパティ名の前に this. と付ける。同様に、同オブジェクト内の他のメソッドも this を付けて呼び出せる。

メソッド定義にアロー関数を使用した場合、この this を使ったプロパティやメソッドの指定ができない。
メソッド定義では基本的に function 関数式を使う。しかし、その他の場面ではアロー関数を使うほうが一般的。
混乱を避けるためにも function を省略したメソッド特有の記法を使うのがよい。

---

途中眠くなりそうでしたがなんとか耐えました。寝ます。おやすみなさい！