callback
다른 함수에 매개변수로 넘겨준 함수
말에서 유추할 수도 있겠지만 뒤에서 불러오겠다는 뜻을 지니고 있다.
바로 예제로 확인해 보자.
예제
![]
여기서 callbackTest의 callback 함수로서 good(), bad()가 쓰였다.
왜 callback을 쓰는 것인가
함수가 한두 개면 상관 없지만, 여러 개의 함수를 상황에 맞게
사용해야 할 때가 생긴다.
이런 상황에 사용할 수 있는 것이 callback이었다.
Callback Hell
원하던 상황에 callback을 사용해 함수를 넣다 보면
어느 샌가 함수의 함수의 함수로 길게 물고 늘어진
코드를 볼 수 있을 것이다.
비동기 처리는 되지만 가독성이 상당히 떨어지는 것을 볼 수 있다.
Callback Hell 탈출 방법
1. 기명 함수 사용
콜백함수를 변수에 저장을 해서 사용하는 것이다.
가독성도 높아질 뿐 아니라 함수간의 관계를 파악하기가 쉬워졌다.
2. Promise 사용
비동기 처리 구문에서 성공과 실패의 두 결과를 얻어내는 방법
기본 사용법
const promise = new Promise((resolve,reject) => {
// 내가 비동기 처리를 할 코드
});
(promise 비동기 작업이 성공한다면)
.then()
(promise 비동기 작업이 실패한다면)
.catch()
promise문을 쉽게 이해하려면
resolve와 .then
: Promise 구문이 성공과 관련되어 있다.
reject와 .catch
: Promise 구문이 실패와 관련되어 있다.
promise 비동기 작업 후 어떻게 처리될 지를 정할 수 있는데,
이 것을 .then과 .catch 로 설정 가능하다.
promise 예제 1
실행 결과는 '성공'이 출력된다.
promise 예제 2
위의 테스트로 알 수 있었던 것
1. 처음 선언하는 resolve,reject가
promise문의 결과에 영향을 미친다는 점이다.
위의 테스트는 먼저 선언된 순으로
resolve, reject, resolve가 출력이 된다.
- 순서상 resolve, reject, resolve가 출력이 되어야 하는데
resolve가 먼저 출력이 되고 reject가 나중에 출력이 되는 것을
확인할 수 있다. 이 점은 좀 더 공부를 하며 파악해야겠다.
Reference
promise문 개념
