콜백함수(Callback Function)

콜백함수는 위키백과의 설명에 따르면 "다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다." 라고 써있다.
이 문장만 봐서는 이해가 잘 되지 않는다.

이해하기쉽게 간단한 예제코드로 이해해보자

 function greetingName(name, callback) {
  console.log(name)
  callback()
}

function greeting() {
  console.log("안녕")
}

greetingName('짱구',greeting) // "짱구"
                             // "안녕"

위의 코드를 보면 greetingName함수의 매개변수로 변수와 callback(함수)를 받고 내부의 console.log(name)을 실행 후 callback함수를 호출하도록 작성하였습니다. 그리고 greeting함수를 작성하고 greetingName함수를 실행할 때 인자로 문자열과 greeting함수를 주었다.
그 결과로 console.log(name)이 실행되고 callback함수가 실행된걸 볼 수 있다.
이렇게 함수 안에서 실행되는 다른 함수를 콜백함수라고 한다.

콜백지옥

이미지 출처

위의 이미지를 보듯이 비동기 처리를 할 때 콜백함수를 이용하게 되면 중첩해서 작성하기 때문에 복잡도가 증가하고 에러나 예외처리를 하기 어렵게 된다.
이러한 문제점 때문에 ES6에서 프로미스(Promise)가 등장하게 되었다.

참고) 비동기 처리란? 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행한다.

프로미스(Promise)

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이며, 콜백지옥을 해결하기 위해 ES6에서 등장하게 되었다. 그리고 내부적으로 예외처리 구조가 탄탄하기 때문에 오류 처리에도 편하다.

프로미스의 상태

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

new Promise(); // new Promise() 메서드를 호출하면 Pending 상태가 된다.

// new Promise() 메서드를 호출할 때 콜백함수를 선언할 수 있으며 콜백함수의 인자는 resolve, reject이다. 그리고 변수에 저장하여 콘솔을 출력하면 Pending상태가 출력된다.
const a = new Promise((resolve, reject) => {});
console.log(a); // Promise { <pending> }

• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환한 상태

// 콜백 함수의 인자 resolve를 실행하면 Fulfilled 상태가 된다.
new Promise((resolve, reject) => {
    resolve();
};

// 이행 상태가 되면 then()을 이용해서 결과 값을 받을 수 있다.
new Promise((resolve, reject) => {
    resolve();
}).then(() => {
    console.log("굿");
});

• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

// reject()를 호출하면 Rejected 상태가 된다.
new Promise((resolve, reject) => {
    reject();
});

// 실패 상태가 되면 catch()를 통해 실패 처리 값을 받을 수 있다.
new Promise((resolve, reject) => {
    reject();
}).catch(() => {
    console.log("에러");
});

참고한사이트
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98
https://medium.com/@flqjsl/%EC%BD%9C%EB%B0%B1%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-56c26e1f1bc3
https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
https://shin1303.tistory.com/entry/JavaScript-Promise%ED%94%84%EB%A1%9C%EB%AF%B8%EC%8A%A4-%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80