参考にした動画

学んだこと

・関数 | MDN
・無名関数
・アロー関数

関数

・変数に代入できる。
・複数の処理をまとめて実行するためのブロック。
・関数は名前を持っていて、必要なときに呼び出すことや再利用ができる。
・関数を修正する必要がある場合、関数単位で変更を行うことができてメンテナンスし易い。

<html>
	<body>
		<button id="id-button">my button</button>
	</body>
	<script>
		btn = document.getElementById("id-button")
		btn.addEventListener("click",clickedButton)

		function clickedButton(){
			alert("clicked button")
		}
	</script>
</html>

ブラウザ

無名関数（名前の無い関数）

・無名関数は必要な箇所で直接定義するので、コードがコンパクトになり、コードの見通しがよくなる。
・変数に代入できる。
・無名関数はその場限りの使用が主な役割のため、他の場所で再利用することができない。
・無名関数に名前が無いので、エラーメッセージに具体的な情報が表示されないことがあり、デバッグやテストが困難になる場合がある。

<html>
	<body>
		<button id="id-button">my button</button>
	</body>
	<script>
		btn = document.getElementById("id-button")
		btn.addEventListener("click",function(){
			alert("test")
		})
        //clickedButton関数は動かない
		function clickedButton(){
			alert("clicked button")
		}
	</script>
</html>

アロー関数

・関数のシンタックスシュガー（省略記法）である。

<html>
	<body>
		<button id="id-button">my button</button>
	</body>
	<script>
        //リロードするとclickedbutton,testの順番でアラートが出力される。
		clickedButtonHennsuu = () => alert("test")

		function clickedButton(hensuu){
			alert("clicked button")
			hensuu()
		}

		clickedButton(clickedButtonHennsuu)
	</script>
</html>

やりたいことメモ

リロードではなくてボタンをクリックしたらアラートを出す方法を知りたい