ES5, ES6, ES2015, ECMAScript6 이걸 왜 알아둬야할까? (feat. 기안84)

홍규진·2025년 3월 12일
JavaScript
4
post-thumbnail

자바스크립트 개발자라면 한 번쯤 들어봤을 ES6, ES2015, ECMAScript2015라는 용어. 잘 몰라서 강의를 찾을 때도, 지원 공고를 볼 때도, 처음 자바스크립트를 배우기 시작했을 때 "ES5와 ES6의 차이점"이라는 키워드로 검색해본 경험이 있다면, 당신은 이미 ES 버전에 따른 중요성을 어렴풋이 느끼고 있는 것이다.

오늘은 이 ES2015가 무엇인지, 그리고 왜 프론트엔드 개발자라면 반드시 알아야 하는지에 대해 깊이 있게 알아보려 한다. 자바스크립트의 역사적인 전환점이 된 이 버전에 대해 제대로 이해한다면, 현대 웹 개발의 흐름을 더 명확하게 파악할 수 있을 것이다.

(👨🏻‍🏫 : 처음에는 저도 ES5, ES6, ES6+, ES2015 이런 용어들이 너무 헷갈렸답니다. 매번 미뤄두기도 했지만, 하지만 걱정 마세요! 이 글을 다 읽고 나면, 면접 때든 동료들과 얘기할 때에든, 요구사항을 이해할 때에도 ES2015에 대해 자신 있게 대화할 수 있을 거예요!)

💡급하신 분들을 위해서 결론 먼저!

  1. ES2015 = ES6 = ECMAScript2015 = ECMAScript6 등등, 즉 년도별 표기 방식이냐, 버전 별 표기 방식이냐 그 차이이다.
  2. ES2015(ES6)는 자바스크립트의 중요한 업데이트 버전으로, 2015년에 발표되었으며 현대 자바스크립트의 기반이 되는 많은 기능을 도입했다.
  3. ES6+는 대규모 업데이트인 ES6 그 이후의 자잘한 업데이트들까지 모두 포함한 버전들이다.
  4. ES2015 이전의 자바스크립트(ES5)는 기능적 한계가 있었으며, 복잡한 애플리케이션 개발에 어려움이 있었다.
  5. ES2015는 클래스, 화살표 함수, 모듈 시스템 등 혁신적인 기능을 도입하여 개발자 경험을 크게 향상시켰다.
  6. 성능 측면에서 ES2015 기능들은 현대 브라우저에서 ES5와 동등하거나 더 나은 성능을 보여준다.
  7. 프론트엔드 개발자라면 ES2015를 필수적으로 알아야 현대적인 코드를 작성하고 이해할 수 있다.

1. ES2015란?

ES2015는 ECMAScript 2015의 약자로, ECMAScript의 6번째 주요 버전이기 때문에 ES6라고도 불린다. ECMAScript는 자바스크립트의 표준 사양을 정의하는 문서다. 즉, 자바스크립트가 어떻게 동작해야 하는지를 명세한 표준이라고 볼 수 있다.


버전으로 표기 시엔 ES6이고, 출생년도로 표기시엔 ES2015인 것이다. 기안84도 이름 + 생년월일로 표기한 이름이니까, ES2015는 기안84식 표기법으로 이해하면 쉽게 이해할 것이다.

ES2015 = 기안84

ECMAScript란?

ECMAScript는 Ecma International이라는 표준화 기구에서 관리하는 스크립트 언어 사양이다. 자바스크립트는 이 ECMAScript 사양을 구현한 언어 중 하나다. 간단히 말해, ECMAScript는 자바스크립트의 "설계도"라고 볼 수 있다.

(👨🏻‍🏫 : 조금 헷갈리시죠? 쉽게 생각하면 ECMAScript는 레시피, 자바스크립트는 그 레시피로 만든 요리라고 생각하시면 됩니다! 브라우저마다 같은 레시피로 조금씩 다른 맛의 요리를 만들 수 있는 것처럼요. ECMASCript 중 두 글자로 축약한 것이 ES이다.)

