JavaScript アロー関数の練習
■JavaScriptのアロー関数について足し算の関数をモデルに様々な記述パターンを解説する
アロー関数とは関数の「function」部分を削除し、「=>」でつないで記述する記法
・基本的な記述方法の場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アロー関数</title>
</head>
<body>
<script>
//定数「additon」にadd関数の戻り値を代入
//add関数は第一引数と第二引数の足し算としている
const addition = function add(a, b) {
return a + b;
};
//第一引数「1」と第二引数「2」の足し算の結果をコンソールログに出力
//出力値：3
console.log(addition(1, 2));
</script>
</body>
</html>
コンソールログの確認方法はこちら→JavaScript コンソールログ確認方法
※アロー関数で記述する前準備として無名関数にする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アロー関数</title>
</head>
<body>
<script>
//関数名「add」を削除して無名関数にする
const addition = function(a, b) {
return a + b;
};
//第一引数「1」と第二引数「2」の足し算の結果をコンソールログに出力
//出力値：3
console.log(addition(1, 2));
</script>
</body>
</html>
・アロー関数で記述
「function」部分を削除し、「=>」でつなぐ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アロー関数</title>
</head>
<body>
<script>
//定数「additon」にアロー関数の戻り値を代入
//「function」部分を削除し、「=>」でつなぐ
const addition = (a, b) => {
return a + b;
};
//第一引数「1」と第二引数「2」の足し算の結果をコンソールログに出力
//出力値：3
console.log(addition(1, 2));
</script>
</body>
</html>
・1行でreturnできる場合は波かっこ{}と「retrun」が削除し、1行で記述することが可能
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アロー関数</title>
</head>
<body>
<script>
//定数「additon」にアロー関数の戻り値を代入
//1行でreturnできる場合は波かっこ{}と「retrun」が削除し、1行で記述することが可能
const addition = (a, b) => a + b;
//第一引数「1」と第二引数「2」の足し算の結果をコンソールログに出力
//出力値：3
console.log(addition(1, 2));
</script>
</body>
</html>
・引数が1つの場合は括弧も省略可能
※括弧省略前
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アロー関数</title>
</head>
<body>
<script>
//アロー関数は第一引数を2倍している
const addition = (a) => a * 2;
//第一引数「5」を2倍した結果をコンソールログに出力
//出力値：10
console.log(addition(5));
</script>
</body>
</html>
※括弧省略後
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アロー関数</title>
</head>
<body>
<script>
//アロー関数は第一引数を2倍している
//引数aの括弧を省略
const addition = a => a * 2;
//第一引数「5」を2倍した結果をコンソールログに出力
//出力値：10
console.log(addition(5));
</script>
</body>
</html>