함수에 async 가 붙으면 함수의 반환값은 Promise 객체가 된다. 즉 비동기 함수가 된다.

// 과정 1 ------------------ 동기 함수 ★★
function fetchUser() {
    // do network reqeust in 10 sec... -> 10초 걸리는 함수
    return 'ellie';
}

// ▼ ▼ ▼

// 과정 2 ------------------ 비동기 함수 (Promise) ★★
function fetchUser() {
    return new Promise((resolve, reject) => {
        // do network reqeust in 10 sec... -> 10초 걸리는 함수

				// resolve 가 없으면 Promise 상태는 pending 상태가 된다.   - 진행 중인 상태

        // resolve();
				// resolve 가 있으면 Promise 상태는 fulfilled 상태가 된다. - 완료된 상태
        resolve('ellie');
    });
}

// ▼ ▼ ▼

// 과정 3 ------------------ 비동기 함수 (async) ★★
async function fetchUser() {
    // do network reqeust in 10 sec... -> 10초 걸리는 함수
    return 'ellie';
}

// (과정3)의 결과
const user = fetchUser();
console.log(user);                        // Promise {<fulfilled>: "ellie"} ★

user.then((value) => console.log(value)); // ellie ★
// 더 간단히
user.then(console.log);                   // ellie ★

※ 비동기로 처리하는 이유?

: 다음과 같이 동기적으로 함수를 호출을 하는데,

함수의 수행이 완료되는데 10초가 걸리면 그동안 사용자는 텅빈 웹 페이지를 기다려야 한다.

이를 해결하고자 비동기로 처리하는 방법으로 Promise 가 존재한다.

그러면 동기적으로 처리가 되는동안 비동기적으로 처리가 되어 보다 빠른 웹 페이지를 제작 할 수 있다.