JavaScript - アロー関数

アロー関数

アロー関数を使うと3つの点で関数の定義を簡略化できます。

  • function という単語を省略できる。
  • 引数がひとつの場合、() を省略できる。
  • 関数本体がひとつの式からなる場合、{}、それに return 文を省略できる。

アロー関数は無名関数になります。アロー関数を変数に代入することもできますが、名前の付いた関数を作ることはできません。以下の例では f1f2f3 の3つの関数を定義していますが、同じ定数に代入されている関数は同じ働きをします。

const f1 = function() { return "hello!"; }
const f1 = () => "hello!";

const f2 = function(name) { return `Hello, ${name}!`; }
const f2 = name => `Hello, ${name}!`;

const f3 = function(a, b) { return a + b; }
const f3 = (a,b) => a + b;
アロー関数

通常、名前付きの関数が必要な場合は、単純に普通の関数を宣言すればよいので、上のようにする必然性はありません。アロー関数がよく使われるのは無名関数を引数に渡したりする場合です。

アロー関数には通常の関数と大きく異なる点がひとつあります。それは this が他の変数と同様語彙的に (lexically) に束縛されるという点です。アロー関数では this を内部関数の内側で使うことができます。

const o = {
    name: 'Julie',
    greetBackwards: function() {
    
        const getReverseName = () => {
            console.log(this);
            // { name: 'Julie', greetBackwards: [Function: greetBackwards] }
            let nameBackwards = '';
            for(let i=this.name.length-1; i>=0; i--) {
                nameBackwards += this.name[i];
            }
            
            return nameBackwards;
        };
        
        return `${getReverseName()} si eman ym ,olleH`;
    },
};

console.log(o.greetBackwards()); // eiluJ si eman ym ,olleH
アロー関数

アロー関数にはあと2つ、通常の関数と小さな違いがあります。ひとつはオブジェクトのコンストラクタとしては使えないこと、もうひとつは特別な変数 arguments が使えないことです。

関連記事

JavaScript のまとめページはプログラミング JavaScript 入門を参照してください。

Category:
プログラミング
公開日:
更新日:
Pageviews:
17
Shares:
1
Tag:
JavaScript
hatebu icon
hatebu