<div id="readability-page-1" class="page"><div><img src="http://roy-jung.github.io/images/category-es.png">tc39에서 진행하고 있는 ECMAScript의 다음 버전들 및 그 후보들을 알아본다. 그 중 본 글에서는 Stage 4(ES2016 및 ES2017에 새로 도입되기로 확정된 기능들)을 살펴보겠다.


<h2 id="ECMAScript-Proposals"><a href="#ECMAScript-Proposals" title="ECMAScript Proposals?"></a>ECMAScript Proposals?</h2>ECMAScript2015(ES6)가 출범한지 어느덧 1년 반 여의 세월이 흘렀다. 그 사이 ECMAScript2016가 릴리즈 되었고(2016. 6.), 내년 중반에는 ES2017이 릴리즈될 예정이다.
<blockquote>
ECMAScript2015는 기존 ES3, ES5의 흐름에 따라 ES6로 부르기도 했으나, ECMAScript2016부터는 ‘해마다 표준이 추가됨’을 강조하고자 ES 뒤에 해당 년도를 붙인 것만을 정식 명칭으로 하기로 결정했다고 한다. 사실 ES6와 ES2015, ES7와 ES2016 등을 매칭하기엔 끝의 숫자가 하나씩 달라서 헷갈리던 참이었는데, 본 글을 읽는 독자분들께서도 정식 명칭을 사용하시면 원활한 의사소통을 위해서도 좋을 것 같다.
</blockquote>
javascript의 추가 제안사항들을 회의와 테스트를 거쳐 선별, 해마다 javascript 표준안을 정하는 단체인 <a target="_blank" rel="noopener" href="http://www.ecma-international.org/memento/TC39.htm">tc39</a>는, 각 제안 내용을 0 ~ 4 단계로 분류하고 있다.


<table>
<thead>
<tr>
<th>Stage</th>
<th>description</th>
</tr>
</thead>
<tbody><tr>
<td>0</td>
<td>Strawman</td>
</tr>
<tr>
<td>1</td>
<td>Proposal</td>
</tr>
<tr>
<td>2</td>
<td>Draft</td>
</tr>
<tr>
<td>3</td>
<td>Candidate</td>
</tr>
<tr>
<td>4</td>
<td>Finished</td>
</tr>
</tbody></table>
참고 : <a target="_blank" rel="noopener" href="http://www.2ality.com/2015/11/tc39-process.html">2ality - The TC39 process for ECMAScript features</a>
앞으로 연재 형태로 4단계부터 1단계까지에 걸쳐 제안된 기능들을 살펴보고자 한다. 본 글에서는 우선 Stage 4(ES2016 표준 및 ES2017 도입 예정안)를 살펴보겠다.
<hr>


<h2 id="Stage-4"><a href="#Stage-4" title="Stage 4"></a>Stage 4</h2>표준안에 추가될 것이 결정된 내용. 이 단계의 제안들은 잠정적으로 다음 년도 ECMAScript 표준안에 도입될 것이나, 경우에 따라 연기될 가능성도 존재한다. 이미 ECMAScript 2016는 릴리즈된 상태이며, ECMAScript 2017에 도입될 내용도 거의 결정되었다. ES2016의 경우 대부분의 최신 모던브라우저에 기능 구현이 되어 있다.


(ES2016에 도입된 내용들이 아직도 Stage 4에 표기되어 있는 이유는… 단순히 업데이트를 안한 것일까?)


<h3 id="2016-Array-prototype-includes"><a href="#2016-Array-prototype-includes" title="[2016] Array.prototype.includes"></a>[2016] Array.prototype.includes</h3><a target="_blank" rel="noopener" href="https://github.com/tc39/Array.prototype.includes/">Array.prototype.includes</a>
기존에는 배열 요소 중에 어떤 값이 있는지 여부를 확인하기 위해 다음과 같은 방식을 이용해왔다.
<figure><table><tbody><tr><td><pre>1 2 3 </pre></td><td><pre>if (arr.indexOf(el) !== -1) { ... } </pre></td></tr></tbody></table></figure>

이 방식은
<ul>
<li>의미론적으로 와닿지 않는 방식이고,</li>
<li><code>NaN</code>을 제대로 판별할 수 없는 문제가 있다(<code>[NaN].indexOf(NaN) === -1</code>).</li>
</ul>
이에 <code>Array.prototype.includes</code> 메소드가 ES2016 최종스펙에 도입되었다.
<figure><table><tbody><tr><td><pre>1 </pre></td><td><pre>Array.prototype.includes(value) </pre></td></tr></tbody></table></figure>

