가끔 콜백함수가 뭔지 헷갈려 하는 사람이 많기도 하고, 나도 개발을 할때는 자주 쓰는데
설명하라고 하면 헷갈릴 때가 있어 정리해본다.
콜백(Callback) 함수란?
콜백 함수는 다른 함수에 인수로 전달된 다음 외부 함수 내에서 호출되어 일종의 루틴이나 작업을 완료하는 함수입니다.
-MDN-
위는 MDN에서 설명하고 있는 콜백함수인데, 저 빨갛게 표시한 게 콜백함수의 전부이다.
요약하자면
정의 : 콜백함수란 함수에 파라메터로서 함수가 들어가는 것을 의미한다.
용도 : 콜백함수는 함수내에서 일종의 루틴이나 작업을 위해 사용된다.
이렇게만 보면 잘 이해가 되지 않지만, 알게 모르게 쓴 적이 많을 것이다. 샘플코드랑 실제 어떤 경우에
자주 쓰이는지 코드로 확인해보자.
콜백(Callback) 함수 샘플코드
샘플코드
//인자 name을 alert창으로 띄어주는 greeting 선언
function greeting(name) {
alert(`Hello, ${name}`);
}
//callback함수를 받아 함수내에서 변수 선언 및 callback함수를 호출하는 processUserInput함수 선언
function processUserInput(callback) {
const name = prompt("Please enter your name.");
callback(name);
}
//processUserInput함수에 greeting함수를 파라메터로 넣어 호출
processUserInput(greeting);
/*MDN*/
MDN에서 제공하는 콜백함수의 기본인 예제이다.
1. greeting이라는 함수 선언
2. processUserInput 함수 선언
3. processUserInput함수에 파라메터로 greeting함수를 넣어 호출
결국 파라메터로 함수를 넣고, 콜백함수를 호출하고 있다.
개발 할 때, 콜백함수를 쓸 일도 있지만, 기본적으로 제공하고 있는 웹API에서도 콜백함수를 쓰는 일이 많아.
그래서 알게 모르게 개발을 하다 콜백함수를 한두번은 써본 일이 있을 것이다.
샘플코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="sample-class">테스트</div>
<script>
document.querySelector('.sample-class').addEventListener('click',()=>{
alert('테스트 입니다.');
})
setTimeout(() => {
alert('setTimeout 테스트입니다.');
}, 1000);
var array = [1,2,3,4,5];
array.map((e) => {
console.log(e);
})
</script>
</body>
</html>
보통 개발을 하면서 자주 쓰이는 웹API와 함수중 몇개를 골라보았다.
위의 코드는 전부 콜백함수를 사용하고 있다. 그렇기 때문에 콜백함수의 개념을 잘 몰라도 한두번씩은 써봤을 것...
첫번째로 addEventListner는 'click' 이벤트가 발생했을 때, 특정 로직이 수행되도록 함수를 파라메터로 받는다.
두번째로 setTimeout은 설정된 시간이 되면 특정 로직이 수행되도록 함수를 파라메터로 받는다.
세번째로 map함수는 배열에 포함된 요소마다 특정 로직이 수행되도록 함수를 파라메터로 받는다.
위의 3개 샘플코드는 각기 다르지만, 결국 함수를 파라메터로 받아 수행한다는 점에서 콜백함수이다.
어렵지 않으니, 그냥 코드 보면서 파라메터로 함수를 받아 특정 로직을 수행하고 있는가?를 보면
이게 콜백함수구나... 라고 알 수 있을 것이다.
'FrontEnd > JavaScript' 카테고리의 다른 글
| [JS] Vue 컴포넌트의 내용을 인쇄하는 기능을 구현하며 생겼던 문제와 원인에 대한 정리 (0) | 2023.11.11 |
|---|---|
| [JS] window.print()를 이용해서 특정영역을 인쇄하는 기능을 구현하는 방법 (0) | 2023.11.11 |
| [JS] Promise.all를 통해 여러개의 프라미스를 병렬로 실행하고 모든 프라미스가 종료되는 시점을 잡아보자. (1) | 2023.05.20 |
| [JS] 웹API : structuredClone함수를 통한 깊은 참조 복사 하는 방법 (0) | 2022.12.23 |
| [JS] javascript & JQuery 2개 이상의 조합키로 keypress 이벤트 실행하는 방법 (0) | 2022.12.18 |
