(async/await), (Hoisting) 본캠프 TIL

3 번째 질문 (async/await)에 대하여 설명하시오. 

 

async/await는 JavaScript에서 비동기 코드를 동기적으로 작성할 수 있게 하는 문법입니다.

• async 키워드로 선언된 함수는 항상 Promise를 반환합니다.
• await 키워드는 Promise가 처리될 때까지 실행을 일시 중지하고, 결과를 반환합니다.
• 기존 Promise 체이닝의 가독성 문제와 "콜백 지옥"을 해결하기 위해 도입되었습니다.

예시 코드 입니다!

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

 

예상 꼬리 질문과 답변

Q1. async/await에서 에러 처리는 어떻게 하나요?
→ try/catch 블록으로 감싸서 처리합니다. catch 블록에서 Promise의 reject 값을 잡을 수 있습니다.

 

Q2. 여러 개의 비동기 작업을 병렬로 실행하려면?
→ Promise.all()과 함께 사용합니다.

const [result1, result2] = await Promise.all([asyncTask1(), asyncTask2()]);

 

Q3. async 함수와 일반 함수의 차이는?
→ async 함수는 암묵적으로 Promise를 반환하며, await 키워드를 사용할 수 있습니다.

 

4 번째 질문 (Hoisting)에 대하여 설명하시오. 

호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언이 스코프의 최상단으로 끌어올려지는 현상입니다.

• 변수 호이스팅: var로 선언된 변수는 선언부만 끌어올려지고, 값은 할당 시점에 초기화됩니다.

  console.log(a); // undefined (에러 X)
  var a = 5;

• 함수 호이스팅: 함수 선언문(function func() {})은 전체가 끌어올려져서 선언 전에 호출이 가능합니다.

  foo(); // "Hello"
  function foo() { console.log("Hello"); }

• 주의사항: let/const는 호이스팅되지만 TDZ(Temporal Dead Zone) 구간에서 접근 시 오류가 발생합니다

 

예상 꼬리 질문과 답변

Q1. let과 var의 호이스팅 차이는?
→ var는 선언과 동시에 undefined로 초기화되지만, let/const는 TDZ 구간이 있어 선언 전 접근 시 ReferenceError가 발생합니다.

 

Q2. 함수 표현식도 호이스팅되나요?
→ 함수 표현식(const foo = function() {})은 변수 호이스팅만 발생합니다.

bar(); // TypeError (bar는 undefined)
var bar = function() {};

 

Q3. 호이스팅으로 인한 문제를 방지하는 방법은?
→ 1. var 대신 let/const 사용
2. 함수 표현식 사용
3. 코드 상단에서 변수 선언 및 초기화