ES2015의 중요성

2015년에 발표된 ES2015는 자바스크립트 역사상 가장 큰 업데이트 중 하나로 평가받는다. 이전 버전인 ES5가 2009년에 발표된 이후 6년 만에 이루어진 대규모 업데이트였다. ES2015는 자바스크립트를 더 강력하고 표현력 있는 언어로 변화시켰으며, 현대 웹 개발의 기반을 마련했다.

*// ES5 방식의 함수 선언*
var add = function(a, b) {
  return a + b;
};

*// ES2015의 화살표 함수*
const add = (a, b) => a + b;

출처: MDN Web Docs - Arrow functions

2. ES2015(ES6) 이전

ES2015(ES6) 이전의 자바스크립트, 특히 ES5는 2009년에 발표되었으며 그 이후 약 6년간 자바스크립트의 표준으로 사용되었다. 이 시기의 자바스크립트는 오늘날과 비교하면 상당히 제한적인 기능을 가지고 있었다.

ES5의 주요 특징

ES6의 이전 버전인, ES5에서는 다음과 같은 기능들이 도입되었다:

  • "use strict" 모드
  • forEach(), map(), filter(), reduce() 등의 배열 메서드
  • JSON.parse() 및 JSON.stringify()
  • Object.create(), Object.defineProperty()
  • getter와 setter
*// ES5의 엄격 모드*
"use strict";

*// ES5의 배열 메서드*
var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function(number) {
  return number * 2;
});

출처: MDN Web Docs - Strict mode

ES5의 한계

ES5는 많은 개선점을 가져왔지만, 여전히 몇 가지 중요한 한계가 있었다:

  1. 변수 스코프 문제: var만 사용 가능했기 때문에 블록 스코프가 없었다.
  2. 콜백 지옥: 비동기 프로그래밍에서 콜백 함수의 중첩으로 인한 가독성 문제가 있었다.
  3. 클래스 부재: 객체지향 프로그래밍을 위한 명확한 클래스 구문이 없었다.
  4. 모듈 시스템 부재: 코드를 모듈화하는 표준 방법이 없었다.

(👨🏻‍🏫 : 콜백 지옥을 경험해보신 분들은 아실 거예요. 코드가 오른쪽으로 계속 들여쓰기 되면서 피라미드 모양이 되는 그 고통... 😱 ES2015의 Promise가 얼마나 혁명적이었는지 말이죠!)

3. ES2015(ES6) 이후

ES2015는 자바스크립트에 많은 혁신적인 기능을 도입했다. 이 업데이트는 자바스크립트를 현대적인 프로그래밍 언어로 탈바꿈시켰으며, 이후의 모든 ECMAScript 버전에 영향을 미쳤다.

ES2015(ES6) 의 주요 업데이트

  1. 블록 스코프 변수: let과 const 키워드 도입
  2. 화살표 함수: 더 간결한 함수 문법과 this 바인딩 개선
  3. 클래스: 객체지향 프로그래밍을 위한 클래스 구문
  4. 모듈 시스템: import와 export 키워드를 통한 모듈화
  5. 템플릿 리터럴: 문자열 보간과 다중 행 문자열
  6. 구조 분해 할당: 배열과 객체에서 값을 쉽게 추출
  7. 기본 매개변수: 함수 매개변수의 기본값 설정
  8. 스프레드 연산자와 나머지 매개변수: ... 구문
  9. Promise: 비동기 프로그래밍을 위한 개선된 방법
  10. Symbol: 새로운 원시 데이터 타입
*// let과 const*
let variable = 'can be reassigned';
const constant = 'cannot be reassigned';

*// 화살표 함수*
const multiply = (a, b) => a * b;

*// 클래스*
class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    return `Hello, my name is ${this.name}`;  *// 템플릿 리터럴*
  }
}

*// 구조 분해 할당*
const { firstName, lastName } = person;
const [first, ...rest] = array;

*// Promise*
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

출처: SitePoint - ES6 (ES2015) and Beyond: Understanding JavaScript Versioning

ES2015 이후의 발전

ES2015 이후, ECMAScript는 매년 새로운 버전을 발표하는 방식으로 변경되었다. ES2016(ES7), ES2017(ES8) 등이 차례로 발표되었으며, 각 버전마다 새로운 기능이 추가되었다. 그러나 ES2015의 대규모 업데이트 이후에는 상대적으로 작은 변화들이 이루어졌다.

(👨🏻‍🏫 : ES2015가 워낙 큰 변화였기 때문에, 이후 버전들은 '점진적 개선'에 초점을 맞추게 되었답니다. 마치 대대적인 리모델링 후에 작은 인테리어 변경을 하는 것과 비슷하죠!)

4. 문법을 바꾸는데 성능이 높아진다?

ES2015 기능들이 처음 도입되었을 때는 되려, 성능 문제가 있었다. 초기에는 바뀐 버전의 문법을 처리하는 데에 있어서, 브라우저와 JavaScript 엔진이 새로운 기능들을 최적화하지 못했기 때문이다. 그러나 시간이 지남에 따라 이러한 문제들은 대부분 해결되었다. 이제는 오히려 최신 문법들을 사용해야지만, 성능상 이점을 가져갈 수 있다.


이미지 출처: https://m.blog.naver.com/intera210/221234704044?view=img_1
난 그냥 문법을 바꿨을 뿐인데.. 왜 빨라지지? 어떤 관계야?

초기의 성능 문제

ES2015가 처음 도입되었을 때, 많은 개발자들은 Babel과 같은 트랜스파일러를 사용하여 ES2015(ES6) 코드를 ES5 코드로 변환했다. 이는 브라우저 호환성을 위한 것이었지만, 코드 크기 증가와 성능 저하라는 부작용이 있었다.

*// ES2015 코드 (203자, gzip 176바이트)*
class Widget extends Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }
  
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
}

*// Babel로 변환된 ES5 코드 (588자, gzip 367바이트)// 코드 크기가 2배 이상 증가*

출처: V8.dev - High-performance ES2015 and beyond

현대 브라우저에서의 성능

현대 브라우저와 JavaScript 엔진은 ES2015 기능들을 직접 지원하고 최적화하도록 발전했다. V8 엔진(Chrome, Node.js에서 사용)은 ES2015+ 기능들의 성능을 ES5 수준으로, 때로는 그 이상으로 향상시켰다.

V8 팀의 연구에 따르면, ES2015+ 언어 기능의 성능은 이제 트랜스파일된 ES5 코드와 동등하거나 더 나은 수준이다. 이는 개발자들이 트랜스파일 없이 직접 ES2015+ 코드를 작성하고 배포할 수 있음을 의미한다.

(👨🏻‍🏫 : 이제는 ES2015(ES6) 기능을 사용해도 성능 걱정을 하지 않아도 된답니다! 오히려 최신 문법을 사용하면 코드 크기도 줄고, 브라우저가 더 최적화된 방식으로 실행할 수 있어요. 물론 IE11 같은 레거시 브라우저를 지원해야 한다면 트랜스파일은 여전히 필요하지만요. 종종 “Chrome으로 들어가야지만 된다.” 라는 문구 보신 적 있으시죠? 그게 이거 떄문이랍니다.)

5. 바벨의 역할과 중요성

바벨(Babel)은 현대 자바스크립트 개발에서 핵심적인 역할을 하는 도구다. 최신 자바스크립트 코드를 구형 브라우저에서도 동작할 수 있게 변환해주는 트랜스파일러로, ES2015 이후 프론트엔드 개발 환경의 필수 요소가 되었다.

바벨이 하는 일

바벨의 주요 역할은 다음과 같다:

  1. 코드 변환(트랜스파일링): 최신 자바스크립트 문법(ES2015+)을 구형 브라우저가 이해할 수 있는 ES5 코드로 변환한다.
  2. 폴리필 제공: 새로운 자바스크립트 기능(Promise, Array.from 등)을 구현한 코드를 추가하여 구형 브라우저에서도 이러한 기능을 사용할 수 있게 한다.
  3. JSX 및 타입스크립트 지원: React의 JSX나 타입스크립트와 같은 자바스크립트 확장 문법도 변환할 수 있다.