<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td><pre>console.log([1, 2, 3].includes(2)) console.log([1, 2, 3].includes(4)) console.log([1, 2, NaN].includes(NaN)) console.log([1, 2, -0].includes(+0)) console.log([1, 2, +0].includes(-0)) console.log(['a', 'b', 'c'].includes('a')) console.log(['a', 'b', 'c'].includes('a', 1)) </pre></td></tr></tbody></table></figure>



<h3 id="2016-Exponentiation-Operator"><a href="#2016-Exponentiation-Operator" title="[2016] Exponentiation Operator **"></a>[2016] Exponentiation Operator <code>**</code></h3><a target="_blank" rel="noopener" href="https://github.com/rwaldron/exponentiation-operator">Exponentiation Operator</a>
다른 프로그래밍 언어들에서 일반적으로 사용되는 문법을 도입하였다. <code>x ** y</code>는 x의 y제곱을 의미하며, 이는 Math.pow(x, y)와 완전히 동일하다.
<figure><table><tbody><tr><td><pre>1 </pre></td><td><pre>number ** number </pre></td></tr></tbody></table></figure>

<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </pre></td><td><pre>console.log(Math.pow(2, 3) === 2 ** 3) console.log(2 ** 3) let a = 3 a **= 4 console.log(a) 10 ** -1 2.5 ** 2 3 ** 2.5 2 ** (3 ** 2) 2 ** ((3 ** 2)( 2 ** 3, ) ** 2) </pre></td></tr></tbody></table></figure>



<h3 id="2017-Object-values-Object-entries"><a href="#2017-Object-values-Object-entries" title="[2017] Object.values / Object.entries"></a>[2017] Object.values / Object.entries</h3><a target="_blank" rel="noopener" href="https://github.com/tc39/proposal-object-values-entries">Object.values / Object.entries</a>
ES2015의 <code>Map</code>, <code>Set</code>, <code>Array</code> 등에는 <code>[Map/Set/Array].prototype.keys</code>, <code>[Map/Set/Array].prototype.values</code>, <code>[Map/Set/Array].prototype.entries</code>의 메소드가 있으며, 이 메소드들은 각각 이터레이터를 반환한다. 한편 <code>Object</code>에는 <code>Object.keys</code> 라는 스태틱 메소드(ES5)만이 존재하며, 결과는 이터레이터가 아닌 배열을 반환한다.
ES2015에서 추가된 타 데이터타입의 메소드들과의 형평성을 맞추면서 기존 ES5 문법과의 통일성을 유지하기 위해, Object에는 스태틱 메소드로 <code>values</code>와 <code>entries</code>를 추가할 예정이다. 각각 값으로만 구성된 배열, [키, 값]의 쌍으로 구성된 2차원배열을 반환한다.
<figure><table><tbody><tr><td><pre>1 2 </pre></td><td><pre>Object.values(object) Object.entries(obj) </pre></td></tr></tbody></table></figure>

<figure><table><tbody><tr><td><pre>1 2 3 4 </pre></td><td><pre>const obj = { a: 1, b: 2, c: 3 } console.log(Object.keys(obj)) console.log(Object.values(obj)) console.log(Object.entries(obj)) </pre></td></tr></tbody></table></figure>



<h3 id="2017-String-padding"><a href="#2017-String-padding" title="[2017] String padding"></a>[2017] String padding</h3><a target="_blank" rel="noopener" href="https://github.com/tc39/proposal-string-pad-start-end">String.prototype.padStart / String.prototype.padEnd</a>
최대 길이보다 짧은 문자열에 대해서 그 여백에 지정한 문자열을 반복하여 채우는 메소드이다. padStart는 문자열의 좌측에 여백을 지정하며, padEnd는 그 반대이다. 두 메소드 모두 <code>maxLength</code>보다 긴 문자열에 대해서는 동작하지 않는다.
<figure><table><tbody><tr><td><pre>1 2 </pre></td><td><pre>String.prototype.padStart(maxLength[, padString]) String.prototype.padEnd(maxLength[, padString]) </pre></td></tr></tbody></table></figure>

<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 </pre></td><td><pre>'abc'.padStart(10) 'abc'.padStart(10, '12') 'abc'.padStart(5, '1234567') 'abcde'.padStart(3, '12') 'abc'.padEnd(10) 'abc'.padEnd(10, '12') 'abc'.padEnd(5, '1234567') 'abcde'.padEnd(3, '12') </pre></td></tr></tbody></table></figure>



<h3 id="2017-Object-getOwnPropertyDescriptors"><a href="#2017-Object-getOwnPropertyDescriptors" title="[2017] Object.getOwnPropertyDescriptors"></a>[2017] Object.getOwnPropertyDescriptors</h3><a target="_blank" rel="noopener" href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Object.getOwnPropertyDescriptors</a>
객체의 프로퍼티 속성들을 기술한 객체를 반환한다. <code>Object.defineProperties</code>의 활용도를 높이는 계기가 될 것으로 예상한다.
<figure><table><tbody><tr><td><pre>1 </pre></td><td><pre>Object.getOwnPropertyDescriptors(obj) </pre></td></tr></tbody></table></figure>

