情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

ECMAScript 6の新機能(22)アロー関数

ECMAScript 6でアロー関数が追加されました。

アロー関数は無名関数の一種で、従来の無名関数より簡潔に定義することができ、幾つかの点で従来の無名関数とは異なります。

アロー関数は下のように定義します。

C:\work\node>node
> var f1 = () => { return 'f1'; }
undefined
> var f2 = (x) => { return 'f2'; }
undefined
> var f3 = (x, y) => { return 'f3'; }
undefined
> f1()
'f1'
> f2()
'f2'
> f3()
'f3'

引数が1つである場合には引数リストの()を省略することができます。

> var f4 = x => { return 'f4'; }
undefined
> f4()
'f4'

ただし、配列やオブジェクトの分解を使用する場合や引数にデフォルト値を指定する場合には省略することができません。

> var f5 = ([x, y] = [100, 200]) => { return 'f5'; }
undefined
> f5()
'f5'
> var f6 = (x = 100) => { return 'f6'; }
undefined
> f6()
'f6'

関数の内容がreturn文のみである場合には関数の内容を囲む{}returnを省略することができます。

> var f7 = x => 'f7'
undefined
> f7()
'f7'

従来の無名関数との違い

従来の無名関数の場合、関数中でのthisなどの変数の値は関数の呼び出しに応じて決まります。

C:\work\node>node
> class C {
... constructor () {
..... this.foo = 100;
..... this.bar = 200;
..... }
... f () {
..... return function () {
....... console.log(this.foo);
....... console.log(this.bar);
....... }
..... }
... }
[Function: C]
> var c = new C()
undefined
> c.foo
100
> c.bar
200
> c.f()()
TypeError: Cannot read property 'foo' of undefined
    at repl:8:17
    at repl:1:6
    at REPLServer.defaultEval (repl.js:272:27)
    at bound (domain.js:280:14)
    at REPLServer.runBound [as eval] (domain.js:293:12)
    at REPLServer.<anonymous> (repl.js:441:10)
    at emitOne (events.js:101:20)
    at REPLServer.emit (events.js:188:7)
    at REPLServer.Interface._onLine (readline.js:219:10)
    at REPLServer.Interface._line (readline.js:561:8)

アロー関数の場合、関数中でのthisなどの変数の値はアロー関数を取り囲むスコープの変数の値となります。

C:\work\node>node
> class C {
... constructor () {
..... this.foo = 100;
..... this.bar = 200;
..... }
... f () {
..... return () => {
....... console.log(this.foo);
....... console.log(this.bar);
....... }
..... }
... }
[Function: C]
> const c = new C()
undefined
> c.foo
100
> c.bar
200
> c.f()()
100
200
undefined
pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-ecmascript 2015, ecmascript 6, Javascript