javascript WEB WEBフロントエンド開発

Javascriptのアロー関数について

投稿日:2017年11月29日 更新日:

 

アロー関数

    • ES2015(ES6)の新構文の一つ
    • 無名関数の省略記法。
    • 無名関数とアロー関数とは完全に等価というわけではないため、取り扱いにはいくつかの注意が必要。
    • =>(矢)を使って関数リテラルを記述
    • (引数,...)=>{...関数の本体...}

基本構文

//従来の関数式
var fn = function (x) {console.log(x);};

//上記をアロー関数に置き換えたもの
var fn = (x) => {console.log(x);};

//関数の引数が複数ある場合はカンマで区切ります
var fn = (x, y, z) => {console.log(x, y, z);};

//関数の引数が1つのみならば引数部分の丸括弧を省略できます
var fn = x => {console.log(x);};

//引数が無い場合は丸括弧は省略できません
var fn = () => {console.log('hoge');};

 

通常の無名関数との違い

  • thisの参照が関数定義時に決まる(thisの扱いに注意)
  • argumentsオブジェクトを持たない
  • コンストラクタとして振る舞うことはできない

 

 

スポンサーリンク

スポンサーリンク

-javascript, WEB, WEBフロントエンド開発

執筆者:

関連記事

TypeScriptとSystemJSを使ったWEBフロントエンド開発

当セクションでは前回の『SystemJSを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、モジュール管理ツールとしてのSystemJSの機能を把握したいと思います。以前に紹介し ...

(webpack2)TypeScriptとWebpackを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

TypeScriptのモジュールについて

モジュールについてまとめました。 (内部モジュール) 共通の関数などをグローバル空間に記載したくない場合などに使用する。   (外部モジュール) 別ファイルとして外部にある機能を利用する仕組 ...

Node.jsのrequire関数のモジュール読み込みについて

Node.js のモジュール機構について(JavaScript の場合) ディレクトリ構造 Node.js のパッケージマネージャーである npm を使う場合、プロジェクト ディレクトリは以下のような ...

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...