<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 </pre></td><td><pre>const res = Object.getOwnPropertyDescriptors({ a: 1 }) console.log(res.a) </pre></td></tr></tbody></table></figure>

<code>Object.assign</code>을 이용하면 원본 객체의 getter / setter 가 제대로 복사되지 않는 문제가 있었다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 </pre></td><td><pre>const obj = { get a() { return this.b }, set a(v) { console.log(v) }, } obj.a = 10 console.log(obj.a) const obj2 = Object.assign({}, obj) obj2.a = 20 console.log(obj2.a) </pre></td></tr></tbody></table></figure>

<code>Object.getOwnPropertyDescriptors</code>를 이용하면 제대로 복사가 이뤄질 수 있다.
<figure><table><tbody><tr><td><pre>1 2 3 </pre></td><td><pre>const obj3 = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj)) obj3.a = 30 console.log(obj3.a) </pre></td></tr></tbody></table></figure>

참고 : <a target="_blank" rel="noopener" href="http://www.2ality.com/2016/02/object-getownpropertydescriptors.html">2ality - ES proposal: Object.getOwnPropertyDescriptors()</a>


<h3 id="2017-Trailing-commas-in-function-parameter-lists-and-calls"><a href="#2017-Trailing-commas-in-function-parameter-lists-and-calls" title="[2017] Trailing commas in function parameter lists and calls"></a>[2017] Trailing commas in function parameter lists and calls</h3><a target="_blank" rel="noopener" href="https://github.com/tc39/proposal-trailing-function-commas">Proposal to allow trailing commas in function parameter lists</a>
함수 파라미터들 중 마지막 값 뒤에 찍힌 콤마를 오류로 잡지 않게 된다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 </pre></td><td><pre>function n(a, b) { console.log(a, b) } n('a', 'b') </pre></td></tr></tbody></table></figure>

이를 활용하면 다음과 같이 버전관리 도구 등에서 바뀐 내용을 보다 명확하게 확인할 수 있게 된다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </pre></td><td><pre> function x(a, b) { console.log(a, b) } x(10, 20) function x( a, b, c, ) { console.log(a, b, c) } x( 10, 20, 30, ) </pre></td></tr></tbody></table></figure>



<h3 id="2017-Async-function"><a href="#2017-Async-function" title="[2017] Async function"></a>[2017] Async function</h3><a target="_blank" rel="noopener" href="https://github.com/tc39/ecmascript-asyncawait">Async Function</a>
비동기 데이터처리를 간단한 방식으로 구현할 수 있게 된다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td><pre>async function fetchJson(url) { try { let request = await fetch(url) let text = await request.text() return JSON.parse(text) } catch (error) { console.log(`ERROR: ${error.stack}`) } } </pre></td></tr></tbody></table></figure>

표기법은 다음과 같다.
<ul>
<li>비동기 함수 선언문 : <code>async function foo() {}</code></li>
<li>비동기 함수 표현식 : <code>const foo = async function () {}</code></li>
<li>비동기 메소드 정의 : <code>let obj = { async foo() {} }</code></li>
<li>비동기 화살표함수 정의 : <code>const foo = async () =&gt; {}</code></li>
</ul>
참고: <a target="_blank" rel="noopener" href="http://www.2ality.com/2016/02/async-functions.html">2ality - async functions</a>
</div></div>

RoyJung _ dev blog

tc39에서 진행하고 있는 ECMAScript의 다음 버전들 및 그 후보들을 알아본다.
그 중 본 글에서는 Stage 4(ES2016 및 ES2017에 새로 도입되기로 확정된 기능들)을 살펴보겠다.
 
ECMAScript Proposals?
ECMAScript2015(ES6)가 출범한지 어느덧 1년 반 여의 세월이 흘렀다.
그 사이 ECMAScript2016가 릴리즈 되었고(2016. 6.), 내년 중반에는 ES2017이 릴리즈될 예정이다.
ECMAScript2015는 기존 ES3, ES5의 흐름에 따라 ES6로 부르기도 했으나, ECMAScript2016부터는 ‘해마다 표준이 추가됨’을 강조하고자 ES 뒤에 해당 년도를 붙인 것만을 정식 명칭으로 하기로 결정했다고 한다. 사실 ES6와 ES2015, ES7와 ES2016 등을 매칭하기엔 끝의 숫자가 하나씩 달라서 헷갈리던 참이었는데, 본 글을 읽는 독자분들께서도 정식 명칭을 사용하시면 원활한 의사소통을 위해서도 좋을 것 같다.
javascript의 추가 제안사항들을 회의와 테스트를 거쳐 선별, 해마다 javascript 표준안을 정하는 단체인 tc39는, 각 제안 내용을 0 ~ 4 단계로 분류하고 있다.
Stagedescription
0Strawman
1Proposal
2Draft
3Candidate
4Finished
참고 : 2ality - The TC39 process for ECMAScript features
앞으로 연재 형태로 4단계부터 1단계까지에 걸쳐 제안된 기능들을 살펴보고자 한다.
본 글에서는 우선 Stage 4(ES2016 표준 및 ES2017 도입 예정안)를 살펴보겠다.
 
