[07] async await Hoisting

1. async & await 란?

자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법으로 기존 방식에서의 promise의 단점을 보완하기 위해서 등장함

2. promise

가. 기존에 get요청을 하게 되면 데이터 값이 아닌 promise값이 등장하게 됨. 이는 자바스크립트에서 비동기처리에서 사용되는 객체로 주로 서버에서 받아온 데이터를 화면에 표시하기 위해서 데이터를 요청하면 데이터를 받기 전 데이터를 화면에 표시하려면 error가 발생함. 이를 해결하기 위한 방법 중 하나

나. 상태처리 과정

1) Pending(대기) : 비동기 처리 로직이 완료되지 않음
2) Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
3) Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

3. 동기통신(async & await)

가. 비동기통신에서 동기통신으로 변경해주기 위해서는 async & await가 필요하다.

나. 사용법

async function 함수이름() {
	await 비동기 처리 메서드 명();
    

4. 호이스팅(Hoisting)

가. 변수 선언 방식

1) var
가) 초기 자바스크립트에 쓰던 방식
나) 이미 선언된 변수를 다시 사용할 수 있기 때문에 현재는 사용되지 않음

2) let, const : 비교적 최근에 쓰는 방식

나. 호이스팅이란?

1) 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
2) 즉 변수의 선언과 초기화를 분리하여 선언만 코드의 최상단으로 끌어올려주는 것
3) 변수를 정의하는 코드보다 사용하는 코드가 앞서서 등장할 수 있음

다. 함수의 호이스팅

1) 함수호출 코드가 함수보다 앞에 있어도 실행이 됨

name('김민영')
function name(a){
	console.log('제 이름은' + a + '입니다.')
    }
=== 제 이름은 김민영입니다.

2) 원래 같으면 함수의 호출이 더 먼저 사용되었기 때문에 error가 나와야 하지만 실행이 됨
3) const를 이용한 화살표 함수를 사용하면 해결됨
라. 변수의 호이스팅

console.log(num) 
var num; //선언
num = 6 //초기화

1) 변수 선언시 초기화를 제외한 선언만 호이스팅 함. 변수를 먼저 사용하고 그 후에서 선언 및 초기화를 하면 사용하는 시점의 변수는 기본 초기화 상태인 undefined가 됨
2) let, const로 선언한 변수도 호이스팅 되기는 하지만, var과 달리 undefined로 변수를 초기화 하지 않기 때문에 변수 선언 전에 사용 되면 error를 반환함