콜백함수란 다른 함수에 인자로 쓰이는 함수를 말한다.
그 다른 함수의 명령에 따라 즉시 실행될 수 도 있고(동기), 나중에 실행될 수 도 있다(비동기).
아래는 동기적으로 쓰이는 콜백함수와, 비동기적으로 쓰이는 콜백함수에 대한 예시.
동기적예시
function sayHello() {
console.log("hello")
}
function firstMeeting(callback) {
callback();
console.log("nice to meet you");
}
firstMeeting(sayHello) // hello nice to meet you
- firstMeeting(sayHello) 실행
- firstMeeting 함수를 보니 (callback) 파라미터값이 있고, 이 callback() 에 대한 실행이 console.log("nice to meet you")보다 우선이다.
- 1에서 확인했던 콜백함수 sayHello를 찾는다.
- sayHello 를 찾아보니 console.log("hello")
- hello를 먼저 실행하고 그다음 nice to meet you를 실행한다.
한줄 씩 순차적으로 함수가 실행된다. 하나의 작업을 완료 할 때까지 다른 작업을 하지 않는다.
비동기적예시
function sayHello() {
console.log("hello")
}
function sayNiceToMeetYou() {
console.log("nice to meet you");
}
setTimeout(sayHello, 3000);
sayNiceToMeetYou();
// nice to meet you hello
sayHello를 호출하는 함수가 먼저 나왔음에도 불구하고 nice to meet you가 먼저 나왔다 .
setTimeout이라는 함수안에서 sayHello가 웹api에 의해 비동기적으로 호출되었기 때문이다.
자주 쓰이는 eventListener의 경우도 마찬가지로 순서와 상관없이 eventListener함수가 정한 특정 상황이 되었을때 비동기적으로 해당 함수가 호출되는 것.
콜백함수는 비동기적인 처리를 동기적으로 처리하고 싶을 때에도 유용하게 사용된다.
아래는 비동기적 처리 예시이다.
function getData() {
let data;
axios.get('https://datastorage.com/product/1')
.then((result) => { data = result })
};
return data;
}
console.log(getData()); // undefined
마지막줄의 getData에서 undefined가 나온 이유는
axios를 통해 get요청을 보낸 뒤, result를 받기도 전에 data를 리턴했기 때문이다.
즉 'return data' 이 코드가 '.then((result) => { data = result })' 이 코드보다 먼저 실행됐기 때문이다.
function getData(callback) {
axios.get('https://datastorage.com/product/1')
.then( function (response) { callback(response) }
};
}
getData(function(data) {
console.log(data);
})
//response
콜백함수를 이용한 해결방법이다. 순서대로 흐름을 읽어보면,
1. getData가 실행된다.
2. getData 함수를 살펴보니 파라미터로 callback을 받는다.
3. 파라미터 값인 callback이 쓰이는 곳에 가보니 그 콜백안에 fetch를 통해 받아온 response가 인자로 전달되어 있다.
4. 1번의 getData가 실행되었던 곳에 가보니 인자로 'data를 매개변수로 가지는 콘솔로그 시켜주는 콜백함수'가 들어있다.
5. data가 콘솔로그 되면된다.
복잡해 보이는데 결국
콜백함수를 통해서, 비동기적 작업이 완료 된 이후에 어떠한 작업을 할 수 있게 한다는 것이다.
비동기적인 코드를 절차적으로 이용할 수 있다.
이렇게 콜백함수를 통해서 비동기적 처리로 인해 생길 수 있는 문제점을 해결할 수 있고,
위 예시에서는 단순히 함수에 콘솔로그를 출력하는 콜백함수를 사용 했지만, 연산이나 데이터를 전달하는 것과 같이 다양한 작업을 콜백함수 안에 넣어서 활용할 수 있다.
다만 주의해야할 점도 있는데, 콜백지옥이다.
step1(function (value1) {
step2(function (value2) {
step3(function (value3) {
step4(function (value4) {
step5(function (value5) {
step6(function (value6) {
// Do something with value6
});
});
});
});
});
});
콜백지옥의 예시이다. step1에서 작업 후 그 결과를 step2 인자로 전달한다. 그리고 step2에서 step3로 .. 이를 반복하다보면 삼각형 모양의 코드가 된다. 복잡하고 이해하기도 어렵고 보기도 좋지 않다. 그래서 사용하는 것이 Promise 이다.
'Frontend Study - 2 > Javascript' 카테고리의 다른 글
Javascript : 동기와 비동기 (4) Async & await (0) | 2022.09.06 |
---|---|
Javascript : 동기와 비동기 (3) Promise (0) | 2022.09.06 |
Javascript : 동기와 비동기 (1) 자바스크립트 엔진과 Web Api. 비동기와 멀티쓰레드. (0) | 2022.09.05 |
자바스크립트 / for ... of & for ... in 차이점 (0) | 2022.06.26 |
자바스크립트 string methods - substring() / slice() / splice() 차이점 (0) | 2022.06.26 |