📚 콜백함수
다양한 코드들을 비동기적으로 실행하도록 만들고
콜백함수를 이용하여 결과값을 처리해보자.
📚 콜백함수 예제 - 1
task 라는 함수를 만들어 내부에 비동기 작업을 처리할 콜백함수도 작성해준다.
브라우저에서 콘솔에서 확인해보면 빈화면이었다가
3000ms(3초)가 지난 후에 설정한 텍스트가 출력되는 것을 확인할 수 있다.
📚 콜백함수 예제 - 2
add라는 매개변수 a,b를 받는 함수를 만들고 내부에
setTimeout이라는 콜백함수를 만들어 덧셈연산을 실행할
sum 변수에 담아 3초뒤에 출력하는 동작을 설정하고
인수 2,1를 사용해 호출해보자
빈 화면이었다가 2와 1을 연산 결과 3을 출력하는 것을 확인할 수 있다.
But!
하지만 이렇게 작성하면 이 결과값인 sum은 외부에서 활용할 수 없다.
외부에서도 사용하게끔 구현하려면 어떻게 해야할까?
이런식으로 작성하면 가능하다. 동작은 동일하다.
해당 코드의 동작순서는 다음과 같다
-
add(2, 1, callback)이 호출된다.
-
setTimeout이 실행되어지고, 3초 뒤에 a + b 연산을 하도록 예약된다.
-
- 여기서 JavaScript 엔진은 3초 동안 다른 작업 수행이 가능하다.
-
-
3초가 지나면
setTimeout의 콜백함수가 실행되고,a와b의합인
3이 계산되어진다.
-
-
- 덧셈결고
sum이 콜백함수에 전달되고, 익명함수인(value) => console.log(value)가 실행되며3이 콘솔에 출력된다.
- 덧셈결고
setTimeout을 사용하여 3초 뒤 덧셈 결과를 계산한 뒤에
덧셈 결과를 콜백함수에 전달하고 콜백함수가 실행되어 결과를 콘솔에 출력하는 것이다.
📚 콜백함수 예제 - 3
콜백함수는 우리가 흔히 접할 수 있는 배달음식과 비슷한 점이 있다.
3초 뒤에 브라우저 콘솔에 삼겹살이 출력되는 코드가 있다.
이 코드를 사람이 배달 음식을 시키는 상황으로 비유해보면, 다음과 같이 설명할 수 있다.
- 1. orderFood 함수는 마치 사람이 배달 음식을 주문하는 것과 같다.
여기서 음식으로 "삼겹살"을 주문한 것과 같다.
- 2. setTimeout 함수는 음식을 준비하고 배달하는 시간, 즉 조리 시간과 배달 대기 시간을 나타낸다. 3초로 설정되어 있으니, 음식을 만드는 데 걸리는 시간이 3초라 생각하면 된다.
-
3. callback(food)은 배달원이 음식을 준비해서 드디어
고객에게 전달하는 순간이다. 3초 후에 음식이 준비되면,
콜백 함수가 실행되어 주문한 삼겹살이 고객에게 전달된다. -
4. orderFood((food) => {...})는 음식을 받은 후의 행동으로, 여기서는 음식을 받은 고객이 "삼겹살"을 받아보고 "배달왔다!" 반응하는 행동과
브라우저 콘솔에 출력하는 것과 비슷하다고 볼 수 있다.
📚 추가예제 - 바로 먹으면 음식이 뜨겁지 않을까?
갓 받은 배달 음식이 뜨거우면 바로 먹을 수가 없다.
그러므로 식혀야한다. 이것을 비동기 작업의 결과를 또다른 비동기 작업에 인수로 사용하기 위해
전달하는 케이스에 빗댈 수 있다.
음식을 2초 동안 식혀주기 위해 사용할 cooldownFood 함수를 추가적으로 만들고
orderFood 에 기존 food를 출력하는 동작에 추가로
2초간 식힌 음식인 colldownedFood를 보여주는 동작을 할 cooldownFood함수를 호출해준다.
3초뒤에 삼겹살이 출력되고 2초 뒤에 추가적으로 식은 삼겹살이 출력되는 것을 확인할 수 있다.
다 먹고 난 삼겹살은 냉동해둬야지만 추후에 녹여서 다시 식사에 쓸 수가 있다.
추가적인 비동기작업으로 food를 냉동시키는 작업을 할 함수를 만들어보자
cooldownFood가 호출되면 콜백함수가 호출되면서
cooldownedFood를 출력하고
추가적으로 freezeFood 함수를 호출하여 1.5초 후 내부 콜백함수가 호출되면서
최종적으로 냉동된 삼겹살 freezedFood를 보여준다.
최종적으로 배달 -> 식히기 -> 남은 음식 냉동 의 결과가 출력되어진다.
