ECMAScript 2015 편집하기

{{ECMAScript}}
[https://www.ecma-international.org/ecma-262/6.0/index.html 스펙 문서]
== 개요 ==
'''ECMAScript 2015'''는 2015년 6월에 승인된 [[ECMAScript]] 표준([[JavaScript]])의 6번째 개정판이다. ES6이라고도 부른다. 1999년에 나온 ES3 이후 2009년 ES5의 작은 변경만 빼면 거의 16년간 변화가 없던 자바스크립트, 더 나아가 웹 생태계에 '''대격변'''을 가져온 업데이트이다. 이 개정판부터 버전을 연도로 지칭하게 되었으며, 매년 새 개정판이 나오게 되었다.

== 브라우저 지원 ==
[https://kangax.github.io/compat-table/es6/ ES6 호환성 테이블]

[[인터넷 익스플로러]]는 가장 최신 버전인 IE11도 ES6의 기능들을 거의 이용할 수가 없다. [[모질라 파이어폭스]]나 [[구글 크롬]], [[마이크로소프트 엣지]], [[사파리 (웹 브라우저)|사파리]] 등, 최신 업데이트가 계속 나오는 브라우저들은 2019년 기준으로 ES6의 기능들을 거의 다 지원하고 있다. [[삼성 브라우저]]나 모바일 크롬과 같은 모바일 브라우저 역시 대부분 ES6을 지원하고 있다. 그러나 그놈의 인터넷 익스플로러가 아직 살아 있어 이를 지원하기 위해 Babel과 같은 트랜스파일러가 많이 사용되고 있다. Babel은 ECMAScript 2015와 그 이후 개정판의 기능을 사용한 코드를 ES5 문법으로 변경해주어 IE11 등에서 작동하도록 해준다.

== 추가 및 변경점 ==
=== let, const ===
ES6 이전에는 변수를 선언하기 위해 <code>var</code>키워드를 사용했다. 기존 <code>var</code>로 선언한 변수는 함수 스코프를 가지고 있었지만 <code>let</code>과 <code>const</code>로 선언한 변수나 상수는 블록 스코프를 가진다. 즉 중괄호 블록을 벗어나면 변수를 참조할 수 없게 된다. 
<source lang="js">
{
  var a = 42
}
console.log(a) // 42

{
  let b = 42
}
console.log(b) // ReferenceError: b is not defined
</source>

<code>const</code>로 선언하면 값을 변경할 수 없는 상수가 된다.
<source lang="js">
const x = 0;
x = 3; // 에러가 발생한다.
</source>

<code>var</code>로 선언한 변수와는 달리, <code>let</code>은 같은 스코프 내에 두 번 사용시 에러를 발생시킨다. <code>var</code>로 선언한 변수를 <code>let</code>으로 다시 선언하거나, 그 반대의 경우에도 에러가 발생한다.
<source lang="js">
var a = 3;
var a = 7; // 문제 없음

let b = 3;
let b = 7; // SyntaxError: redeclaration of let b

let a = 3; // SyntaxError: redeclaration of var a
var b = 3; // SyntaxError: redeclaration of let b
</source>

<code>let</code>을 이용해 for 반복문 내에서 클로저를 더 쉽게 사용할 수 있게 되었다. 다음 예제를 보자.
<source lang="js">
var arr = [];
for (var i = 0; i < 3; i++) {
  arr.push(function() { console.log(i) });
}
arr[0](); // 3
arr[1](); // 3
arr[2](); // 3
</source>
i를 출력하는 함수를 세 개 만들어 배열에 넣었는데, 결과는 모두 3을 출력하고 있다. 반복문이 끝나고 나면 i의 값이 3이 되기 때문이다. 반면 다음과 같이 <code>let</code>을 사용하면 좀 더 사용자가 원하는 동작을 볼 수 있다.

<source lang="js">
var arr = [];
for (let i = 0; i < 3; i++) {
  arr.push(function() { console.log(i) });
}
arr[0](); // 0
arr[1](); // 1
arr[2](); // 2
</source>
<code>let</code>을 이용해 변수를 선언시 매 반복마다 새 변수 i가 선언되기 때문에, 다음 반복이 일어나도 기존에 클로저에 캡쳐된 변수의 값이 변하지 않는다.