es5 와 es6의 특징
es5는 es3의 다음으로 사용하고 있으며 es4는 문제가 많아서 폐기상태이다.
그렇기 때문에 지금 사용하고 있는 es5로 넘어 온 상태이다. es5는 es3에 비해서 실직적인 문법이 추가되었고 그 종류는 strict mode와 Object 리터럴, get-set추가, 문자열의 인덱스인식 등 크게 달라지진 않았다.
가장 중요한 특징은 객체에 대한 통제와 클래스를 생성하는 방법의 변화가 있다.
문법적으로 사용자 Object에 대해 getter, setter 지정이 가능해지므로 더 이상 평범한 값의 할당으로 작동하지 않고 내부에는 많은 제어문을 내포할 수 있는 형태가 되었다. es6는 당연한 소리겠지만 전단계의 버전 부족한 기능을 채워나가기 위해서고 최신 프레임웍들의 기반이 es6로 개발하기 때문에 es6의 관심이 높아지고 있다.
전버전인 es5와 다른점이 있다면 첫번째는 블록범위 둘째는 Arrow문법 세번째는 비공개 필드 네번째는 클래스 상속이 있다.
첫번째 블록범위는 변수의 let, const의 추가이다.
그전에는 var로 사용했지만 scope의 문제점이다. 자바스크립트의 유효범위는 타 언어와 다르게 function단위 이기때문에 타 언어 출신 개발자들에게 혼란을준다 그걸 방지하기위해 let, const가 추가되었는데 let의 특징은 블록단위 scope를 가지고 글로벌 let변수는 글로벌 객체의 속성아 아니다.
for문 등의 루프에서 for(let v...) 구문에서 v는 루프마다 새로 바인딩 한다.
let은 선언 전부터 참조하면 에러가 난다. 같은 let 변수 선언시 문법에러가 난다.(해결방법으로는 ES6의 모듈을 사용할것을 추천한다.) const의 특징은 let과 동일하나 다른점은 최초 값 할당 이후 값 변경이 불가능하다는 것이다. 변경시에는 문법에러가 발생한다.
다음은 Arrow Function(화살표)이다.
ES6에서는 람다식 표현식을 더울 간결하게 해주는 Arrow문법[=>]이 추가되었다.
비교연산자와 비슷해서 주의를 해야한다.[<= , >=]
for/ for in end for of
ES5에 추가된 forEach문의 단점은 return혹은 break를 통한 루프 탈출이 불가능하다는 점이다.
그런점에서는 for문이 좋다. 그리고 ES5에 추가된 for in의 경우도 문제?점이 살짝있다.
위와 같은 문제로 ES6에는 for of 구문이 추가되었다.
생김새는 for in구문과 같고 forEach와 다르게 breck / continue / return 등을 통하여 루프 제어가 가능하다.
Class 문법(호이스팅 지원 X)
ES6에 Class문법이 추가되었는데 이것은 기존의 자바스크립트가 클래수 구현에 직관적이지 않으며 클래스 생성을 위한 함수에 동작을 자세히 알아야했기 때문에 추가되었다.
추가로 SubClass도 지원한다.