*// 바벨 변환 전 (ES2015 화살표 함수)*
const double = (n) => n * 2;

*// 바벨 변환 후 (ES5 호환 코드)*
var double = function(n) {
  return n * 2;
};

출처: Babel 공식 문서

바벨의 플러그인 시스템

바벨은 플러그인 기반 아키텍처를 사용한다. 각 플러그인은 특정 문법이나 기능을 변환하는 역할을 한다. 개발자는 필요한 변환만 선택적으로 적용할 수 있다.

*// .babelrc 파일 예시*
{
  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-block-scoping"
  ]
}

프리셋(Preset)

바벨은 자주 사용되는 플러그인 세트를 프리셋으로 제공한다. 가장 널리 사용되는 프리셋은 @babel/preset-env로, 지정된 타겟 환경에 필요한 변환만 자동으로 적용한다.

*// .babelrc 파일 예시*
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "not dead", "not ie <= 11"]
      }
    }]
  ]
}

바벨과 웹팩의 통합

바벨은 주로 웹팩(Webpack)과 함께 사용된다. 웹팩의 로더 시스템을 통해 자바스크립트 파일을 바벨로 처리할 수 있다.

6. 결론

ES2015는 자바스크립트의 역사에서 중요한 전환점이었다. 이 버전은 자바스크립트를 더 강력하고, 표현력 있으며, 유지보수하기 쉬운 언어로 탈바꿈시켰다. 프론트엔드 개발자라면 ES2015의 기능들을 숙지하는 것이 현대 웹 개발에서 필수적이다.

왜 프론트엔드 개발자가 ES2015를 알아야 하는가?

  1. 현대 프레임워크의 기반: React, Vue, Angular 등 현대 프론트엔드 프레임워크들은 ES2015 기능을 적극적으로 활용한다.
  2. 코드 가독성과 유지보수성: ES2015의 기능들은 코드를 더 간결하고 이해하기 쉽게 만든다.
  3. 개발자 생산성: 화살표 함수, 구조 분해 할당 등의 기능은 개발 속도를 높인다.
  4. 비동기 프로그래밍 개선: Promise와 같은 기능은 비동기 코드를 더 쉽게 작성하고 관리할 수 있게 한다.
  5. 기술 면접 준비: 많은 기업들이 ES2015에 대한 이해를 기본적인 요구사항으로 여긴다.

ES2015는 단순한 언어 업데이트를 넘어, 자바스크립트 생태계 전체에 혁명을 가져왔다. 이 버전을 통해 자바스크립트는 "웹 페이지에 약간의 상호작용을 추가하는 언어"에서 "복잡한 애플리케이션을 구축할 수 있는 강력한 프로그래밍 언어"로 진화했다.

프론트엔드 개발자로서 ES2015를 마스터하는 것은 단순히 새로운 문법을 배우는 것이 아니라, 현대 웹 개발의 핵심 원칙과 패턴을 이해하는 것이다. 이는 더 나은 코드를 작성하고, 팀과 효과적으로 협업하며, 빠르게 변화하는 웹 개발 환경에 적응하는 데 필수적인 요소다.

🙇🏻 글 내에 틀린 점, 오탈자, 비판, 공감 등 모두 적어주셔도 됩니다. 감사합니다..! 🙇🏻

profile
홍규진
읽는 사람이 가장 이해하기 쉽게끔 적으려 노력합니다. 그 과정에서 스스로가 완전한 이해를 할 수 있다고 생각합니다. 그렇게 Taker 보다는 Giver이 되려 노력합니다.
이전 포스트

React Native가 주니어 개발자들에게 왜 어려울까? (feat. CommonJS와 ESM의 간극)

다음 포스트

[번역] TypeScript 네이티브 포트 발표(Javascript에서 GO로 전환)

0개의 댓글