JavaScriptのアロー関数のサンプルです。
目次
サンプル | アロー関数とは |
STEP0 無名関数(比較用) / STEP1 アロー関数1 | |
STEP2 アロー関数2 / STEP3 アロー関数3 | |
アロー関数からオブジェクトを返す場合 |
アロー関数とは
- 無名関数をアロー関数で書くことができます。
- 関数のfunctionの部分を短く記述できる構文です。
- アロー関数は、引数を与えると値を返します。
- アローとは矢(=>)を意味します。
- アロー関数は、ECMAScript2015からできるようになりました。
- ※JavaScriptは変数に関数を代入できます。その場合、実行は変数とかっこ()で実行できるので関数名は不要です>無名関数。
STEP0 無名関数(比較用)
アロー関数と比較するための無名関数です。function(a)のあとに関数名がありません。
<script>
const test1 = function (a) { //無名関数
return a + "です";
};
console.log(test1("赤")); // 赤です
</script>
STEP1 アロー関数1
上記の無名関数との差異は、functionを削除しアロー(=>)を追加しました。
<script>
const test1 = (a) => {
return a + "です";
};
console.log(test1("赤")); // 赤です
</script>
STEP2 アロー関数2
上記のアロー関数との差異は、引数を囲んでいる()を削除しました。引数が1つのときのみ可能です。
<script>
const test1 = a => {
return a + "です";
};
console.log(test1("赤")); // 赤です
</script>
※引数が2つ以上の時
引数が2つ以上の時は、引数の箇所にかっこ()が必要です。
<script>
const test1 = (a, b) => {
return a + "と" + b + "です";
};
console.log(test1("赤", "青")); // 赤と青です
</script>
※引数がない時
引数がない時も引数の箇所にかっこ()が必要です。
<script>
const test1 = () => {
return "です";
};
console.log(test1()); // です
</script>
STEP3 アロー関数3
STEP2のアロー関数との差異は、ブロック{}とreturn()がありません。
処理を1行で記述(ワンライン)の時のみ可能です。
<script>
const test1 = a => a + "です";
console.log(test1("赤")); // 赤です
</script>
※命令文が2行以上の時
命令文が2つ以上の時は、ブロック{}とreturnが必要です。
<script>
const test1 = a => {
const b = a + "です";
return b;
};
console.log(test1("赤")); // 赤です
</script>
アロー関数からオブジェクトを返す場合
波括弧の前後を丸括弧()で括ります。
<script>
const test1 = (a, b) => ({
name: a,
romaji: b,
});
console.log(test1("鈴木", "suzuki")); //{name:'鈴木',romaji:'suzuki'}
</script>
以下は、MDNのアロー関数のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions
関連の記事