<div id="readability-page-1" class="page"><div><hr>
<blockquote>
원문 : Marja Hölttä, <a href="https://v8.dev/blog/understanding-ecmascript-part-1">Understanding the ECMAScript spec, part 1</a>
</blockquote>
<ul>
<li>ECMAScript 명세 이해, 2부 - <a href="https://v8.dev/blog/understanding-ecmascript-part-2">원글</a> / <a href="https://ui.toast.com/posts/ko_20221116_2">번역글</a></li>
<li>ECMAScript 명세 이해, 3부 - <a href="https://v8.dev/blog/understanding-ecmascript-part-3">원글</a> / <a href="https://ui.toast.com/posts/ko_20221116_3">번역글</a></li>
<li>ECMAScript 명세 이해, 4부 - <a href="https://v8.dev/blog/understanding-ecmascript-part-4">원글</a> / <a href="https://ui.toast.com/posts/ko_20221116_4">번역글</a> </li>
</ul>
이 글에서는 명세 내 간단한 함수를 이용하여 ECMAScript의 표기법을 알아본다.
<h2 id="서론"><a href="#%EC%84%9C%EB%A1%A0" aria-label="서론 permalink"></a>서론</h2>
JavaScript에 익숙하더라도 JavaScript 언어의 명세(<a href="https://tc39.es/ecma262/">ECMAScript Language specification 또는 줄여서 ECMAScript spec</a>)을 읽는 것은 상당히 어려울 수 있다. 적어도 필자가 명세를 처음 읽었을 때는 그렇게 느꼈다.
구체적인 예를 통해 명세를 이해해 보자.
다음 코드는 <code>Object.prototype.hasOwnProperty</code> 의 사용 예시이다.
<div data-language="js"><pre><code>const o = { foo: 1 };
o.hasOwnProperty('foo'); // true
o.hasOwnProperty('bar'); // false</code></pre></div>
예제에서 <code>o</code> 에는 <code>hasOwnProperty</code> 속성을 정의하지 않았으므로 프로토타입 체인을 따라 해당 프로퍼티를 찾는다. <code>o</code> 의 프로토타입인 <code>Object.prototype</code> 에서 해당 프로퍼티를 찾을 수 있다.
<code>Object.prototype.hasOwnProperty</code> 의 작동 방식을 설명하기 위해 명세에서는 의사코드를 사용한다.
<blockquote>
<a href="https://tc39.es/ecma262#sec-object.prototype.hasownproperty"><code>Object.prototype.hasOwnProperty(V)</code></a>
<code>hasOwnProperty</code> 메서드가 인수 <code>V</code> 와 함께 호출되었을 때, 다음 동작이 수행된다.
<ol>
<li><code>P</code> 를 <code>? ToPropertyKey(V)</code> 로 한다.</li>
<li><code>O</code> 를 <code>? ToObject(this value)</code> 로 한다.</li>
<li><code>? HasOwnProperty(O, P)</code> 를 반환한다.</li>
</ol>
</blockquote>
∙∙∙그리고∙∙∙
<blockquote>
<a href="https://tc39.es/ecma262#sec-hasownproperty"><code>HasOwnProperty(O, P)</code></a>
추상 연산 <code>HasOwnProperty</code>는 객체에 지정된 속성 키가 있는지 여부를 확인하여 <code>Boolean</code> 값을 반환한다. <code>HasOwnProperty</code>는 인수 <code>O</code>와 <code>P</code>를 사용하여 호출되며, 여기서 <code>O</code>는 객체이고 <code>P</code>는 속성 키이다. 이 추상 연산은 다음 동작을 수행한다.
<ol>
<li>단언:<code>Type(O)</code>은<code>Object</code>이다.</li>
<li>단언:<code>IsPropertyKey(P)</code>는<code>true</code>이다.</li>
<li><code>desc</code>를<code>? O.[[GetOwnProperty]](P)</code>로 한다.</li>
<li><code>desc</code>가<code>undefined</code>이면, <code>false</code>가 반환된다.</li>
<li><code>true</code>가 반환된다.</li>
</ol>
</blockquote>
그런데 <code>추상 연산</code>이 대체 무엇일까? <code>[[ ]]</code>로 묶인 것은 무엇을 의미할까? 왜 함수 앞에 <code>?</code>이 있을까? 또<code>단언(Assert)</code>은 무엇을 의미할까?
지금부터 알아보자.
<h2 id="언어-타입-및-명세-타입"><a href="#%EC%96%B8%EC%96%B4-%ED%83%80%EC%9E%85-%EB%B0%8F-%EB%AA%85%EC%84%B8-%ED%83%80%EC%9E%85" aria-label="언어 타입 및 명세 타입 permalink"></a>언어 타입 및 명세 타입</h2>
익숙한 것부터 시작하자. 명세는 우리가 JavaScript를 통해 이미 알고 있는 <code>undefined</code>, <code>true</code> 및 <code>false</code>와 같은 값을 사용합니다. 이것들은 모두 <a href="https://tc39.es/ecma262/#sec-ecmascript-language-types">언어 값</a>이며 명세에서도 정의한 언어 타입이다.
또한 명세는 내부적으로 언어 값을 사용한다. 예를 들어 내부 데이터 타입에 값이 <code>true</code> 또는 <code>false</code>인 필드가 있을 수 있다. 그에 반해 JavaScript 엔진은 보통 내부적으로 언어 값을 사용하지 않는다. 예를 들어, C++로 작성된 JavaScript 엔진은 보통 C++ <code>true</code> 및 <code>false</code>를 사용한다(JavaScript <code>true</code> 및 <code>false</code> 명세를 구현한 것과는 다르다).
언어 타입 외에도 <a href="https://tc39.es/ecma262/#sec-ecmascript-specification-types">명세 타입</a>도 사용한다. 이 타입은 JavaScript 언어에서는 사용하지 않고 명세에서만 사용하는 타입이다. JavaScript 엔진은 이 명세 타입을 (구현할 수 있지만) 구현할 필요가 없다. 이 글을 통해 명세 타입 레코드(및 subtype Completion Record)에 대해 알아보자.
<h2 id="추상-연산abstract-operations"><a href="#%EC%B6%94%EC%83%81-%EC%97%B0%EC%82%B0abstract-operations" aria-label="추상 연산abstract operations permalink"></a>추상 연산(Abstract Operations)</h2>
<a href="https://tc39.es/ecma262/#sec-abstract-operations">추상 연산</a>은 ECMAScript 명세에 정의된 함수들을 말하며, 명세를 간결하게 작성할 목적으로 정의되었다. JavaScript 엔진은 이 추상 연산을 엔진 내부에서 별도의 기능으로 구현할 필요가 없으며 애초에 JavaScript에서 직접 호출할 수도 없다.
<h2 id="내부-슬롯-및-내부-메서드"><a href="#%EB%82%B4%EB%B6%80-%EC%8A%AC%EB%A1%AF-%EB%B0%8F-%EB%82%B4%EB%B6%80-%EB%A9%94%EC%84%9C%EB%93%9C" aria-label="내부 슬롯 및 내부 메서드 permalink"></a>내부 슬롯 및 내부 메서드</h2>
<a href="https://tc39.es/ecma262/#sec-object-internal-methods-and-internal-slots">내부 슬롯 및 내부 메서드</a>는 <code>[[ ]]</code>로 묶인 이름을 사용한다.
내부 슬롯은 JavaScript 객체 또는 명세 타입의 데이터 멤버이며, 객체의 상태를 저장하는 데 사용된다. 내부 메서드는 JavaScript 객체의 멤버 함수이다.
예를 들어, 모든 JavaScript 객체에는 내부 슬롯 <code>[[Prototype]]</code>과 내부 메서드 <code>[[GetOwnProperty]]</code>가 있다.
내부 슬롯 및 메서드는 JavaScript에서 접근할 수 없다. 예를 들어 <code>o.[[Prototype]]</code>에 접근하거나 <code>o.[[GetOwnProperty]]()</code> 를 호출할 수 없다. JavaScript 엔진은 내부 사용을 위해 이를 구현할 수 있지만 꼭 그렇게 할 필요는 없다.
내부 메서드가 비슷한 이름의 추상 연산에 동작을 위임하는 경우도 있다. 일반 객체의 <code>[[GetOwnProperty]]</code>를 살펴보자.
<blockquote>
<a href="https://tc39.es/ecma262/#sec-ordinary-object-internal-methods-and-internal-slots-getownproperty-p"><code>[[GetOwnProperty]](P)</code></a> 
속성 키 <code>P</code>를 사용하여 <code>O</code>의 <code>[[GetOwnProperty]]</code> 내부 메서드를 호출하면 다음 동작이 수행된다.
<ol>
<li><code>! OrdinaryGetOwnProperty(O, P)</code>가 반환된다.</li>
</ol>
</blockquote>
(느낌표의 의미는 다음 장에서 알아볼 것이다.)
<code>OrdinaryGetOwnProperty</code>는 어떤 객체에도 연결되지 않았기 때문에 내부 메서드가 아니다. 대신 동작을 수행하는 객체를 매개변수로 전달한다.
<code>OrdinaryGetOwnProperty</code>는 일반 객체에서 동작하므로 <code>ordinary</code>라는 접두사를 붙인다. ECMAScript 객체는 일반 객체이거나 특수(exotic) 객체일 수 있다. 일반 객체는 필수 내부 메서드라는 메서드 집합에 대한 기본 동작을 가져야 한다. 객체가 기본 동작에서 벗어나면 특수 객체이다.
가장 잘 알려진 특수 객체는 <code>Array</code>인데, 길이(<code>length</code>) 속성이 다른 방식으로 동작하기 때문이다. 길이 속성에 값을 할당하면 <code>Array</code>에서 요소가 제거되는 것을 확인할 수 있다.
주요 내부 메서드는 <a href="https://tc39.es/ecma262/#table-5">여기</a>에서 확인할 수 있다.
<h2 id="completion-records"><a href="#completion-records" aria-label="completion records permalink"></a>Completion Records</h2>
<code>?</code> 와 <code>!</code>가 의미하는 것은 무엇일까? 질문의 답을 찾으려면 <a href="https://tc39.es/ecma262/#sec-completion-record-specification-type">Completion Records</a>을 살펴보자!
Completion Record는 명세 타입이다(명세 목적으로만 정의되었다). JavaScript 엔진은 해당 내부 데이터 타입을 구현할 필요가 없다.
Completion Record는 지정된 필드 집합을 가진 <code>record</code> 이다.
Completion Record에는 세 가지 필드가 있다.
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[[Type]]</code></td>
<td><code>normal</code>, <code>break</code>, <code>continue</code>, <code>return</code>, 혹은 <code>throw</code> 중에 하나,&nbsp;<code>normal</code> 을 제외한 모든 다른 타입들은&nbsp;abrupt completion 이다.</td>
</tr>
<tr>
<td><code>[[Value]]</code></td>
<td>completion이 발생했을 때 생성된 값이다. 예를 들어 함수의 반환 값 또는 exception(하나가 throw된 경우)이다.</td>
</tr>
<tr>
<td><code>[[Target]]</code></td>
<td>지시된 제어 전송에 사용된다.(이 글과 관련은 없다)</td>
</tr>
</tbody>
</table>
대부분의 추상 연산은 암묵적으로 <code>Completion Record</code>를 반환한다. 추상 연산이 Boolean과 같은 단순한 유형을 반환하는 것처럼 보이는 경우에도 암묵적으로 <code>normal</code> 타입의 <code>Completion Record</code> 로 감싼다. (<a href="https://tc39.es/ecma262/#sec-implicit-completion-values">Implicit Completion Values</a> 보기)
Note 1: 명세의 일부는 동작이 위와 다르다. <code>Completion Record</code>에서 값을 추출하지 않고 기본 값을 반환하며, 반환 값을 그대로 사용하는 일부 helper 함수도 있다. 이 경우 명세에서는 이를 분명히 표시한다.
Note 2: 명세 편집자는 <code>Completion Record</code> 처리를 좀 더 명확히 보여주려 한다.
알고리즘이 예외를 발생시킨다고 가정해보자. 이는 <code>[[Value]]</code>가 예외 객체인 <code>[[Type]]</code>&nbsp;<code>throw</code> 와 함께 <code>Completion Record</code> 를 반환함을 의미한다. 일단 <code>break</code>,&nbsp;<code>continue</code>, <code>return</code> 타입은 무시한다.
<a href="https://tc39.es/ecma262/#sec-returnifabrupt">ReturnIfAbrupt(argument)</a>는 다음 동작을 수행한다.
<blockquote>
<ol>
<li><code>argument</code>&nbsp;가 abrupt 라면,&nbsp;<code>argument</code> 반환한다.</li>
<li><code>argument</code>&nbsp;를&nbsp;<code>argument.[[Value]]</code> 로 설정한다.</li>
</ol>
</blockquote>
즉, <code>Completion Record</code>를 검사한다. abrupt completion 인 경우 즉시 반환한다. 그렇지 않으면 <code>Completion Record</code>에서 값을 추출한다.
<code>ReturnIfAbrupt</code>는 함수 호출처럼 보이지만 그렇지 않다. 이는 <code>ReturnIfAbrupt</code> 함수 자체가 아니라 <code>ReturnIfAbrupt()</code>가 발생한 함수를 반환하도록 한다. C와 같은 언어의 매크로와 더 비슷하다.
<code>ReturnIfAbrupt</code>는 다음과 같이 사용할 수 있다.
<blockquote>
<ol>
<li><code>obj</code>&nbsp;를&nbsp;<code>Foo()</code> 로 한다. (<code>obj</code>&nbsp;는 Completion Record.)</li>
<li><code>ReturnIfAbrupt(obj)</code></li>
<li><code>Bar(obj)</code>. (함수가 이 단락에 도달했다면,&nbsp;<code>obj</code>&nbsp;는 Completion Record 에서 추출한 값이다.)</li>
</ol>
</blockquote>
이제 <a href="https://tc39.es/ecma262/#sec-returnifabrupt-shorthands">물음표</a>가 나타난다. <code>? Foo()</code>는 <code>ReturnIfAbrrupt(Foo())</code>와 동일하다.
단축표기법 사용은 실용적이다. 매번 명시적으로 오류 처리 코드를 작성할 필요가 없기 때문이다.
마찬가지로, <code>val를 ! Foo() 로 한다</code>는 다음과 동일하다.
<blockquote>
<ol>
<li><code>val</code>&nbsp;를&nbsp;<code>Foo()</code>로 한다.</li>
<li>단언:&nbsp;<code>val</code>&nbsp;는 abrupt completion가 아니다.</li>
<li><code>val</code>&nbsp;를&nbsp;<code>val.[[Value]]</code>로 설정한다.</li>
</ol>
</blockquote>
지금까지 배운 것을 바탕으로 <code>Object.prototype.hasOwnProperty</code>를 다시 작성해보면 다음과 같다.
<blockquote>
<code>Object.prototype.hasOwnProperty(V)</code>
<ol>
<li><code>P</code>&nbsp;를&nbsp;<code>ToPropertyKey(V)</code>로 한다.</li>
<li><code>P</code>&nbsp;가 abrupt completion라면, <code>P</code> 를 반환한다.</li>
<li><code>P</code>&nbsp;를&nbsp;<code>P.[[Value]]</code> 로 설정한다.</li>
<li><code>O</code>&nbsp;를&nbsp;<code>ToObject(this value)</code>로 한다.</li>
<li><code>O</code>&nbsp;가 abrupt completion라면, <code>O</code> 를 반환한다.</li>
<li><code>O</code>&nbsp;를&nbsp;<code>O.[[Value]]</code> 로 설정한다.</li>
<li><code>temp</code>&nbsp;를&nbsp;<code>HasOwnProperty(O, P)</code>로 한다.</li>
<li><code>temp</code>&nbsp;가 abrupt completion라면, <code>temp</code> 를 반환한다.</li>
<li><code>temp</code>&nbsp;를&nbsp;<code>temp.[[Value]]</code> 로 설정한다.</li>
<li><code>NormalCompletion(temp)</code> 를 반환한다.</li>
</ol>
</blockquote>
∙∙∙그리고 <code>HasOwnProperty</code>를 다시 작성해보면 다음과 같다.
<blockquote>
<code>HasOwnProperty(O, P)</code>
<ol>
<li>단언:&nbsp;<code>Type(O)</code>&nbsp;는&nbsp;<code>Object</code>이다.</li>
<li>단언:&nbsp;<code>IsPropertyKey(P)</code>&nbsp;는&nbsp;<code>true</code>이다.</li>
<li><code>desc</code>&nbsp;를&nbsp;<code>O.[[GetOwnProperty]](P)</code>로 한다.</li>
<li><code>desc</code>&nbsp;가 abrupt completion라면, <code>desc</code> 를 반환한다.</li>
<li><code>desc</code>&nbsp;를&nbsp;<code>desc.[[Value]]</code> 로 설정한다.</li>
<li><code>desc</code>&nbsp;가&nbsp;<code>undefined</code>라면, <code>NormalCompletion(false)</code>를 반환한다.</li>
<li><code>NormalCompletion(true)</code>를 반환한다.</li>
</ol>
</blockquote>
느낌표 없이 <code>[[GetOwnProperty]]</code> 내부 메서드를 다시 작성할 수도 있다.
<blockquote>
<code>O.[[GetOwnProperty]]</code>
<ol>
<li><code>temp</code>&nbsp;를&nbsp;<code>OrdinaryGetOwnProperty(O, P)</code>로 한다.</li>
<li>단언:&nbsp;<code>temp</code>&nbsp;는 abrupt completion 가 아니다.</li>
<li><code>temp</code>&nbsp;를&nbsp;<code>temp.[[Value]]</code>로 한다.</li>
<li><code>NormalCompletion(temp)</code>를 반환한다.</li>
</ol>
</blockquote>
여기서 <code>temp</code> 는 다른 것과 충돌하지 않는 새로운 임시 변수라고 가정한다.
예시를 살펴보면 반환문이 <code>Completion Record</code>가 아닌 다른 것을 반환할 때 값을 암묵적으로 <code>NormalCompletion</code>로 감싼다는 것도 알 수 있다.
<h3 id="번외-return--foo"><a href="#%EB%B2%88%EC%99%B8-return--foo" aria-label="번외 return foo permalink"></a>번외: <code>Return ? Foo()</code></h3>
명세는 <code>Return ? Foo()</code> 표기법을 사용한다. 물음표는 왜 사용할까?
<code>Return ? Foo()</code>는 다음과 같이 동작한다.
<blockquote>
<ol>
<li><code>temp</code>&nbsp;를&nbsp;<code>Foo()</code>로 한다</li>
<li><code>temp</code>&nbsp;가 abrupt completion라면, <code>temp</code>를 반환한다.</li>
<li><code>temp</code>&nbsp;를&nbsp;<code>temp.[[Value]]</code>로 설정한다.</li>
<li><code>NormalCompletion(temp)</code>를 반환한다.</li>
</ol>
</blockquote>
이는 <code>Return Foo()</code>와 동일하다. abrupt completions 와 normal completions 모두에 대해 동일한 방식으로 동작한다.
<code>Return ? Foo()</code>는 편집상의 이유로만 사용되어 Foo가 Completion Record를 반환한다는 것을 더 명확하게 만든다.
<h2 id="단언assert"><a href="#%EB%8B%A8%EC%96%B8assert" aria-label="단언assert permalink"></a>단언(Assert)</h2>
명세에서의 단언은 알고리즘의 불변 조건을 의미한다. 이러한 정보는 명확성을 위해 추가된 것으로, 구현 시 요구 사항이 추가되지는 않는다. 따라서 구현 시 확인할 필요가 없다.
<h2 id="덧붙이기"><a href="#%EB%8D%A7%EB%B6%99%EC%9D%B4%EA%B8%B0" aria-label="덧붙이기 permalink"></a>덧붙이기</h2>
추상 연산은 다른 추상 연산(아래 그림 참조)으로 위임되지만, 이 글을 기반으로 해당 작업이 무엇인지 파악할 수 있다. 다른 명세 타입인 속성 설명자가 표시된다.
<img src="https://user-images.githubusercontent.com/3774171/200206045-3c631688-165c-44c7-8cff-10533a55c8bb.png" alt="Understanding_ECMAScript_part_1">
<h2 id="요약"><a href="#%EC%9A%94%EC%95%BD" aria-label="요약 permalink"></a>요약</h2>
우리는 간단한 메서드인 <code>Object.protype.hasOwnProperty</code>와 이 메서드가 호출하는 추상 연산에 대해 알아보았다. 오류 처리와 관련된 단축표기법 <code>?</code>와 <code>!</code>에도 익숙해졌다. 그리고 언어 타입, 명세 타입, 내부 슬롯 및 내부 메서드를 알아보았다.
<h2 id="유용한-링크"><a href="#%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A7%81%ED%81%AC" aria-label="유용한 링크 permalink"></a>유용한 링크</h2>
<a href="https://timothygu.me/es-howto/">How To Read the ECMA Specification</a>: 이 글에서 다루고 있는 대부분의 내용을 약간 다른 각도로 바라보고 작성된 튜토리얼이다.</div></div>

Weekly Pick RSS Feed

이 글에서는 명세 내 간단한 함수를 이용하여 ECMAScript의 표기법을 알아본다.

ECMAScript 명세 이해, 1부

댓글