More than 3 years have passed since last update.

アロー関数の思わずぴえんしちゃった記法

Last updated at 2020-02-17Posted at 2020-02-16

はじめに

社内SEからJavaScriptを主に使用するWeb系企業を転職をして一ヶ月。
会社で使うわけではないですが、Reactを勉強する上でJavaScript（ES６）の記法を知らないと
頭がぐちゃぐちゃになる気がしたので、ちょっとだけ記事としてまとめたいと思います。

こいつです。

アロー関数

「そんなこともわからないのなら辞めてしまえ」という声が聞こえてきそう。。。
基本的なことはわかっているのですが、ちょっと複雑にされると

「？？？？？？？？？？？」

となるのです。

基本は簡単です。

const addFunc = function(a, b) {
    return a + b;
}

const result = addFunc(1, 2);
console.log(result);

上記が今までの記法。

ES６だとアロー関数が使用できます。

const addFunc = (a, b) => {
    return a + b;
}

const result = addFunc(1, 2);
console.log(result);

returnを書くのが面倒な人のために、

const addFunc = (a, b) => (
    a + b
)

const result = addFunc(1, 2);
console.log(result);

戻り値がオブジェクトの場合は、

const addFunc = (a, b) => ({
    result: a + b
})

const result = addFunc(1, 2);
console.log(result);

ここまでは簡単。

お次。

const addFunc = a => b => {
    return a + b
}

ぴえん
矢印２つある
ぴえん

【コメントより】
これはアロー関数で高階関数（カリー化）を定義しています。

const addFunc = a => b => {
    return a + b
}

const addTest = addFunc(1);

const result = addTest(2)
console.log(result);

これは、aという引数を持たせた状態でaddTestに関数を代入します。
う〜ん、使いどころがイマイチわからない。

恐らく、exportするファイル内で知ることのできる値と知ることのできない値を引数に使用したい場合に使うのかな？
上記の例でいうと、

「aは今わかるけど、bはstore内の値を使いたいから今は知らんなぁ。。。export先でならわかるけどそっちではaがわからんなぁ。。。」

みたいな状況で使うのかなと思っています。
詳しい人教えてください。

次は分割代入についてまとめたいです。
以上！
ご指摘等あればよろしくお願いいたします。
ぴえん

ぴえんの正式な絵文字をQiitaでも使いたい