[Javascript] ES6 (ECMASCRIPT 2015)

ES6

  ES6은 ECMA라는 국제 기구에서 만든 표준 문서인 ECMAScript의 6번째 개정판에 있는 표준 스펙을 말한다. 그렇다면 ES6가 현재 가장 최신 버전의 자바스크립트인가? 그렇지는 않다. 2015년부터 새로운 ES 표준 버전이 공개되고 있다. 그럼에도 불구하고 ES6가 항상 주목받는 이유는 ES5까지 자바스크립트가 가지고 있던 많은 문제점들을 개선했기 때문이다. 그렇기 때문에 React. Vue 등 대부분의 라이브러리들도 ES6를 기준으로 개발 환경을 세팅하고 있다. 이번 포스트에서는 ES6에서 등장한 주요 변경점들에 대해서 알아볼 것이다.

 

 

1. let / const

  기존에는 var만을 사용하여 변수를 사용하였지만 ES6부터는 값의 변경 가능 여부를 기준으로 let과 const를 활용하기 시작했다. let과 const의 등장은 단순히 변수값의 변경 가능 여부를 구분할 수 있게 해준 것 뿐만 아니라 블록 레벨 스코프의 데이터를 활용하게 해 주었다. (var은 함수 레벨 스코프를 가진다.) 또한 let과 const는 호이스팅이 적용되지 않는다. 호이스팅은 코드의 가독성 측면에서 매우 좋지 않은 현상이기 때문에 이 역시 중요한 의미를 가진다.

 

2. Rest Parameter (나머지 매개변수)

  함수의 마지막 매개변수 앞에 ...을 붙이면 모든 후속인자가 해당 배열 안으로 들어간다. 파이썬을 사용해본 사람이라면 *args를 생각하면 된다.

 

3. Default Parameter

  함수의 매개변수에서 default값을 지정할 수 있게 되었다. 

 

4. Class

  ES6에서는 클래스 생성이 가능해졌다. 물론 이 클래스는 프로토타입 기반이기 때문에 온전한 객체지향을 구현했다고 보기는 어렵다. 그렇지만 Javascript에서 OOP를 구현가능하게 했다는 점에서 큰 의의를 가지는 변경점이다. (자바스크립트에서 클래스 생성이 가능함에도 불구하고 사람들의 Typescript의 OOP를 장점으로 보는 것은 자바스크립트의 OOP가 프로토타입 기반 유사 OOP이기 때문이다.)

 

5. Promise

  이전에는 콜백이 계속 중첩되면서 프로그램의 복잡도가 기하급수적으로 증가하는 콜백헬 문제가 심각했다. 다행히 Promise의 등장과 함께 사람들은 콜백헬의 문제 없이 편리하게 비동기 메소드에서 동기 메소드처럼 값을 반환할 수 있게 되었다.

 

6. Arrow Function

  ( ) => { }; 형태의 Arrow Function이 가능해졌다. Arrow Function은 단순히 함수 작성법이 변경되었을 뿐만 아니라 this를 상위 스코프의 this로 고정시켜줄 수 있다는 점에서 또한 의미를 가진다.

 

7. Template Literal

  template literal은 ``으로 구성된 문자열 중간에 ${ }를 활용하여 변수값을 넣는 기능과 멀티라인 기능을 제공한다. 보다 가독성 있는 문자열 처리를 가능하게 해준다.

 

8. Spread Operator

  iterable한 객체를 개별 요소로 분리해준다. 연결 혹은 복사, 객체 갱신 등의 작업에 유용하게 활용할 수 있다.

 

9. Destructuring

  구조화된 객체를 파괴하여 개별적 변수에 할당한다. 배열 혹은 객체에서 필요한 값만을 추출핳여 변수에 할당할 때 용이하다. 대표적인 활용 예시로 리액트 Component의 프로퍼티를 추출하거나 .을 활용하는 방법보다 가독성 있게 객체의 프로퍼티를 추출할 때가 있다.

 

 

참고로 ES6버전 이후에서 주목할만한 주요 변경점들은 다음과 같다.

ES7 : 제곱 연산자 등장(**), Array.includes( ) 메소드 등장 - 배열 내 특정 요소 검사

ES8 : async/await, Object.values( ), Object.entries( ), 문자열 패딩 함수 추가- String.padStart( ) 혹은 String.padEnd( )