javascript アロー関数のサンプル
- 2020.08.19
- javascript
- javascript
ES2015（ES6）から利用できるJavaScriptの構文であるアロー関数のサンプルコードを記述してます。アロー関数を使用することにより「function」を記述することがなくので、より簡潔にコードを書くことができます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 84.0.4147.105
※windows10にApacheのインストールはこちら
アロー関数サンプル
以下は、通常の関数をアロー関数で記述したサンプルとなります。
通常の関数
|
1 2 3 4 5 6 |
function sample(a, b){ return a + b; } <出力結果> console.log(sample(1,2)); // 3 |
アロー関数に変更すると、以下のように記述することができます。
|
1 2 3 4 5 6 |
const sample = (a, b) => { return a + b; }; <出力結果> console.log(sample(1,2)); // 3 |
即時関数として利用
以下のように、すぐ実行できる即時関数としても、利用できます。
|
1 |
((a, b) => { console.log(a + b); })(1, 2); // 3 |
return省略
return命令を省略することも可能です。
|
1 2 3 4 |
const sample = (a, b) => a + b; <出力結果> console.log(sample(1,2)); // 3 |
ただし、オブジェクト返す場合は、（ ）がなければエラーとなります。
|
1 2 3 4 5 6 |
const sample = (a, b) => { x : a , y : b }; <出力結果> Uncaught SyntaxError: Unexpected token ':' constt sample = (a, b) => ({ x : a , y : b }); |
（ ）を使用するとエラーにはなりません。
|
1 2 3 |
const sample = (a, b) => ({ x : a , y : b }); console.log(sample(1,2)); // {x: 1, y: 2} |
改行もできます。
|
1 2 3 4 |
const sample = (a, b) => a + b console.log(sample(1,2)); // 3 |
ただし「=>」の前で改行するとエラーとなります。
|
1 2 3 4 |
const sample = (a, b) => a + b // Uncaught SyntaxError: Unexpected token '=>' |
引数が1つ
引数が1つしかない場合は、（）も省略して記述することができます。
|
1 2 3 4 |
const sample = a => a * 3; <出力結果> console.log(sample(1)); // 3 |
引数なし
引数がない場合は、以下のように記述することができます。
|
1 2 3 4 |
const sample = () => console.log('Hello world'); <出力結果> sample(); // Hello world |
厳格モード
厳格モードでもエラーにはなりません。
|
1 2 3 |
'use strict'; const sample = () => console.log('Hello world'); |
サンプルコード
filterなどのコールバック関数に使用すると、コードを短縮化することができます。
通常の関数
|
1 2 |
[1, 2, 3, 4, 5].filter(function (n) { return n > 2 }); // [3, 4, 5] |
アロー関数
|
1 2 |
[1, 2, 3, 4, 5].filter(n => n > 2); // [3, 4, 5] |
その他は下記に記載してます。
thisの参照先の違い
thisの参照先
アロー関数と通常の関数では、呼び出し方によっては、thisの参照先が異なります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
this.str = 'a'; function hoge() { console.log(this.str); } const foo = () => { console.log(this.str); }; hoge(); // a foo(); // a const func = { str: 'b', f: hoge }; const arrowfunc = { str: 'c', f: foo }; func.f(); // b arrowfunc.f(); // a |
アロー関数の場合は「宣言された時点で、thisが確定」され、
通常の関数は「宣言された時点では、thisが何かは決まってない」ので呼び出し元により、変わります。
例えば以下のように、通常の関数の場合は、宣言された元のオブジェクトが参照されますが、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
this.str = 'hello'; function hoge(){ console.log(this.str); } let obj1 = { str: 'obj1です', f: hoge } let obj2 = { str: 'obj2です', f: hoge } obj1.f(); // obj1です obj2.f(); // obj2です |
アロー関数の場合は、宣言された時点でthisが確定されます。ようするにアロー関数はthisを持っていないことになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
this.str = 'hello'; const foo = () => { console.log(this.str); } let obj1 = { str: 'obj1です', f: foo } let obj2 = { str: 'obj2です', f: foo } obj1.f(); // hello obj2.f(); // hello |
ちなみに、「use strict」で厳格モード時は以下の場合は、エラーとなります。
|
1 2 3 4 5 6 7 8 9 10 |
'use strict'; this.str = 'a'; function hoge() { console.log(this.str); } hoge(); // Uncaught TypeError: Cannot read property 'str' of undefined |
アロー関数は、thisを持たないので、以下のようなコードを実行するとwindowオブジェクトを参照します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
console.log(`グローバルの${this}`); // window const func = { f: function () { console.log(`通常の${this}`); } }; const arrowfunc = { f: () =>console.log(`アローの${this}`) }; func.f(); // Object arrowfunc.f(); // window |
実行結果
addEventListenerに使用する
例えば「onclick」イベントを通常の関数とアロー関数で記述した場合は「this」の参照先が異なります。
通常の関数の場合は、ハンドラー（コールバック関数）の中の「this」の値は要素への参照となるため「button」そのものが参照されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* html */ <button id="main">実行</button> /* javascript */ document.getElementById('main').addEventListener('click', function () { console.log(this); } ) // 上記と同様 document.getElementById('main').onclick = function(){ console.log(this); }; |
実行結果（通常の関数）
アロー関数の場合は、windowオブジェクトが参照されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* html */ <button id="main">実行</button> /* javascript */ document.getElementById('main').addEventListener('click', () => { console.log(this); } ) // 上記と同様 document.getElementById('main').onclick = () => { console.log(this); }; |
実行結果（アロー関数）
なので、アロー関数は通常の関数のように、windowオブジェクトが参照する際に、bind()メソッドを使用しなくてもよくなります。
|
1 2 3 4 5 6 7 8 9 |
/* html */ <button id="main">実行</button> /* javascript */ document.getElementById('main').onclick = function(){ console.log(this); }.bind(this); |
実行結果（通常の関数 bind使用時）
コールバック関数に利用
また、アロー関数はコールバック関数に利用すると同様にbind()メソッド使用しなくてもよくなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const hoge = function (name) { this.name = name; }; hoge.prototype.func = function () { // 通常関数なのでthisには yamadaがセットされる console.log(this); // hoge {name: "yamada"} // アロー関数なので、thisを持たないので外側のthisを参照する setInterval(() => { console.log(this); // hoge {name: "yamada"} console.log(this.name); // yamada }, 1000); }; // 関数をnewする (new hoge('yamada')).func(); |
実行結果（アロー関数）
通常の関数の場合は、thisを持つので、この場合はwindowオブジェクトを見ます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const hoge = function (name) { this.name = name; }; hoge.prototype.func = function () { console.log(this); // hoge {name: "yamada"} // 関数はthisを持つので、この場合はwindowオブジェクトを見る setInterval(function(){ console.log(this); // windowオブジェクトを見る console.log(this.name); // 値なし }, 1000); }; // 関数をnewする (new hoge('yamada')).func(); |
実行結果（通常の関数）
その他の違い
newできない
アロー関数は、newすることができません。コンストラクタとして使用することができません。
|
1 2 3 4 5 6 7 |
function hoge() { console.log('Hello world'); } const foo = () => console.log('Hello world'); new hoge(); new foo(); // Uncaught TypeError: foo is not a constructor |
なので、以下のような使用方法はできません。
|
1 2 3 4 5 6 7 |
function hoge( name ){ this.name = name; }; console.log( new hoge( 'yamada' ) ); // hoge {name: "yamada"} const foo = ( name ) => { this.name = name; }; console.log( new foo( 'yamada' ) ); // Uncaught TypeError: foo is not a constructor |
継承できない
継承することもできません。
|
1 2 3 4 5 |
function hoge() {} const foo = () => {} class Hoge extends hoge {} class Foo extends foo {} // Uncaught TypeError: Class extends value () => {} is not a constructor or null |
arguments使用できない
argumentsを使用することもできません。
|
1 2 3 4 5 6 7 8 |
function hoge(a, b) { let a = arguments[0] } const foo = (a, b) => {let a = arguments[0]} hoge(1,2); foo(1,2); // Uncaught ReferenceError: arguments is not defined |
ie11でエラー
ie11ではアロー関数は、構文エラーとなります。
|
1 2 3 4 |
function hoge() { console.log('Hello world'); } const foo = () => console.log('Hello world'); |
アロー関数のブラウザ対応状況はこちらで確認できます。
また無名関数であれば、ie11でも利用することは可能です。
|
1 2 3 |
const foo = function() { console.log('Hello world')} foo(); |
呼び出す順番
アロー関数は、コードを記述してからでないと呼び出せません。
|
1 2 3 4 5 6 7 8 9 |
hoge(); function hoge() { console.log('Hello world'); } foo(); // Uncaught ReferenceError: Cannot access 'foo' before initialization const foo = () => console.log('Hello world'); |
無名関数も同様なので、変数の宣言順序によるエラーとなります。
|
1 2 3 |
bar(); // console.html:30 Uncaught ReferenceError: Cannot access 'bar' before initialization const bar = function(){console.log('Hello world')}; |
prototypeプロパティ
アロー関数に、prototypeプロパティはありません。
|
1 2 3 4 5 |
function hoge() {} const foo = () => {} console.log(typeof hoge.prototype) // object console.log(typeof foo.prototype) // undefined |
同じ名前の引数
アロー関数の場合は、同じ名前の引数を使用することはできません。
|
1 2 3 4 5 6 7 8 9 10 11 |
function hoge(a, a){ return a + a; } console.log(hoge(1,2)); // 4 const foo = (a, a) => { return a + a; }; // Uncaught SyntaxError: Duplicate parameter name not allowed in this context console.log(foo(1,2)); |
ちなみに、「use strict」で厳格モード時は通常の関数でもエラーとなります。
|
1 2 3 4 5 |
'use strict'; function hoge(a, a){ return a + a; } // Uncaught SyntaxError: Duplicate parameter name not allowed in this context |
アロー関数を使用しない方がいいパターン
オブジェクト内でのthisの参照
以下のように、thisをオブジェクト内のメソッドで参照している場合は
「NAN」が返ります。
|
1 2 3 4 5 6 7 8 9 10 |
const obj = { num: 5, f1: (x) => 5 * x, f2: function (x) { return this.num * x; }, f3: (x) => this.num * x, }; console.log(obj.f1(3)); // 15 console.log(obj.f2(3)); // 15 console.log(obj.f3(3)); // NAN |
prototypeメソッドでも同じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const obj = function() { this.num = 5; }; obj.prototype = { f1: (x) => 5 * x, f2: function (x) { return this.num * x; }, f3: (x) => this.num * x, }; const Obj = new obj; console.log(Obj.f1(3)); // 15 console.log(Obj.f2(3)); // 15 console.log(Obj.f3(3)); // NAN |
イベント発生時に自身を操作したい場合
「onclick」イベント時に、クリックした要素自体の色を変えたい時などの場合に、thisを使用するとアロー関数の場合はエラーとなります。
|
1 2 3 |
document.getElementById('main').onclick = () => { this.style.backgroundColor = "orange"; }; |
実行結果（アロー関数）
通常の関数の場合は、正しく動作します。
|
1 2 3 4 5 6 7 8 9 |
/* html */ <button id="main">実行</button> /* javascript */ document.getElementById('main').onclick = function(){ this.style.backgroundColor = "orange"; }; |
実行結果（通常の関数）
-
前の記事
ubuntu20.04.1 jettyをインストールする手順 2020.08.19
-
次の記事
mysql8 クエリでバージョンを確認する方法 2020.08.19