Javascript コールバック関数

コールバック関数（callback function）は、他の関数に引数として渡される関数のことです。渡された関数は、適切なタイミングで「呼び戻される」（call back）ことからこの名前が付いています。

以下は具体的なコードです。

ボタンをクリックすると、こんにちは,ハロー, ニーハオ,ボンジュール,ナマステーがランダムに表示されます。

 <div class="container">
        <button id = "button">クリックして下さい</button>
      </div>

.container{
 
    padding: 30px 20px;
}
#button{
 
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-color: rgb(70, 174, 153);
    color: #ffff;
    display: block;
    border-radius: 50px;
    border: none;
     cursor: pointer;
     font-size: 1rem;

}

let greet = ['こんにちは','ハロー', 'ニーハオ','ボンジュール','ナマステー'];
const button = document.getElementById('button');
 button.addEventListener('click', () => {
 let language = Math.floor(Math.random() * greet.length);
 window.alert(greet[language]);
 });

5つの挨拶を要素にもつ配列greetを作成します。

HTML内のidがbuttonという要素を取得してbuttonという定数に代入してます。

Math.random()*greet.lengthで0以上５未満の数値（少数）を作り、Math .floor()で小数点以下を切り捨てて、整数0,1,2,3,4にいずれかの整数にします。

その整数をインデックスとしてgreet配列からランダムに選び、window.alertとして表示します。

addEventListener(‘click’, …)の第2引数の() => { … }はコールバック関数です。

このコールバック関数の中でwindow.alert(greet[language]);が実行されます。

ボタンがクリックされると、こんにちは,ハロー, ニーハオ,ボンジュール,ナマステーの中からランダムに表示されます。