JavaScript : 콜백함수의 활용

10862 단어 모던 자바스크립트 Deep DiveWeCodeJavaScriptTILJavaScript

콜백함수

콜백함수 부분을 공부하다가 주로 어떤 부분에 활용되는지 궁금하여 해당 내용을 간단히 정리 해봄

콜백 함수란?

  • 함수의 매개변수를 통해 다른 함수 내부로 전달되는 함수
    • 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수는 고차 함수라고 한다.
  • 콜백 함수는 이벤트 처리, 타이머 함수 등을 포함한 비동기 처리 및 배열 고차 함수에 활용된다.

학창시절 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. 배열 고차 함수

  • 배열이 가진 메소드 중 콜백 함수를 활용하는 고차 함수는 forEach(), map(), filter() 등이 있고, 해당 콜백 함수들은 function(element, index, array){}와 같이 배열의 요소, 인덱스, 그리고 배열 자신을 매개 변수로 사용할 수 있다.
  • 매개변수 중 element만이 필수로 사용되며 나머지는 필요에 따라 사용하면 된다.
  • 아래 예시는 매개변수의 사용 예를 보여주기 위해 차례대로 매개변수 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() - 매개변수 1개 사용 (value)

let numbers = [10, 20, 30];

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

console.log(numbers); // 10, 20 출력
2일차 html 기초
[Java의 정석]Chapter6.객체지향 프로그래밍(01~04)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage