YMLib - HTML - JavaScript

アロー関数

2026/01/13

アロー関数を使ってみます。

◆環境

OS	Windows 11 Home 25H2
Browser	Google Chrome 143.0.7499.193

main.jsを指定します。

index.html

1:
2:
3:
4:
5:
6:
7:
8:
9:

<!doctype html>
<head>
<meta charset="utf-8">
<title>アロー関数</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

アロー関数の例です。

main.js

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:

// 関数
function fn(n) {
  return n * 2;
}
console.log(fn(2));

// 無名関数
const fn2 = function(n) {
  return n * 2;
}
console.log(fn2(2));

// アロー関数
const fn3 = (n) => {
  return n * 2;
}
console.log(fn3(2));

// 引数が1つの場合、()を省略できる
const fn4 = n => {
  return n * 2;
}
console.log(fn4(2));

// 処理が1行の場合、{}を省略できる
const fn5 = n => n * 2;
console.log(fn5(2));

// nというプロパティを持つオブジェクトを返す
const fn6 = n => ({ n: n * 2 });
console.log(fn6(2));

index.htmlをChromeで開きF12でdeveloper toolsを開くとconsole.logで出力した内容が表示されました。

期待通りに動作しました。

▲ PageTop ■ Home