【JavaScript】アロー関数の定義の仕方

アロー関数とは

従来の関数定義を簡略化した書き方です

▼従来

function func1(str) {
    console.log(str);
}
func1("func1です");

▼アロー関数

const func2 = (str) => {
    console.log(str);
}
func2("func2です");

アロー関数特有のルール

引数が一つの場合、()が省略できます

const func2 = (str) => {
    console.log(str);
}

▼()省略

const func2 = str => {
    console.log(str);
}

関数内の処理が1行の場合「{}」と「return」省略できます

▼「{}」省略

const func2 = str => console.log(str);

▼「{}」と「return」省略

func3 = x => { return x * 2};

// 「{}」と「return」省略
func4 = x => x * 2;

▼オブジェクトを返却する関数で、1行の式でかけるがオブジェクト定義が複数行になってしまう場合

()で囲う方法があります

const func6 = (num1, num2) => ({
    hoge: num1,
    huga: num2,
});
console.log(func6(10, 20));

※Reactでよく使う書き方です