アロー関数とは？ - Elsaの技術日記(徒然なるままに)

Reactを使っているとアロー関数を結構多用します。
このアロー関数の書き方がjavascript独特の書き方なので、特徴や使い方、利点とかを調べてまとめてみようと思います！！

■アロー関数とは
■アロー関数の特徴
■Reactでアロー関数を用いる理由
■最後に
■参考

■アロー関数とは

ES2015(ES6)から利用可能になった新しいJavaScriptの構文の一つ。
このES6のタイミングでletによる変数宣言やpromiseによる非同期処理の実装ができるようになったようです。
※ES6は大幅に構文追加があったようですね。

アロー関数は下記のように"=>"を用いて関数式を記載する方式です。

let arrowFunc = (val) =>{
　console.log(val);
}

arrowFunc('test');

アロー関数が実装可能になるまではこちらのように書く必要があったため、"function"を書かなくてよくなった分簡潔に書くことができるようになっていますね。

let Func = function(val){
　console.log(val);
}

Func('test');

■アロー関数の特徴

先ほど書いた通り、"function"を書かなくてよいので簡潔に書けるようになっているのですが、
今回のようにconsole.log()のみのように1行であればこちらのように括弧書きも不要になります。

let arrowFunc = (val) => console.log(val);

1行であればより簡潔に書けますので、すっきりしますね！！

さらに、アロー関数でthisを用いた場合には一般的なfunctionとは挙動が異なります。

例えば、、、
こちらのような書き方をした場合、

val = 'global parameter';

function OutputValue(){
    console.log(this.val);
}

let Obj = {
    val: 'Obj parameter',
    func: OutputValue
}

OutputValue.func();

実行結果はこちらのようになります。

Obj parameter

要するにfunc実行時にObjで設定したObj parameterがval変数にセットされ、console.logで出力されたことになります。

一方、こちらのような書き方をした場合、

val = 'global parameter';

let OutputValue = () => {
    console.log(this.val);
}

let Obj = {
    val: 'Obj parameter',
    func: OutputValue
}

OutputValue.func();

実行結果はこちらのようになります。

global parameter

先ほどの結果と変わっていることがわかります。
どうやらアロー関数で宣言した関数はコールされた時点でのthisを確定させてしまうようです。
呼び出し元がどこであろうと同じ結果が得られる、ということですね。

■Reactでアロー関数を用いる理由

ここまでで、アロー関数とthisの値が普通の関数と異なることがわかりました。

Reactではこちらのようにコールバック関数をアロー関数で書きます。

export default class Calc extends Component  {
～～
onInput = (e) => {
    const {num} = this.state;
    var calcNum = 0;
    if(num == 0 ){
        calcNum = e.target.value;
    }else{
        calcNum = Number(num)  + e.target.value;
    }
    
    console.log("calcNum is " + calcNum);

    this.setState({
        num: calcNum
    });
    document.getElementById("CalcResult").value = calcNum;
}
～～

こちらの関数で使用されるthisはアロー関数で記載されるので、thisの値はCalcになります。

もしアロー関数で書かなかった場合、すなわちこちらのように実装した場合、

export default class Calc extends Component  {
～～
fuintion onInput (e){
    const {num} = this.state;
    var calcNum = 0;
    if(num == 0 ){
        calcNum = e.target.value;
    }else{
        calcNum = Number(num)  + e.target.value;
    }
    
    console.log("calcNum is " + calcNum);

    this.setState({
        num: calcNum
    });
    document.getElementById("CalcResult").value = calcNum;
}
～～

thisは未定義になってしまうため、これで動かそうとするとエラーになってしまいます。

これらのことから、
アロー関数を用いることでthisを定義しているclassで明確に定義することができるようになるため、コールバック関数はアロー関数で書くことが多くなります。