Storage

ES2022에 추가된 최신 문법. 이제 더이상 await를 쓰기 위해 async를 강제하지 않아도 된다.

await를 사용하기 위해선 항상 async함수 안에서 사용해야 했기에
억지로 익명 async함수를 써서 await를 이용했다. 아래처럼

let res;

(async () => {

    rest = await fetch();

})()

이 무슨 귀찮은 짓이냐, 이제 Top-level await 을 통해 아래처럼 사용가능

let res = await fetch();

개 깔꼼!

한줄요약 : 비동기 함수를 호출시점에는 await를 사용하지 않고 특정 변수에 담은 뒤, 해당 변수를 사용시에만 await을 붙여서 써라!

알다싶이 await 문법은 비동기 로직을 동기로직(순차처리)처럼 사용하기 위해 사용하는 문법이다.

그런데 만약 특정 로직이 순차적으로 처리되야 할 필요가 없다면?

예를들어 두명의 회원정보를 가져와서 하나의 배열로 리턴하는 list 함수가 있다고 가정해 보자

async function getUser(id) {
   return fetch("getuser");
}

async function getUserList() {
     let result1 = await getUser(1);
     let result2 = await getUser(2);
     return [result1, result2]
}

위와 같이 작성한 뒤 getUserList 함수를 실행한다면 
user 1 정보를 가져올때 까지 result2는 기다리고 있다가
user 1 정보를 가져온 뒤 result2에 user 2 정보를 가져오는 함수를 실행한다.

결과적으로 Javascript의 비동기 ( None blocking 동시성 )효을성을 사용하지 못하는 것이다.
하지만 아래와 같이 한다고 가정해 보자

async function getUser(id) {
   return fetch("getuser");
}

async function getUserList() {
     let result1 = getUser(1); // 비동기 함수를 호출시는 await를 빼서 비동기로 결과를 가져온다
     let result2 = getUser(2);
     let result_final = [await result1, await result2]; // 이미 가져온 Promise 객체를 꺼낼때(?) 만 await를 사용하여 꺼낸다
     return result_final
}

위와 같이 작성 시 비동기 함수를 호출시는 순차적으로 결과를 기다린 뒤 실행되는게 아니라 비동기로 실행된다.
따라서 최초 함수 호출시 result1 과 result2 에는 pending된 Promise 객체가 담겨있을 것이다.
하지만 result2는 result1이 완료될 때까지 기다릴 필요가 없기 때문에 실행시간은 이론적으로 절반정도 줄어들 것이다.

그렇다면 해당 결과를 순차적으로 배열에 담아 리턴해야 한다면?
여기서 핵심이 나온다. 비동기 호출로 return 받은 Promise 객체를 담은 변수 (result1,2)를 await 로 선언하여 
사용하면 (재할당, print, return 등 ) 해당 값을 동기 형태로 사용할 수 있다. 이것이 핵심!!

내가 선언한 함수를 특정 변수에 오브젝트로 담아 재사용 시,
해당 오브젝트 선언당시의 환경을 그대로 기억하여 마치 State 관리를
하는것과 같은 효과를 만들 수 있는 환경에 대한 개념(?) 이다.

즉 클로저란 클로저를 발생시키는 환경을 말한다.

function outFunc () {
     var x = '10';

    return function innerFunc(y) {
        return x = x + y;    
    }   
}

const objectVar = outFunc();

objectVar(1); // 11;
objectVar(1); // 12;
objectVar(1); // 13;

위의 예제를 보면 한번 선언된 objectVar 변수를 재활용하여
해당 함수를 최초 선언한 당시의 환경 ( 지역,전역 변수등 ) 을 그대로
기억하여 State 변수 관리가 되는것을 볼 수 있다.

물론 위와같은 부분을 전역 변수를 통하여 해결할 수도 있지만,
전역 변수의 경우 해당 스코프 체인내의 어떤 부분에서라도 변경이 잃어날 수 있기에
신뢰성이 떨어지는 반면, 클로저 환경은 그에 비해 Private한 환경을 제공하기에 ( 선언된 오브젝트 외엔 접근 불가 )
실수를 할 확률이 줄어든다.

그런데...이게 클래스 개념이랑 무슨 차이?