"ECMAScript" 태그로 연결된 16개 게시물개의 게시물이 있습니다.

모든 에피소드

웹의 다른 부분에서는​

Jason Orendorff가 Mozilla에서 JS 구문적인 특성에 대한 훌륭하고 심층적인 분석을 발표했습니다. 구현 세부사항은 다르더라도, 모든 JS 엔진은 이러한 특성과 관련된 동일한 문제에 직면합니다.

모든 에피소드 보기

이번 에피소드에서는 ECMAScript 언어와 그 문법 정의에 대해 더 깊이 들어가 보겠습니다. 만약 문맥 자유 문법(context-free grammar)에 익숙하지 않다면, 사양이 언어를 정의하기 위해 문맥 자유 문법을 사용하기 때문에 기본을 확인할 좋은 기회입니다. 더 쉬운 입문서를 원한다면 "Crafting Interpreters"의 문맥 자유 문법에 관한 챕터를 확인하거나, 더 수학적인 정의를 원한다면 위키피디아 페이지를 참고하세요.

우리는 사양 읽기 기술을 더 연습해볼 것입니다. 이전 에피소드를 아직 보지 않았다면, 지금 확인해보세요!

모든 에피소드

파트 2 준비되었나요?​

사양을 익히는 재미있는 방법은 우리가 알고 있는 JavaScript 기능에서 시작해 그것이 어떻게 명시되어 있는지 알아보는 것입니다.

경고! 이 에피소드에는 2020년 2월 기준 ECMAScript 사양에서 복사된 알고리즘이 포함되어 있습니다. 결국 오래되었을 것입니다.

우리는 속성이 프로토타입 체인에서 검색된다는 것을 알고 있습니다: 객체가 우리가 읽으려는 속성을 가지지 않는 경우, 우리는 프로토타입 체인 위로 올라가 그것을 찾거나 (더 이상 프로토타입을 가지지 않는 객체를 찾을 때까지) 찾습니다.

예를 들어:

const o1 = { foo: 99 };
const o2 = {};
Object.setPrototypeOf(o2, o1);
o2.foo;
// → 99

프로토타입 걷기는 어디에 정의되나요?​

이 행동이 어디에 정의되어 있는지 알아봅시다. 좋은 출발점은 객체 내부 메서드의 목록입니다.

[[GetOwnProperty]]와 [[Get]]이 모두 있지만, 우리는 자신 속성에만 제한되지 않는 버전을 찾고 있기 때문에 [[Get]]을 선택합니다.

불행히도, 속성 설명자 사양 타입에도 [[Get]]이라는 필드가 있으므로, 사양에서 [[Get]]을 탐색할 때 두 개의 독립적인 사용을 신중히 구분해야 합니다.

왜 o2.foo가 AssignmentExpression인가요?​

o2.foo는 할당이 없는 것처럼 보이기 때문에 AssignmentExpression처럼 느껴지지 않습니다. 왜 이것이 AssignmentExpression인가요?

사양은 실제로 AssignmentExpression이 매개변수로 사용되거나 할당의 오른쪽에 올 수 있도록 허용합니다. 예를 들어:

function simple(a) {
  console.log('매개변수는 ' + a);
}
simple(x = 1);
// → “매개변수는 1”이 로깅됩니다.
x;
// → 1

…및…

x = y = 5;
x; // 5
y; // 5

o2.foo는 아무것도 할당하지 않는 AssignmentExpression입니다. 이는 다음 문법 생산에서 비롯되며 각각은 마지막 케이스까지 "가장 간단한" 케이스를 선택합니다:

AssignmentExpression은 반드시 할당을 포함할 필요가 없으며, 단순히 ConditionalExpression일 수도 있습니다:

AssignmentExpression : ConditionalExpression

(이 외의 생산도 있지만, 여기서는 관련된 것만 보여줍니다.)

ConditionalExpression은 반드시 조건부 (a == b ? c : d)를 포함할 필요가 없으며, 단순히 ShortcircuitExpression일 수도 있습니다:

ConditionalExpression : ShortCircuitExpression

그리고 계속해서:

ShortCircuitExpression : LogicalORExpression

LogicalORExpression : LogicalANDExpression

LogicalANDExpression : BitwiseORExpression

BitwiseORExpression : BitwiseXORExpression

BitwiseXORExpression : BitwiseANDExpression

BitwiseANDExpression : EqualityExpression

EqualityExpression : RelationalExpression

RelationalExpression : ShiftExpression

모든 에피소드 보기

이 글에서는 명세에서 간단한 함수를 가져와 표기법을 이해해 봅니다. 시작해 볼까요!

서문​

JavaScript를 알고 있어도 그 언어 명세인 ECMAScript Language specification, 또는 줄여서 ECMAScript 명세를 읽는 것은 상당히 어려울 수 있습니다. 적어도 제가 처음으로 읽기 시작했을 때 그렇게 느꼈습니다.

ECMAScript 국제화 API 명세 (ECMA-402, 또는 Intl)는 날짜 형식 지정, 숫자 형식 지정, 복수형 선택 및 정렬과 같은 주요 지역별 기능을 제공합니다. Chrome V8과 Google 국제화 팀은 V8의 ECMA-402 구현에 기능을 추가하고 기술적 부채를 정리하며 성능과 다른 브라우저와의 상호 운용성을 개선하기 위해 협력하고 있습니다.

Hai Dang은 V8 팀에서 3개월 간의 인턴십 동안 [...array], [...string], [...set], [...map.keys()], 및 [...map.values()]의 성능을 개선하기 위해 작업했습니다. 그는 또한 Array.from(iterable) 역시 훨씬 빠르게 만들었습니다. 이 기사에서는 그의 수정 사항에 대한 상세 내용을 설명하며, 해당 변경 사항은 v7.2부터 V8에 포함되었습니다.

자바스크립트에서 비동기 처리는 전통적으로 빠르지 않다고 여겨졌습니다. 게다가 라이브 자바스크립트 애플리케이션, 특히 Node.js 서버를 디버그하는 일은 쉬운 일이 아닙니다. 특히나 비동기 프로그래밍에서는 그러합니다. 다행히도 시간이 지나면서 변화가 일어나고 있습니다. 이 글에서는 V8(및 어느 정도는 다른 자바스크립트 엔진들에서도)에서 비동기 함수와 프로미스를 최적화한 방법과 비동기 코드를 디버깅하는 경험을 향상시킨 방법을 설명합니다.

Array.prototype.sort는 V8에서 셀프 호스팅 JavaScript로 구현된 마지막 내장 함수 중 하나였습니다. 이를 이식하는 과정에서 다양한 알고리즘과 구현 전략을 실험할 기회를 얻었고, 마침내 V8 v7.0 / Chrome 70에서 안정적으로 작동하게 만들었습니다.

DataViews는 JavaScript에서 저수준 메모리 접근을 수행할 수 있는 두 가지 방법 중 하나입니다. 다른 하나는 TypedArrays입니다. 지금까지 V8에서 DataViews는 TypedArrays보다 덜 최적화되어 그래픽 집약적인 작업이나 이진 데이터 디코딩/인코딩 시 성능이 저하되었습니다. 이러한 이유는 주로 역사적인 선택에 기인한 것으로, 예를 들어 asm.js는 TypedArrays를 선택하고 DataViews를 제외했기 때문에 엔진들이 TypedArrays 성능에 집중하도록 장려됐습니다.