분류 javascript

V8 - 최상위 레벨 자세히 살펴보기

컨텐츠 정보

  • 조회 252 (작성일 )

본문

Top-level await 


최상위 레벨 await는 개발자가 async 함수 외부에서 await 키워드를 사용할 수 있게 합니다. 그것은 큰 비동기 함수처럼 작동하여 모듈을 가져 오는 다른 모듈이 신체 평가를 시작하기 전에 기다립니다.


The old behavior 


async/await가 처음 도입되었을 때 async 함수 외부에서 await를 사용하려고 시도하면 SyntaxError가 발생했습니다. 많은 개발자가 함수에 액세스하기 위해 즉시 호출 된 비동기 함수 표현식을 사용했습니다.


await Promise.resolve(console.log('?'));
// → SyntaxError: await is only valid in async function

(async function() {
  await Promise.resolve(console.log('?'));
  // → ?
}());

The new behavior 


Top-level await를 사용하면 위의 코드가 모듈 내에서 기대하는 방식으로 작동합니다.


await Promise.resolve(console.log('?'));
// → ?

참고 : Top-level await는 최상위 모듈에서만 작동합니다. 클래식 스크립트 또는 비동기가 아닌 함수는 지원하지 않습니다. 


사용 사례 


이러한 사용 사례는 사양 제안서 저장소에서 빌려옵니다.


Dynamic dependency pathing 


const strings = await import(`/i18n/${navigator.language}`);

이를 통해 모듈은 종속성을 결정하기 위해 런타임 값을 사용할 수 있습니다. 이것은 개발 / 생산 분할, 국제화, 환경 분할 등과 같은 것들에 유용합니다.


Resource initialization 


const connection = await dbConnector();

이를 통해 모듈은 자원을 나타내고 모듈을 사용할 수 없는 경우 오류를 생성 할 수 있습니다.


Dependency fallbacks 


다음 예제는 CDN A에서 JavaScript 라이브러리를 로드 하려고 시도하는데 실패하면 CDN B로 폴백합니다.


let jQuery;
try {
  jQuery = await import('https://cdn-a.example.com/jQuery');
} catch {
  jQuery = await import('https://cdn-b.example.com/jQuery');
}

모듈 실행 순서 


top-level await 상태에서 JavaScript가 가장 크게 변경되는 것 중 하나는 그래프에서 모듈 실행 순서입니다. JavaScript 엔진은 모듈 순서의 순회 방식으로 모듈을 실행합니다. 모듈 그래프의 가장 왼쪽에 있는 하위 트리부터 시작하여 모듈이 평가되고 바인딩이 내보내지며 형제가 실행되고 부모가 따라옵니다. 이 알고리즘은 모듈 그래프의 루트를 실행할 때까지 재귀적으로 실행됩니다.


top-level await 전에 이 순서는 항상 동기식이며 결정적이었습니다. 코드를 여러 번 실행하는 동안 그래프는 동일한 순서로 실행됩니다. top-level await가 시작되면 top-level await를 사용하지 않는 한 동일한 보증이 적용됩니다.


다음은 모듈에서 top-level await를 사용할 때 발생하는 상황입니다.

  1. await 중인 promise가 해결 될 때까지 현재 모듈의 실행이 지연됩니다.
  2. 부모 모듈의 실행은 호출한 자식 모듈 및 모든 해당 형제가 내보내기 바인딩을 기다릴 때까지 await됩니다.
  3. 형제 모듈과 상위 모듈의 형제는 그래프에 주기 또는 다른 awaited promise가 없다고 가정 할 때 동일한 동기 순서로 계속 실행할 수 있습니다.
  4. awaited promise가 해결 된 후 await를 호출 한 모듈이 실행을 재개합니다.
  5. awaited중인 다른 promise가 없는 한 상위 모듈 및 후속 트리는 동기식 순서로 계속 실행됩니다.

DevTools에서 아직 작동하지 않습니까? 


실제로 그렇습니다! Chrome DevTools, Node.js 및 Safari Web Inspector의 REPL은 잠시 동안 top-level await를 지원했습니다. 그러나 이 기능은 비표준이며 REPL! 언어 사양의 일부이며 모듈에만 적용되는 top-level await 제안과 다릅니다. 사양 제안의 의미와 완전히 일치하는 방식으로 최상위 레벨에 의존하는 프로덕션 코드를 테스트하려면 DevTools 또는 Node.js REPL뿐만 아니라 실제 앱에서 테스트 해야 합니다!


https://v8.dev/features/top-level-await 



V8