DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. アロー関数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.16】

アロー関数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.16】

今回はECMAScript 2015で導入されたアロー関数を学びます。
すでに実戦のコードで多用されている書き方です。

var my_function = value => value;

太字の部分が関数定義です。
あまりにも簡潔すぎて知らなければ関数にはみえないかもしれません。

従来の関数式で書いた場合、以下の書き方に相当します。

var my_function = function(value) {
	return value;
};

アロー関数の書式

アロー関数は引数の数や本体の行数によって、書き方のバリエーションがあります。

引数が2つ以上の場合

引数部分に丸括弧をつけます。

var multiply = (n1, n2) => n1 * n2;

引数が1つの場合

引数部分の丸括弧()が省略できます。

var square = n1 => n1 * n1;

引数が0の場合

空の丸括弧が必要です。

var my_function = () => "Taro";

関数本体がreturn文一行でない場合

var multiply = (n1, n2) => {
	if (n1 > 5) {
		n1 = 5;
	}
	return n1 * n2;
};

のように関数本体に波括弧{}をつけます。

関数本体がreturn文一行の場合

波括弧{}returnが省略できます。

var multiply = (n1, n2) => n1 * n2;

関数の引数に関数式を渡す時に便利

例えばforEach()、map()、sort()、filter()、reduce()のようなArray.prototypeのメソッドの引数に関数式を渡す時にアロー関数は便利です。

var list = [1, 2, 3, 4, 5].map(n => n * 2);

従来は下記のように関数式を渡していました。

var list =[1, 2, 3, 4, 5].map(function(n) {
	retrun n * 2;
});

アロー関数はコンストラクタ関数としては使えない

コンストラクタ、オブジェクトを参照する変数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.13】」でコンストラクタとしての関数を学びました。

アロー関数はコンストラクタ関数として使うことができません。

アロー関数はargumentsオブジェクトが暗黙に渡されない

ややマニアックな論点なのでとばして大丈夫です。

関数宣言や関数式ですと、argumentsオブジェクトがという配列に似たオブジェクトが暗黙に渡され、引数の数を可変で受け取ることができました。

function hello() {
    let message = "";

     for (var v of arguments) {
      message += v + "さん。";
    }

    return message;
}

str = hello("太郎", "次郎", "三郎");
console.log(str);

実行結果:

太郎さん。次郎さん。三郎さん。

アロー関数ではargumentsオブジェクトは暗黙に渡されないので使えません。

let hello = object => {
  let message = "";
  
  for (var v of arguments) {
    message += v + "さん。";
  }
  
  return message;
}

str = hello("太郎", "次郎", "三郎");
console.log(str);

これを実行すると「ReferenceError: arguments is not defined」のエラーがでます。
argumentsは未定義という意味です。

もし関数の外にargumentsという名前の変数がある場合は、関数内のargumentsはそれを指してしまいます。

let arguments = ["イチゴ", "メロン", "バナナ"];

let hello = object => {
  let message = "";

  for (var v of arguments) {
    message += v + "さん。";
  }

  return message;
}

str = hello("太郎", "次郎", "三郎");
console.log(str);

実行結果:

イチゴさん。メロンさん。バナナさん。

これは意図しない結果です。

アロー関数で可変の引数を受け取りたい場合は、「関数 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.9】」で学んだRest Parametersを使います。

let hello = (...names) => {
  let message = "";
  
  for (var v of names) {
    message += v + "さん。";
  }
  
  return message;
}

str = hello("太郎", "次郎", "三郎");
console.log(str);

実行結果:

太郎さん。次郎さん。三郎さん。

アロー関数はthis参照を固定する

ここは中級者以上の論点で、未学習の内容を含んでいます。
いまの段階ではとばしてください。

関数が呼びだされるときは、thisオブジェクトが暗黙にわたされます。このthisが実際に何を参照するかは関数の呼び出し方で変化します

例えばaddEventListerで関数を定義する場合です。

let my_handler = {
	addEvent: function () {
		document.addEventListener("click", function (e) {
			this.displayNode(e.target);
		}, false)
	},
	
	displayNode: function (node) {
		console.log(node);
	}
}
my_handler.addEvent();

上記のコードをWebブラウザで実行して、ページのどこかをクリックすると、「 this.displayNode is not a function」というエラーメッセージがでます。この場合、this.displayNodethismy_handlerが参照するオブジェクトを指さずに、Webブラウザでクリックされた箇所のDOMのNodeオブジェクトを指します。

上記の文をアロー関数で置き換えます。

let my_handler = {
	addEvent: function () {
		document.addEventListener("click", e => this.displayNode(e.target), false)
	},
	
	displayNode: function (node) {
		console.log(node);
	}
}
my_handler.addEvent();

今度は意図通りに動作します。

オブジェクト内部のdisplayNode関数が呼ばれ、クリックされた箇所のDOMのNodeが表示されます。アロー関数内のthisは固定でmy_handler変数が参照するオブジェクトを指すので、確実にthis.displayNodeが呼び出すことができます。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
ディレクター・Web制作者
ON VISITINGを制作・運営。
お問い合わせ