無名関数、アロー関数について

概要

クソ雑魚おじさんなので、無名関数とかアロー関数とかいまいちわからないのでまとめる。

私（おじさん）の知っている関数

function func1() {
    console.log("Hello!");
}

function func2 (arg1, arg2) {
    func1();
    return arg1 * arg2;
}

console.log(func2(2, 3));

Hello!
6

やったね！

無名関数

若い子は、これを省略するらしい
まったく…

func1 = function () {
    console.log("Hello!");
}

func2 = function(arg1, arg2) {
    return arg1 * arg2;
}

func1();
console.log(func2(2, 3));

Hello!
6

アロー関数

え！functionも書くのダルいって！？
returnもいらないって！？えぇ！！！

func1 = () => console.log("Hello!");
func2 = (arg1, arg2) => arg1 * arg2;

func1();
console.log(func2(2, 3));

Hello!
6

どういう時に役立つのか？

javaScriptの性質上、ボタンクリックした時に初めて動作させたいとかある。

↓だめなやつ

function sayHello () {
    alert("Hello!");
}

let btn = document.getElementById("btn");
btn.onclick = sayHello()

こんな風にしちゃうと、6行目でsayHello()が実行されちゃうので、
無名関数で書かざるを得ない…

↓無名関数使ったやつ

let btn = document.getElementById("btn");
btn.onclick = function () { alert("hello!")}

言われてみれば、funcitonとか{}とか冗長なので…

↓アロー関数使ったやつ

let btn = document.getElementById("btn");
btn.onclick = () => alert("Hello!");

どうせ省略するならガッツリ省略しちゃおうよ！ってことで

↓最終形

document.getElementById("btn").onclick = () => alert("Hello!");

こんな感じになる。
すごくシンプル。しゅごい…

以上