* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

async 함수에서 await를 만나면 멈춘다고 말씀해주셨는데 함수 안에 있는 _addCoffee에서 addCoffee를 불러올 때 왜 또 await를 걸어주는 것인가요?

coffeeMaker 안의 await를 제거하면 각 함수 호출이 동시에 섞여 제대로 출력되지 않는 점은 이해가지만 _addCoffee의 name은 이미 await를 해서 함수를 순차적으로 실행 중인데 왜 제대로 입력되지 않는 것인가요?

보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.

기존 코드 결과

에스프레소

에스프레소, 아메리카노

에스프레소, 아메리카노, 카페모카

에스프레소, 아메리카노, 카페모카, 카페라떼

_addCoffee의 await를 제거한 결과

[object Promise]

[object Promise], [object Promise]

[object Promise], [object Promise], [object Promise]

[object Promise], [object Promise], [object Promise], [object Promise]

(시간도 0.5초씩 기다리지 않음-> addCoffee 함수가 제대로 호출되지 않아 resolve(name) 반환값을 받지 못했고, setTimeout도 실행되지 않은 것 같음.)

작성한 코드 및 에러 메세지

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

// promise 반환하는 함수
var addCoffee = function(name) {
    return new Promise(function (resolve) {
        setTimeout(function(){
            resolve(name);
        }, 500);
    });
};


var coffeeMaker = async function () {           
    // 해당 함수 내에서 await를 만난다면 그 메서드가 끝날 때까지 기다려야한다. 단, 그 메서드는 항상 promise를 반환해야만 한다.
    var coffeeList = "";
    var _addCofffee = async function (name) {
        coffeeList += (coffeeList ? ", " : "") + (await addCoffee(name));    //여기 await 사용 이유가 궁금합니다!
    };


    await _addCofffee("에스프레소");    //해당 출력 다 할 때까지 기다린다.
    console.log(coffeeList);
    await _addCofffee("아메리카노");
    console.log(coffeeList);
    await _addCofffee("카페모카");
    console.log(coffeeList);
    await _addCofffee("카페라떼");
    console.log(coffeeList);
};


//함수 실행
coffeeMaker();

추가적으로 오류는 아니고 잘 실행되지만, 해당 위치의 await 에 ...밑줄이 있어 내용을 확인해보니 'await' has no effect on the type of this expression 라는 문구가 나옵니다. vscode의 quick fix로는 불필요한 await를 제거하라고 적히지만, 제거하면 위와 같이 실행되지 않았습니다. 그렇다면 저것은 신경쓰지 않아도 되는 말일까요...?