비동기를 배우다가 콜백에 대한 개념을 다시 보게 되었다.
알고 있다고 생각했던 콜백이 너무 생소하게 느껴지고
제대로 알고있지 않았음을 알게되어 다시 정리 봤다.
callback 함수
함수안에 parameter로 함수가 argument 전달되어 함수 내에서
호출되는 함수를 callback 함수라고 한다.
함수 안에서 함수가 호출되기도 하고 함수가 리턴되기도 하는
고차함수를 배우긴 했지만 자주쓰는 표현에 익숙해졌을 뿐
정확하게 원리를 알고 있지는 못했었다.
지금도 아직 완벽하지는 않지만 지금까지의 이해를 정리했다.
예를 들어
function writeNumStr(string, func) {
console.log(string);
func();
}위에 선언된 함수는 두개의 parameter를 받는다.
문자열과 함수를 받는다.
여기서 중간에 func(); 이 불려지는데
여기서 argument로 받은 func가 콜백함수가 된다.
함수가 실행되는 것이다.
이렇게는 이해하는데 크게 어려움은 없다.
근데 여기서 비교해볼 것이
배열을 입력받아 요소를 하나하나 원하는 새로운 배열로 리턴해주는
메소드인 map을 살펴 볼 것이다.
let arr = [1, 2, 3, 4, 5];
arr.map(function (num) {
return num + 2;
});map 메소드도 콜백함수를 인자로 받는다.
각 배열을 무슨 함수로 요소를 바꿀 것인가를 넣어주는 것이다.
위의 부분을 콜백으로 다시 표현해보자
let arr = [1, 2, 3, 4, 5];
function plusTwo (num) {
return num + 2;
}
arr.map(plusTwo);이렇게 표현할 수 있다.
그리고 많이 사용하는 화살표 함수로 표현해보면
let arr = [1, 2, 3, 4, 5];
arr.map(num => num + 2);이렇게 표현할 수 있다.
화살표 함수를 콜백으로 사용하면 콜백을 이해하는데
조금 어려움이 있을 수 있다.
여기까지가 콜백의 기초다.
이제 비동기와 함께 다시 만난 콜백을 볼 것이다.
asynchronous
순차적으로 진행하는 코드 실행에서 요청에 대한 응답이 올때 까지
기다리면서 아무것도 못하는 것을 Blocking 현상이라고 부른다.
이때 기다리고 다음 코드는 진행하지 않는 것을
synchronous 동기라고 부르고 요청의 응답을 기다리지 않고
계속된 코드를 진행하는 것을 asynchronous 비동기 라고 한다.
예를 들어서 놀이공원에서 놀이기구를 탈때
줄서서 앞의 사람이 놀이기구를 타야 내가 탈텐데 기다리려면 다른 곳에는 못가고 다른 작업은 못하고 기다리게 되는 것을 동기적이라고 한다.
비동기에 대한 예를 들면 카페에서 음료를 주문하고 진동벨을 받았다. 음료가 나올 때까지 다른 작업을 할 수 있다. 다른 곳에 나갔다가 와도 커피를 받는데 아무런 영향을 받지 않는다. 진동벨이 울리면 가서 받으면 되기 때문이다. 이런 것을 비동기적이라고 한다.
function write(string, func) {
console.log(1)
setTimeout(() => {
console.log(string);
func();
console.log(3)
}, 4000)
console.log(2)
}
write(a,() => {}); // 1 2 / a 3위 함수를 보면 setTimeout() 메소드가 있다.
setTimeout() 메소드는 비동기가 가능한 메소드다.
인자는 두개를 받는다.
setTimeout(콜백함수, 시간)이다.
시간이 지난후에 함수를 호출하는 형태다.
위는 4초 후에 나오는 상태다.
이 write 함수는 string 문자열과 func 함수를
인자로 가진 선언한 함수다.
함수안에 setTimeout의 메소드가 있고
그 setTimeout의 콜백함수 안에서 write의 func함수가
호출되는 것이다.
이런 구조의 함수를 write(a,() => {}); 이렇게 호출하면
어떤 순서대로 나올까?
동기라고 한다면 위에서부터 1,a,3,2 순으로 나와야 하지만
비동기 메소드는 뒤의 코드를 계속 진행시킨다.
그래서 위의 호출 결과는 1,2가 나오고 4초 후에 a,3 이 나온다.
비동기는 멈추지 않고 진행하게 하고 결과가 나오면 그 뒤에
처리하게 해서 효율을 높일 수 있는 방법이다.
이 것을 응용하면
let writeThree = () => {
write('a',() => {
write('b',() => {
write('c',() => {
})
})
})
};
writeThree(); 위를 실행시키면
아래의 순서대로 나온다.
1 2
(4초)
a 1 2 3
(4초)
b 1 2 3
(4초)
c 3
여기서 중요한 점은 write('a',() =>{})의 func 함수 즉 콜백함수는 아래 부분이다.
let writeThree = () => {
write('a',() => {
write('b',() => {
write('c',() => {
})
})
})
};
() => {
write('b',() => {
write('c',() => {
})
}
비동기의 이해가 아직은 어렵지만 더 익숙해져야겠다.