Stage 4
표준안에 추가될 것이 결정된 내용. 이 단계의 제안들은 잠정적으로 다음 년도 ECMAScript 표준안에 도입될 것이나, 경우에 따라 연기될 가능성도 존재한다.
이미 ECMAScript 2016는 릴리즈된 상태이며, ECMAScript 2017에 도입될 내용도 거의 결정되었다. ES2016의 경우 대부분의 최신 모던브라우저에 기능 구현이 되어 있다.
(ES2016에 도입된 내용들이 아직도 Stage 4에 표기되어 있는 이유는… 단순히 업데이트를 안한 것일까?)
 
[2016] Array.prototype.includes
Array.prototype.includes
기존에는 배열 요소 중에 어떤 값이 있는지 여부를 확인하기 위해 다음과 같은 방식을 이용해왔다.
이 방식은
의미론적으로 와닿지 않는 방식이고,
NaN을 제대로 판별할 수 없는 문제가 있다([NaN].indexOf(NaN) === -1).
이에 Array.prototype.includes 메소드가 ES2016 최종스펙에 도입되었다.
 
[2016] Exponentiation Operator **
Exponentiation Operator
다른 프로그래밍 언어들에서 일반적으로 사용되는 문법을 도입하였다.
x ** y는 x의 y제곱을 의미하며, 이는 Math.pow(x, y)와 완전히 동일하다.
 
[2017] Object.values / Object.entries
Object.values / Object.entries
ES2015의 Map, Set, Array 등에는 [Map/Set/Array].prototype.keys, [Map/Set/Array].prototype.values, [Map/Set/Array].prototype.entries의 메소드가 있으며,
이 메소드들은 각각 이터레이터를 반환한다.
한편 Object에는 Object.keys 라는 스태틱 메소드(ES5)만이 존재하며, 결과는 이터레이터가 아닌 배열을 반환한다.
ES2015에서 추가된 타 데이터타입의 메소드들과의 형평성을 맞추면서 기존 ES5 문법과의 통일성을 유지하기 위해, Object에는 스태틱 메소드로 values와 entries를 추가할 예정이다.
각각 값으로만 구성된 배열, [키, 값]의 쌍으로 구성된 2차원배열을 반환한다.
 
[2017] String padding
String.prototype.padStart / String.prototype.padEnd
최대 길이보다 짧은 문자열에 대해서 그 여백에 지정한 문자열을 반복하여 채우는 메소드이다.
padStart는 문자열의 좌측에 여백을 지정하며, padEnd는 그 반대이다.
두 메소드 모두 maxLength보다 긴 문자열에 대해서는 동작하지 않는다.
 
[2017] Object.getOwnPropertyDescriptors
Object.getOwnPropertyDescriptors
객체의 프로퍼티 속성들을 기술한 객체를 반환한다. Object.defineProperties의 활용도를 높이는 계기가 될 것으로 예상한다.
Object.assign을 이용하면 원본 객체의 getter / setter 가 제대로 복사되지 않는 문제가 있었다.
Object.getOwnPropertyDescriptors를 이용하면 제대로 복사가 이뤄질 수 있다.
참고 : 2ality - ES proposal: Object.getOwnPropertyDescriptors()
 
[2017] Trailing commas in function parameter lists and calls
Proposal to allow trailing commas in function parameter lists
함수 파라미터들 중 마지막 값 뒤에 찍힌 콤마를 오류로 잡지 않게 된다.
이를 활용하면 다음과 같이 버전관리 도구 등에서 바뀐 내용을 보다 명확하게 확인할 수 있게 된다.
 
[2017] Async function
Async Function
비동기 데이터처리를 간단한 방식으로 구현할 수 있게 된다.
표기법은 다음과 같다.
비동기 함수 선언문 : async function foo() {}
비동기 함수 표현식 : const foo = async function () {}
비동기 메소드 정의 : let obj = { async foo() {} }
비동기 화살표함수 정의 : const foo = async () => {}
참고: 2ality - async functions

ECMAScript Proposals - ES2016 & ES2017

댓글