목차
1. 콜백함수란?
2. 콜백함수 사용법
3. 콜백함수를 왜 사용하는 걸까?
1. 콜백함수란?
- 호출되는 함수에 인자값으로 전달되는 함수
함수를 호출할 때 그 함수에 전달하는 값를 "인자값"이라고 하고 인자값을 받는 변수를 "매개변수"라고 한다. 그렇다면 인자값에 해당하는 값은 어떤 것들이 있을까? 값은 문자열, 숫자 등의 원시타입 또는 객체같은 참조타입의 데이터를 뜻한다. 콜백함수는 인자값으로 전달되는 함수라고 하였는데 어떻게 가능한 것일까?
function fn1(){
return "함수도 값인가"
}
console.log(fn1);
/*
결과값
function fn1(){
return "함수도 값인가"
}
*/값을 출력하는 console.log를 사용하여 함수를 출력해보았다. 그랬더니 함수의 내용이 그대로 출력되었다. 그 이유는 자바 스크립트에서는 함수도 참조타입의 데이터인 객체 중 하나로 값으로 인식되기 때문이다. 따라서 인자로 함수를 전달하는 것이 가능하다.
2. 콜백함수 사용법
그럼 한 번 콜백함수를 직접 사용해보자
//콜백함수로 사용할 함수
function collBackFn1(str){
console.log(str);
}
//콜백함수를 받아 실행할 함수
function main(fn1){
fn1('이것이 콜백함수다!');
}
//인자값으로 함수값 전달
main(collBackFn1);
/*
결과
이것이 콜백함수다!
*/
그럼 반드시 콜백함수는 인자로 전달할 함수를 function 키워드를 사용해서 미리 만들어야하는 것인가? 그렇지 않다. 익명함수로 변수에 담아 전달해도 되고 바로 인자값으로 전달해도 된다.
3. 콜백함수를 왜 사용하는 걸까?
콜백함수가 뭔지, 어떻게 사용하는지를 알아봤다. 하지만 가장 중요한 왜 사용하는지를 모른다. 선언된 함수를 그냥 다른 함수에서 필요할 때 호출하면 되지 않나? 라고 생각된다. 하지만 어쩔 수 없이 콜백함수를 사용하는 경우가 있다. 그 경우들을 알아보도록 하자.
1. 비동기 처리
개발을 하다보면 비동기 방식으로 기능을 구현해야하는 경우가 있다. 비동기 방식은 이미 동작하고 있는 어떤 기능이 끝나지 않아도 필요한 기능을 실행하는 것을 말한다. 그런데 비동기 처리에 대한 여러 함수들이 콜백함수를 사용하도록 하고 있다.
setTimeOut(function(){
console.log('3초 뒤에 실행되는 콜백함수')
},3000)
2. 이벤트 처리
이벤트는 html요소에서 어떤 행위(마우스클릭, 키 입력 등)를 했을 때 발생하는 변화를 말하는데 각 행위에 대해 기능을 수행하도록 할 수 있다.
let btn = document.querySelector('button');
btn.addEventListener('click',function(){
console.log('버튼이 클릭되었습니다.');
})위 코드는 버튼을 선택하여 그 버튼이 클릭되면 콜백함수를 호출하여 "버튼이 클릭되었습니다."라는 문자열을 출력하도록하는 예이다.
클릭 뿐만 아니라 키가 입력되거나 새로고침이 되는 등 다양한 이벤트에 대해 콜백함수를 사용하여 기능을 수행하도록 할 수 있다.