LoginSignup
4
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-02-16

はじめに

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

意味がわからなかった記法

こいつです。

:cry:アロー関数:cry:

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

「???????????」

となるのです。

アロー関数

基本は簡単です。

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

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

上記が今までの記法。

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

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
}

ぴえん:cry:
矢印2つある:cry:
ぴえん:cry:

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

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がわからんなぁ。。。」

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

終わり

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

ちなみに

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

4
1
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1