4-1 콜백 함수란?
✔️ callback? 호출하다 + 되돌다
✔️ 다른 코드에 인자로 넘겨줌으로써 그 제어권을 다른 함수에 넘겨주는 함수
4-2 제어권
4-2-1 호출 시점
<콜백함수예제 setInterval>
let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)
//func : 함수
//delay : ms 단위의 숫자
//생략가능 ar1~ : func 실행 시 매개변수로 전달할 인자 4-2-2 인자
<콜백함수예제 map>
arr.map(callback(currentValue[, index[, array]])[, thisArg])
//생략가능 thisArg : 콜백 함수 내부에서 this로 인식할 대상 특정 (생략 시 전역객체 바인딩)
callback: function(currentvalue, index, array)
//currentvalue: 배열요소 중 현재값
//index: 현재값의 인덱스
//array: map메서드의 대상이 되는 배열4-2-3 this
- 별도의 this 지정하지 않는 경우 → 전역 객체
- 별도의 this 지정하는 경우 → 그 지정한 객체
임의로 바꾸고 싶은 경우 bind 사용
4-3 콜백 함수 = 함수
콜백 함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 함수로 호출된다.
var obj = {
vals: [1, 2, 3],
logValues: function(v, i) {
console.log(this, v, i)
}
}
obj.logValues(1,2) // {vals: [1,2,3], logValues: f} 1 2
//별도의 this 지정하지 않아 this = 전역객체 = window
[4,5,6].forEach(obj.logValues) //Window {...} 4 0
//Window {...} 5 1
//Window {...} 6 24-4 콜백 함수 내부의 this에 다른 값 바인딩하기
방법 1) 전통적인 방식 변수 자체를 함수 내부에 쓰고 closure를 만든다.
방법 2) bind 메서드 활용
4-5 콜백 지옥과 비동기 제어
콜백 지옥? 콜백 함수를 전달하는 과정이 반복되어 코드 들여쓰기 수준이 깊어지는 현상
주로 이벤트 처리, 서버 통신과 같은 비동기 작업 수행하기 위함인데 가독성, 유지보수에 좋지 않다.
동기적
현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식
비동기적
현재 실행 중인 코드의 완료 여부와 무관하게 다음 코드 실행하는 방식
-별도의 요청, 실행 대기, 보류와 관련
setTimeout addEventListener XmlHttpRequest
해결법?
- 기명함수로 변환 → 일회성 함수를 모두 변수에 할당해야 하므로 헷갈릴 수 있고 메모리 차지
- 비동기를 동기처럼
- Promise
콜백 함수는 호출할 때 바로 실행되지만 내부에 resolve 또는 reject 함수를 호출하는 구문이 있는 경우 둘 중 하나가 실행되기 전까지느 then 또는 catch 구문으로 넘어가지 않는다. - Generator
- Promise + async/await
비동기 작업을 수행하고자 하는 함수 앞에 async
함수 내부에서 실질적인 비동기 위치마다 await → 뒤의 내용을 Promise로 자동 전환,
해당 내용이 resolve된 이후에야 다음으로 진행
- Promise
