es5와 es6+

es5 - 2009 출시

es6 - 2015 출시

 

가장 많은 변화를 가져온 es5와 es6의 차이를 알아보자. 디테일한 부분은 별도의 글로 남길 예정이고, 이 글에서는 단순 차이에 대해서 살펴보고자 한다.

 

1. var VS let, const

변수 선언 키워드의 변화. 

var의 경우 변수 선언에 있어 엄청난 자유로움을 제공해주고 있다. 하지만, 이러한 자유로움은 찾아내기 어려운 먼 암흑을 제공해주기도한다. 재할당, 동일한 네이밍 등 큰 제약 없이 모든 것이 가능하다. 이에 따라 컴파일링 과정에서 문제가 되지 않고, 코드가 완성 후 실제 테스트를 해보면서 문제가 생기는 것을 파악할 수 있다. 이는 소 잃고 외양간 고치기 식으로 버그를 찾아나서야 하고 고쳐야한다. 

 

이러한 문제를 방지하고자 let, const 키워드가 나온 것이다. const는 재할당 자체를 막아주고, 이보다 조금 유연한 let은 동일한 이름으로 다시 변수 할당을 하지 못하게 막아준다. ( const도 동일 ). 이렇게 초기에 막아주기 때문에 이후 이유 모를 문제 발생을 막아줄 수 있게된다.

 

2. arrow function

화살표 함수. 이는 가독성, this binding에 대한 편리를 제공해준다. this의 경우 function 안의 function와 같은 상황에서 this가 원하는 곳을 bind 되지 않는다. 그래서 보통 상단 function에 const self = this; 와 같이 변수에 할당을 해주고 self로 대응을 해준다. 

이러한 불편함을 개선하고자 arrow function은 내부 function에 대해서도 동일한 this를 호출해준다.

 

3. default parameter

파라미터를 던지고, 받을 때 편리함을 제공한다. 해당 함수를 호출할 때 기본 값을 제공해주고 기본값 외의 값일 때만 파라미터를 던져주고 싶은 경우가 많을 것이다. 이를 개선하고자 나온 기능이다.

 

function callMe( a = false ) {}

 

이와 같은 파라미터에 a = false을 주게되면 callMe 함수를 호출할 때 아무런 파라미터를 안던져주면 디폴트로 false로 a는 할당이 된다.

 

4. Multi-line-string

es5 const text = 'test'

                   + 'test2test2';

 

es6 const text2 = 'test

                      testtest'

 

5. Destructuring Assignment

구조 분해 할당

const {a, b, c} = { a: 1, b: 2, c: 3}; // a === 1, b === 2, c === 3

const [a, b] = [1, 2]; // a === 1, b === 2;

 

6,7 모듈과 클래스

모듈과 클래스의 경우 조금 더 자세하게 다루기 위해 별도의 글로 다루기로 한다.