[JavaScript] 도대체 ES6 란 무엇인가

이 글은 ES6(ECMAScript 6) 가 무엇인지, JavaScript 와 어떤 연관이 있는지에 대한 정보를 포함하고 있습니다.

웹 개발, 그 중 특히 Frontend 를 공부하다 보면 ES6 라는 단어에 대해 한번쯤 들어보게 됩니다.

이 ES6(ECMAScript 6) 는 막연히 JavaScript 의 버전 혹은 규칙 등으로 이해하고 넘어가게 되는 부분이 많습니다.

네, 사실 제 얘기입니다.

ES, 즉 ECMAScript 는 도대체 무엇을 의미하는걸까요?
JavaScript = ECMAScript 일까요?

이를 알기 위해선 먼저 ECMA 에 대해 짚고 넘어가야할 필요가 있습니다.
지금부터 같이 알아봅시다!

---

🟢 ECMA 인터내셔널

Ecma(European Computer Manufacturers Association) 인터내셔널은 ICT 중심의 국제 표준화기구입니다.

간단히 말해 우리가 사용하는 프로그래밍 언어, 오디오나 비디오의 형식, 데이터 저장 형식 등 다양한 ICT 기술의 표준을 만드는 기구입니다.

예를 들어 ECMA-334 는 C# 의 표준으로,
내용으로는 C# 의 문법, 의미, 표현 방식 등이 규정되어 있습니다.

마이크로소프트가 C# 의 기능을 추가하면 ECMA 는 이를 통해 표준 문서를 만들어 Unity 와 같은 다른 회사혹은 플랫폼에서 C# 을 구현하여 사용할 수 있게 만드는 방식입니다.

요리사가 음식을 개발하면 ECMA 는 이를 레시피로 출간하는 것으로 이해하면 됩니다.

---

🟢 ECMAScript

자 그럼 ECMAScript 는 무엇일까요?
바로 ECMA 에서 만든 JavaScript 의 표준입니다!

물론, 처음에는 JavaScript 를 표준화하기 만들어졌지만 시간이 지나며 JavaScript 외에도 JScript, ActionScript 등의 언어도 ECMAScript 의 명세를 따르긴 했습니다.

하지만 현재는 Internet Explorer 가 사라지면서 JScript 는 역사속으로 사라졌습니다. Flash 도 공식적으로 종료되면서 ActionScript 도 사실상 사용 종료되어 현재는 JavaScript 만 살아남았다고 해도 무방합니다.

간단하게

1. JavaScript 가 만들어짐
2. JavaScript 를 표준화 하기 위해 ECMAScript 가 만들어짐
3. ECMAScript 를 지속적으로 개정하면서 JavaScript, JScript 등의 언어들이 ECMAScript 의 표준을 따름

라고 할 수 있겠네요

그럼 이런 ECMAScript 는 어떻게 만들어져가고 있을까요?
아래 표를 보시죠

위에서 TC39 는 ECMAScript(자바스크립트)의 표준을 개발하고 관리하는 ECMA 소속의 기술 위원회입니다.

위의 단계를 Optional Chaining 으로 예시를 들면

위의 순서로 Optional Chaining 이 구현되게 되었습니다.

실제 ES2020 문서 일부를 보면

OptionalChain : ?. IdentifierName
1. If symbol is a ReservedWord, return false.

2. If symbol is an Identifier and StringValue of symbol is the same value as the StringValue of IdentifierName, return true.

3. Return false.


--- 해석 ---
1. ?. 다음에 오는 것이 예약어인 경우 ex) a?.if -> false 반환

2. ?. 다음에 오는 것이 식별자이고, 그 문자열 값이 IdentifierName 과 일치한다면 ex) a?.name -> true 반환

3. 그 외의 경우 ex) a?.123 -> false 반환

위와 같이 Optional Chaining 에 대한 규칙이 정의되어 있는 것을 볼 수 있습니다.

이렇게 ECMAScript 는 JavaScript 의 문법 및 사양에 대해 표준을 정의한 문서입니다. 이를 통해 다양한 JS 엔진에서 동일한 문법으로 코드를 작성할 수 있습니다.

물론 최적화는 엔진마다 다르게 하여 성능의 차이는 발생할 수 있고,

새 ECMAScript 의 표준이 등록되는 조건 중 하나인 "최소 2개의 엔진에서 구현 완료 → ECMAScript 표준으로 확정됨" 을 보면 알 수 있듯이 모든 JavaScript 엔진들이 가장 최신의 ECMAScript 표준을 따르는 것은 아닙니다.

사실상 JavaScript 엔진이 어떤 ECMAScript 버전을 구현했느냐에 따라 사용할 수 있는 기능이 달라지기 때문에,

ECMAScript 버전과 JavaScript의 기능을 동일시하거나 혼용해서 말하는 경우가 많은 것 같습니다.

공식적으로는 JavaScript의 버전이라는 개념은 없고, ECMAScript 표준의 버전(예: ES6, ES2020 등)을 기준으로 기능을 구분합니다.

최신 ECMAScript 표준을 가장 많이 구현한 JavaScript 엔진이 최신 JavaScript 기능을 가장 잘 지원한다고 볼 수 있을 것 같습니다.

쉬어가기...
ECMAScript 의 버전은 ES3 다음 ES4 가 아닌 ES5 로 넘어갑니다.

원래는 ES4 에 클래스, 패키지, 인터페이스, 타입 등 엄청나게 많은 기능들이 추가되었었습니다.

하지만 미완성 상태에 복잡했고
회사들간의 의견차이 (강력한 기능들을 추가해야 한다 VS 안정화가 먼저다) 가 발생하였습니다.

결국 TC39 는 ES4 를 취소하고, 안정적인 부분만 모은 것을 ES5 로 만들었습니다.
그 후 6년이라는 긴 시간후에 대규모 업데이트가 진행된 ES6 가 세상에 나오게 되었습니다. 😊

---

🟢 ES6

ES6 는 2015년에 만들어진 ECMAScript 의 6번째 표준문서로
문서의 서론에 언급되어 있는

1. 모듈(Module)
2. 클래스 선언(Class declaration)
3. 블록 스코프(예: let, const)
4. 이터레이터 및 제너레이터
5. Promise
6. Destructuring(구조분해)
7. 꼬리 호출 최적화(Tail Calls)

위의 기능들 외에도 Map, Set, 화살표 함수등이 추가되어 가장 큰 변화를 가져온 버전입니다.

우리가 알고 있는 JavaScript 는 사실상 ES6 버전부터 라고 봐도 무방합니다.

그럼 ES6 에 추가된 주요 기능들 몇가지에 대해 자세히 알아봐볼까요?

1. Module
   개념: import, export를 통해 파일 간 코드를 모듈화하여 사용할 수 있게 해주는 문법입니다.
   도입 이유: 스크립트의 크기가 점차 커지고 기능이 복잡해지면서, 라이브러리를 만들어서 필요한 모듈을 언제든지 불러올 수 있도록 하자는 의견이 생겼습니다.

// module.js
export const name = "ES6";

// app.js
import { name } from './module.js';

2. 클래스 선언
   개념: 기존 프로토타입 기반 객체지향 방식을 간결하게 표현할 수 있는 문법.
   도입 이유: Java, Python 등 OOP 언어와 유사한 문법 제공 → 진입장벽 완화 및 가독성 향상.

// 기존 프로토타입 문법(ES5)
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log("Hi, I'm " + this.name);
};

// 클래스 문법(ES6)
class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

3. 블록 스코프(let, const)
   개념 : let - 블록 범위의 변수 선언, const - 상수 선언 (재할당 불가).
   도입 이유: var는 함수 스코프이기 때문에 호이스팅과 중복 선언으로 의도치 않은 버그가 발생.

if (true) {
  let x = 10;
  const y = 20;
}

