[책] 모던 자바스크립트 Deep Dive로 공부하며 적은 내용입니다
콜백함수란 ?
함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수 라고한다.
매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.
콜백함수는 함수 외부에서 고차 함수 내부로 주입하기 때문에 자유롭게 교체할 수 있다는 장점이 있다.
즉, 고차 함수는 콜백 함수를 자신의 일부분으로 합성한다.
예제
//외부에서 전달받은 f를 n만큼 반복 호출한다. function repeat(n,f){ for(let i = 0; i < n; i++){ f(i) // i를 전달하면서 f를 호출 } } - let logAll = function(i){ // callback 함수 console.log(i) }/ - //반복 호출할 함수를 인수로 전달한다. repeat(5,logAll) // 0 1 2 3 4 , logAll 콜백함수를 전달받은 고차 함수
고차함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.
콜백 함수는 고차함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.
따라서 고차함수에 콜백함수를 전달할 때 콜백 함수를 호출하지 않고 함수 자체를 전달해야 한다.
일반적으로는 고차 함수 내부에만 호출 된다면 콜백함수를 익명 함수 리터럴로 정의하면서 곧바로 고차함수에 전달한다.
//익명 함수 리터럴을 콜백 함수로 고차 함수에 전달한다.
repeat(5,(i) => {
if(i % 2) console.log(i) // 1 3
})하지만, 콜백 함수를 전달받는 함수가 자주 호출 된다면 함수 외부에서 콜백 함수를 정의한 후 함수 참조를 고차 함수에 전달하는 편이 효율적이다
const logOdds = (i) => {
if(i % 2) console.log(i)
};
repeat(5, logOdds); // 1 3프로미스란 ?
에 앞서서 프로미스가 생기게 된 계기를 보자면,
자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다.
콜백 패턴은 콜백 헬로 인해
(1) 가독성이 나쁘고
(2) 비동기 처리 중 발생한 에러의 처리가 곤란하며
(3) 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다
- 비동기 : 특정 코드의 실행이 완료될때까지 기다리지않고 다음 코드를 먼저 수행하는 자바스크립트의 특성
- 콜백 헬이란(calll back hell)
- 콜백함수의 결과에 대한 처리를 수행하는 콜백함수가 또 다시 콜백 함수를 호출해야 한다면,
콜백함수의 호출이 중첩되어 복잡도가 높아지는 현상이 발생하는데 이를 콜백 헬 이라고 한다
- 비동기 함수의 처리결과 처리
- 비동기 함수는 비동기 처리결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수도 없다
비동기 함수의 처리결과에 대한 후속처리는 비동기 함수 내부에서 수행해야 한다 !
-> 콜백함수는 연속적인 비동기 패턴을 다룰 때 callback 결과에 대한 처리를 하는 callback을 호출하고 반복해서 실행시키며 비동기 작업을 진행하게 됩니다.
콜백함수의 호출이 중첩되어 코드의 가독성이 떨어지게 되고 콜백헬이라는 현상이 발생하게됩니다.
프로미스란 ? (promise)
프로미스는 자바스크립트의 비동기 처리상태와 처리결과를 관리하는 객체이며, 전통적인 콜백패턴이 가진 단점을 보완하기 위해 ES6에 도입 되었다.
또한 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다.
Promise는 비동기 처리를 수행할 콜백(exeutor)함수를 인수로 전달받는데 이 함수는 resolve와 reject 함수를 인수로 전달받는다
Promise는 비동기 처리가 어떻게 진행되는지 나타내는 상태정보인 peding, fulfilled ,rejected 가 있다
| 상태정보 | 의미 |
|---|---|
| pending | 비동기 처리가 완료되지 않음 |
| fulfilled | 비동기 처리 성공 |
| rejected | 비동기 처리 실패 |
- 프로미스가 생성되면
pending상태가 되고- 비동기 처리를 성공하면 결과를
resolve 함수에 인수로 전달하면서 호출하고fulfilled상태로 변경한다- 처리에 실패하면
reject 함수에 error를 인수로 전달하면서 호출하고rejected상태로 변경한다.
비동기 처리상태가 변화하면(성공/실패) 이에 따른 결과 처리를해야되는데
then 으로는 성공 된 값을 받아 처리하고 catch 로 에러 처리를 해줄 수 있습니다
Promise 는 프로미스체이닝을 통해 비동기 처리 결과를 전달 받아 후속처리를 하므로 비동기 처리를 위한 콜백패턴에서 발생하던 콜백 헬이 발생하지 않습니다.
etc
-
Promise.all 여러개의 비동기 처리를 모두 병렬 처리할 때 사용합니다.
-
async/await은 후속처리 메서드에 콜백함수를 전달해서 비동기 처리결과를 후속 처리 할 필요없이 동기처리처럼 프로미스를 사용 할 수 있습니다.
-
promise 생성방법 : 프로미스 생성자 함수를 new 연산자와 함께 호출하면 새로운 프로미스 객체를 생성합니다
참고자료
- 블로그 : https://simsimjae.tistory.com/420
- 블로그 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
- 책 : 모던 자바스크립트 Deep Dive
