JavaScript:コールバック関数の使用

10701 ワード
モダンJavaScript Deep Dive WeCode JavaScript TIL テキストリンク

コールバック関数


コールバック関数の部分を勉強するとき、主にどの部分を使いますか.

コールバック関数とは?

  • 関数のパラメータによって他の関数の内部に渡される関数
  • パラメータを介して関数の外部からコールバック関数を伝達する関数を高次関数と呼ぶ.
  • コールバック関数は、イベント処理、タイマ関数などを含む高次関数の非同期処理および配列に使用することができる.
    • 학창시절 WIN API를 접했을 때 윈도우의 메시지 핸들러 함수, 즉 윈도우 프로시저를 콜백함수라 불렀는데, 이는 윈도우 프로시저가 사용자가 아닌 운영체제에 의해 호출되기 때문이라고 배운 기억이 있다. 하지만 이러한 표현은 콜백함수의 활용 측면을 보았을 때 굉장히 좁은 의미의 표현이라고 생각된다.

    コールバック関数の使用例


    1.非同期処理-イベント処理

    // addEventListner() 메소드의 두번째 매개변수로 콜백 함수가 사용됨
<script>
    document.addEventListener('DOMContentLoaded', function(){
        const input = document.querySelector('input');
        const h1 = document.querySelector('h1');
    
        input.addEventListener('change', function(event){
            h1.textContent = event.currentTarget.value;
        })
    })
</script>
<body>
    <input type="text">
    <h1></h1>
</body>

    2.非同期処理-タイマ関数

    const f1 = function(){
  console.log('첫번째 함수입니다.');
}
const f2 = function(){
  console.log('두번째 함수입니다.');
}

setTimeout(f1,1000);
f2();

    3.高次関数の配置

  • 配列が持つ方法では、関数(element、index、array){}のような配列内の要素、インデックス、配列自体をパラメータとして使用できるforEach()、map()、filter()など、コールバック関数を用いた高次関数がある.
  • パラメータでは、要素のみが必要であり、残りは必要に応じて使用すればよい.
    • 次の例では、3つのパラメータ、2つのパラメータ、および1つのパラメータを順に使用して、パラメータの使用例を示します.

    3-1. forEach()-すべてのパラメータ(value、index、array)を使用

    const numbers = [10, 20, 30];

numbers.forEach(function(value, index, array){
  console.log(`배열 [${array}]의 인덱스 ${index}일 때 요소의 값은 ${value}이다.`)
})

    3-2. map()-2つのパラメータ(value,index)を使用

    let numbers = [10, 20, 30];

numbers = numbers.map(function(value, index){
  return value * index;
})

console.log(numbers) // 0, 20, 60 출력

    3-3. filter()-パラメータ(value)を使用します。

    let numbers = [10, 20, 30];

numbers = numbers.filter(function(value){
  return value % 3; // 3으로 나누어 떨어지는 경우 false로 평가 됨
})

console.log(numbers); // 10, 20 출력
    ES 6のクラス、classの説明
    十三array配列形式のマッピング