JavaScript アロー関数のサンプル

JavaScriptのアロー関数のサンプルです。

目次

アロー関数

=>

step1 無名関数

アロー関数と比較するための無名関数のサンプルです。

<script>

const test1 = function(a){ //無名関数
	return(a + "です");
}
console.log(test1("赤")); // 赤です

</script>

3-5行目は無名関数です。function(a)のあとに関数名がないので無名関数と呼ばれます。
6行目は、関数が実行されて文字列が表示されます。

step2 アロー関数(1)

アロー関数のサンプルその1です。
上記の無名関数との差異は、functionを削除しアロー(=>)を使用しました。

<script>

const test1 = (a) => { //
	return(a + "です");
}
console.log(test1("赤")); // 赤です

</script>

3-5行目はアロー関数式です。
3行目はfunctionがありません。また引数の後に=>が追加されています。
6行目は、関数が実行されて文字列が表示されます。

step3 アロー関数(2)

アロー関数のサンプルその2です。
上記のアロー関数との差異は、引数を囲んでいる()を削除しました。

<script>

const test1 = a => { //
	return(a + "です");
}
console.log(test1("赤")); // 赤です

</script>

3-5行目はアロー関数式です。
3行目は引数を囲んでいる()がありません。引数が一つのときのみ可能です。
6行目は、無名関数が実行されて文字列が表示されます。

step4 アロー関数(3)

アロー関数のサンプルその3です。
上記のアロー関数との差異は、引数を囲んでいる()を削除しました。

<script>

const test1 = a => a + "です";

console.log(test1("赤")); // 赤です

</script>

3行目はアロー関数式です。
3行目は戻り値を返すreturnと{}と;がありません。命令がひとつのときのみ可能です。

関連の記事

JavaScript 関数のサンプル
JavaScript 再帰関数のサンプル
JavaScript 関数のデフォルト引数のサンプル
JavaScript 無名関数と即時関数のサンプル
JavaScript クロージャのサンプル
JavaScript 引数/戻り値が関数のサンプル(高階関数)
JavaScript argumentsオブジェクトとcalleeのサンプル

△上に戻る