callback , promise, async/await

 

Callback

javascript에서는 callback 함수는 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미

 

callback 단점 

- 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상발생 (callback hell )

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

callback hell 의해결 -> (promise)패턴 도입 

---

Promise

-Promise는 콜백 문제를 해결하기 위해 제안된 패턴 중 하나로 여러 라이브러리를 통해 지원되어 오다가,ECMAScript 2015 표준으로 지정되었다.

-Promise가 return되는 경우, 비동기 작업이 끝나 resolve나 reject가 호출될 때까지는 정지해 있다가, resolve나 reject가 실행되면 then이나 catch를 호출

somethingAsync(value1)
    .then((result) => {
        // 성공시 수행할 작업
    })
    .catch((error) => {
        // 실패시 수행할 작업
    });

---

Async Function (async - await)

- Promise의 체이닝 을 계속하면 코드가 난잡해지므로 async 와 await 사용하여 동기식으로 사용하는것처럼 코드를 정리할 수 있다.

async function f() {
    try {
        var result = await somethingAsync(value1);
        // 성공시 수행할 작업
    } catch (error) {
        // 실패시 수행할 작업
    }
}

• resolve : 정상적으로 수행된 함수 
• reject: 기능을 수행하다가 문제가 생기면 호출하게될 함수 

await는 promise가 완료될 때까지 함수를 정지시키고, 완료되었을 경우 resolve되는 변수를 함수의 리턴값인 것처럼 사용할 수 있게 한다. 만약 promise가 reject된 경우, try ~ catch 구문을 이용해 잡을 수 있다.

await를 사용하기 위해서는 그 코드가 실행되는 함수가 async function으로 선언되어야 하며, async function에서 리턴되는 값은 promise에서 resolve하는 것으로 취급한다.

async - await를 사용함으로써, 동기 함수와 완전히 같은 방식으로 비동기 함수를 사용하면서, 비동기 함수의 장점을 잃지 않을 수 있다.

단점이라면 아직까지 콜백 방식이나 Promise를 직접 이용하는 것보다 퍼포먼스가 낮다는 점. 그러나 async function은 자바스크립트 생태계에 빠르게 자리잡았고, 오히려 기존 콜백 방식의 코드를 보기 어려워질 지경이 되었다.

 

 

 

참고 

https://librewiki.net/wiki/%EC%BD%9C%EB%B0%B1_%EC%A7%80%EC%98%A5