콜백 함수

콜백 함수

• 매개변수로 전달하는 함수

• 선언적 함수 사용하기

<script>
      //함수를 선언한다.
      function callThreeTimes(callback) {
        for (let i = 0; i < 3; i++) {
          callback(i); // callback 이라는 매개변수는 함수이므로 호출할 수 있다.
        }
      }

      function print(i) {
        console.log(`${i}번째 함수 호출`);
      }

      // 함수 호출
      callThreeTimes(print);
    </script>

• 매개변수를 통해 함수를 받고, 그 함수를 통해 결과값을 호출한다.

• 익명 함수 사용하기

<script>
      // 함수를 선언한다.
      function callThreeTimes(callback) {
        for (let i = 0; i < 3; i++) {
          callback(i);
        }
      }

      // 함수 호출
      callThreeTimes(function (i) {
        console.log(`${i}번째 함수 호출`);
      });
    </script>

콜백함수와 forEach()

function (value,index,array) {}

forEach() : 콜백 함수를 활용하는 가장 기본적인 함수. 배열이 갖고 있는 함수로써 단순하게 배열 내부의 요소를 사용해서 콜백함수를 호출해준다.

<script>
      const numbers = [273, 52, 103, 32, 57];
      numbers.foreach(function (value, index, array) {
        console.log(`${index}번째 요소 : ${value}`);
      });
    </script>

콜백함수와 map()

• map() : 배열이 갖고 있는 함수. 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수이다.

<script>
			// 배열을 선언한다.
      let numbers = [273, 52, 103, 32, 57];
			// 배열의 모든 값을 제곱한다.
      numbers = numbers.map(function (value, index, array) {
        //매개변수로 value, index,array 를 갖는 콜백함수를 사용한다.
        return value * value;
      });
      //출력한다.
      numbers.forEach(console.log); // 매개변수로 console.log 메소드 자체를 넘김
    </script>

콜백함수와 filter()

• filter() : 배열이 갖고 있는 함수. 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수이다.

<script>
      const numbers = [0, 1, 2, 3, 4, 5];
      const evenNumbers = numbers.filter(function (value) {
        return value % 2 === 0;
      });

      console.log(`원래 배열 : ${numbers}`);
      console.log(`짝수만 추출 : ${evenNumbers}`);
    </script>

• value만 활용하므로 value 만 매개변수로 넣음.

화살표 함수

• 화살표 함수 : 단순한 형태의 콜백 함수를 쉽게 입력하기 위한 함수 생성 방법

(매개변수) => {

}

(매개변수) => 리턴값

타이머 함수

• 특정 시간 혹은 특정 시간 이후에 콜백 함수를 호출.
• 시간과 관련된 처리를 할 수 있다.

함수 이름	설명
setTimeout(함수, 시간)	특정 시간 후에 함수를 한 번 호출한다.
setInterval(함수, 시간)	특정 시간마다 함수를 호출한다.

• 타이머를 종료하고 싶을 때

함수 이름	설명
clearTimeout(타이머_ID)	setTimeout()함수로 설정한 타이머를 제거한다.
clearInterval(타이머_ID)	setInterval()함수로 설정한 타이머를 제거한다.

• 이 함수들의 매개변수에는 타이머 ID라는 것을 넣는다.
• 타이머 ID : setTimeout()함수와 setInterval()함수를 호출할 때 리턴값으로 나오는 숫자