4. 이터레이터 및 제너레이터
   개념: 이터레이터 - next() 메서드로 순회 가능한 객체, 제너레이터 - function* 으로 정의, yield를 통해 중단 가능한 함수.

function* gen() {
  yield 1;
  yield 2;
}

const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.next()); // { value: 2, done: false }
console.log(g.next()); // { value: undefined, done: true }

5. Promise
   개념: 비동기 작업을 처리하기 위한 객체. 성공/실패를 나타내는 상태를 가짐.
   도입 이유: 콜백 지옥(callback hell)을 해결하고 비동기 흐름 제어를 단순화.

// 기존 콜백 지옥 방식
function step1(callback) {
  setTimeout(() => {
    console.log("1단계 완료");
    callback("step1 result");
  }, 1000);
}
...
step1(function(r1) {
  step2(r1, function(r2) {
    step3(r2, function(r3) {
      console.log("결과:", r3);
    });
  });
});

// Promise 방식
function step1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("1단계 완료");
      resolve("step1 result");
    }, 1000);
  });
}
...
step1()
  .then(step2)
  .then(step3)
  .then(r3 => {
    console.log("결과:", r3);
  });

6. Destructuring(구조분해)
   개념: 배열이나 객체에서 값을 추출해 변수에 쉽게 할당하는 문법.
   도입 이유: 반복적인 접근 코드를 줄이고 가독성을 높이기 위해.

const [a, b] = [1, 2];
const { name, age } = { name: 'Tom', age: 30 };

7. 화살표 함수
   개념: 간결한 함수 표현식이며, this를 바인딩하지 않음.
   도입 이유: function 키워드 반복 → 코드 장황, this가 문맥에 따라 달라져 혼란을 초래

const add = (a, b) => a + b;

8. ... 연산자 (Spread / Rest Operator)
   개념: Spread Operator - 배열이나 객체를 펼쳐서 요소들을 복사하거나 전달, Rest Parameter - 함수의 매개변수를 하나로 묶어서 배열로 받음

// Spread Operator
const arr = [1, 2, 3];
const copied = [...arr];

// Rest Parameter
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

sum(1, 2, 3, 4);  // 10

ES6 에는 이것 외에도 다양한 개념들과 기능들이 생겨났습니다.
현재 JavaScript 의 근간이 되는 표준인 만큼 시간이 날 때
공식문서를 통해 더 깊게 공부해보셔도 좋을 것 같습니다. 😊

웹서핑을 하다 보면 당시 사람들이 이런 기능이 있으면 어떨까하고 토론하는 것을 볼 수 있습니다. 😂
화살표 함수에 대한 토론

---

🟢 마치며...

지금까지 ECMAScript와 ES6에 대해 함께 살펴보았습니다.

JavaScript 의 불편한점이 ECMAScript 의 새로운 표준에 반영되고 그렇게 만들어진 새로운 표준이 다시 JavaScript 엔진에 구현되는, 둘이 뗄 수 없는 관계가 된 것이 많은 JavaScript 초보자들에게 ECMAScript 와 JavaScript 에 대한 혼란을 야기한것이 아닐까 하고 생각해봅니다.

제가 이해한 바로는 ECMAScript 는 어떤 표준과 규칙이고 그것을 구현한 구현체가 JavaScript 라고 할 수 있을 것 같습니다.

ES6 를 제대로 이해하고 개발한다는 것은 JavaScript 의 문법을 그냥 사용하는 것이 아닌 그것이 생긴 이유와 어떤 상황에서 사용해야 하는지 확실하게 알고 개발한다는 뜻으로 해석되는 것 같습니다.

단순한 코더가 되는 것이 아닌 정확히 알고 개발하는 습관을 가져야 할 것 같네요. 😊

---

🟠 Reference

https://ecma-international.org/
https://github.com/tc39
https://tc39.es/process-document/
https://www.w3schools.com/js/js_es6.asp
https://stackoverflow.com/questions/912479/what-is-the-difference-between-javascript-and-ecmascript
https://exploringjs.com/es6/ch_about-es6.html