[JavaScript] アロー関数のサンプル

投稿日：2018年9月29日

アロー関数は、矢（アロー）のような見た目の「=>」を使用した関数です。

無名関数をさらに省略した書き方ができ、慣れるととてむスッキリとコードを書くことができます。

サンプルソース

例）計算する関数をアロー関数で記述したサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アロー関数サンプル</title>
<script>
//通常のFunction
var fc1 = function(a, b){
  return a + b;
}

//アロー関数
var fc2 = (a, b) => {
  return a + b;
};

//アロー関数（returnを省略）
var fc3 = (a, b) => a + b;

//アロー関数（引数を省略）
var fc4 = a => a * 2;

//アロー関数（値を返すだけ）
var fc5 = () => 100;

function test(){
  console.log(fc1(2,3));
  console.log(fc2(2,3));
  console.log(fc3(2,3));
  console.log(fc4(5));
  console.log(fc5());
}
</script>
</head>
<body>
<input type="button" value="ボタン" onclick="test();">
</body>
</html>

<!DOCTYPE html>

<head>

<title>アロー関数サンプル</title>

//通常のFunction

var fc1 = function(a, b){

return a + b;

}

//アロー関数

var fc2 = (a, b) => {

return a + b;

};

//アロー関数（returnを省略）

var fc3 = (a, b) => a + b;

//アロー関数（引数を省略）

var fc4 = a => a * 2;

//アロー関数（値を返すだけ）

var fc5 = () => 100;

function test(){

console.log(fc1(2,3));

console.log(fc2(2,3));

console.log(fc3(2,3));

console.log(fc4(5));

console.log(fc5());

}

</script>

</head>

<body>

</body>

</html>

（結果）: 5 5 5 10 100

解説

アロー関数は、ECMAScript6から追加された機能です。

執筆者：とら