async await 쓰는 비동기 동작에서 의문이 있습니다. 도와주세요~~

JavaScript
#1 
const getSuggestions = async () => {
  const wordQuery = inputField.value;
  const endpoint =`${url}${queryParams}${wordQuery}`;
  try {
    const response = await fetch(endpoint, {cache: 'no-cache'});
    if (response.ok) {
      const jsonResponse = await response.json();
    }
  } catch(error) {
    console.log(error);
  }
}

위 코드에서 제가 아는건 async 키워드를 쓴 function 안에서만 await 키워드를 쓸수있고 async 키워드를 쓴 함수는 promise 객체를 return 하는걸로 알고있구요 . 그리고 fetch() 로 request 를 하면 promise 객체 상태로 가져온다고 알고있습니다. await 을 하면 promise 객체가 resolve가 될때까지 기다리게 하는 키워드 로알고 있습니다. await response.json(); 이 코드는 왜 await 이 붙는거죠? response resolve 어 resolve callback 을 await 키워드를 쓰면 안넘겨주는데 어떻게 resolve callback 을 하는거죠 await 은 ? 어 뇌정지 오네요 알려주실 고수분있나요 . 여기서 저는 response.json() 을하는데 왜 await 을 붙여서하는지 의문이었습니다.

#2

우선 async/await 키워드를 하는 이유를 알기 위해선 자바스크립트의 동기/비동기 프로그래밍의 원리를 알아야 합니다. 자바스크립트의 기본적인 모든 코드는 비동기 코드이며, 내부에 동기를 필요로 하는 코드가 있지 않은 이상, 비동기 코드만 순차적으로 실행하는 것이죠. 그리고 비동기 코드는 다른 영역으로 이동하여 따로 처리를 합니다. 그래서 주신 코드를 비동기로만 처리하면 아래와 같이 쓸 수 있겠습니다.

const getSuggestions = () => {
  const wordQuery = inputField.value;
  const endpoint =`${url}${queryParams}${wordQuery}`;
  return fetch(endpoint, {cache: 'no-cache'}).then(response => {
    if (response.ok) {
      response.json()
          .then(jsonResponse => jsonResponse)
          .catch(error => console.log(error));
    }
  });
}

물론 비동기 코드로도 잘만 함수형 프로그래밍 형식을 도입해서 구현하면 예쁘게 하고 동일한 작동을 하겠지만, 일반적인 코드에선 절차적으로 하기 어렵다는 단점이 있습니다. 그래서 async/await 키워드를 도입해, 저 많은 .then()과 .catch()를 하나의 식과 try-catch로 변환할 수 있게 한 겁니다.

그리고 아시다시피, await 키워드는 async 함수 내부에서만 가능하며, Promise 객체에 적용할 수 있습니다. 따라서 const jsonResponse = await response.json()가 가능하다는 것은 response.json()또한 Promise 객체를 반환한다는 것을 유추할 수 있죠.