[항해99/WIL] ES5/ES6 비교

ES란 ECMA Script의 약자입니다. ES5는 ECMA Script5의 규격을 따른다고 생각하면 됩니다. ES5에서 추가된 기능 중 ES6과 대표적으로 비교되는 건 다음과 같습니다.

템플릿 리터럴
화살표 함수
this
변수선언
모듈
클래스

1.템플릿 리터럴

차이점을 말하자면 ES5와 ES6의 표현식 삽입법을 다룰 수 있겠습니다.

let a = 음
let b = 써봐야지

console.log("나는" + a + "이렇게" + b);

위는 ES5 다루고, 아래는 ES6을 다룹니다.

let a = 음
let b = 써봐야지
console.log(`나는 $[a} 이렇게 ${b}`);

이런 차이가 있습니다. 확실히 ES6이 더 간결하죠.

2. arrow 문법 지원

arrow 문법은 두 가지의 장점이 있습니다. 첫번째는 쉽고 간결하게 사용할 수 있다는 점이고, 두 번째는 this를 바인딩하지 않습니다.(this는 해당 스코프의 this와 같습니다.)

3. this

자바스립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 값, 즉 this 바인딩이 동적으로 결정된다.

화살표 함수는 함수 객체의 this바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다.

4. let, const 키워드 추가

기존에는 var을 자주 사용했다고 들었습니다. 지금도 코딩테스트에서나 년도가 오래된 글에도 종종 발견합니다. let는 변경이 가능한 값이고 const는 변경이 불가능한 값입니다. 추가가 안된 상태에서 자바스크립트를 했더라면 지금보다 더하지 않았을까싶습니다..

5.모듈

https://y-chyachya.tistory.com/49

6.클래스

https://typeof-undefined.tistory.com/7

이렇게 따로 구분해서 알 수 있게되니 머릿속이 덜 복잡한 것같기도..이보다 더 차이를 알고 싶으면 아래의 블로그를 참고하면 좋을 듯합니다.

https://doozi0316.tistory.com/entry/JavaScript-ECMAScript%EB%9E%80-ES5%EC%99%80-ES6%EC%9D%98-%EC%B0%A8%EC%9D%B4var-const-let-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-class

ES5 문법과 ES6 비교
https://juniordev-team.tistory.com/6

ES6 문법
https://velog.io/@kimhscom/JavaScript-%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC