WIL(20230403 ~ 20230409) JavaScript의 ES란, ES5/ES6 문법 차이
# JavaScript의 ES란
ES란 ECMAScript의 줄임말로써, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 의미한다. 현재 사용하고 있는 ES6는 ES 규격의 6번째 버전이라고 보면 된다. 즉 ECMA 스크립트는 규격, 표준 즉, 스펙을 말한다.
# ES5/ES6 문법 차이
먼저 두 문법 차이를 다루기 전에 왜 과거 문법에 대해서 알아야 하는지 말해보자면
1. 과거의 코드를 최신 문법으로 리팩토링 할 수 있는가?
2. 구글링한 코드의 동작을 해석해서 유지 보수 할 수 있는가?
이와 같다고 볼 수 있다.
1. let, const
ES5의 var 키워드는 암묵적 재할당이 가능했다. 이러한 단점을 보완하기 위해 블록 레벨 스코프를 가지며 재할당이 가능한 let, const 키워드가 추가됐다.
2. Arrow function
화살표 함수가 추가되어 함수를 보다 간결하게 나타낼 수 있다. 단, 기존의 함수와 this 바인딩이 다른데 화살표 함수에는 this가 전역객체를 가르키는 것이 아닌 this가 존재하지 않는다.
function으로 선언한 함수가 메소드로 호출되냐, 함수 자체로 호출되냐에 따라 동적으로 this가 바인딩 되는 반면, 화살표 함수는 선언될 시점의 상위 스코프가 this로 바인딩된다.
3. Default Parameter
기존에서는 함수의 매개변수에 초기값을 설정하려면 내부 로직이 필요했으나, ES6 이후 default parameter가 추가됐다.
4. Template literal
사용법은 ``, Back tic 이고 내부에 ${} 표시를 통해 자바스크립트 표현식 삽입이 가능하다. 이때 Multi line string도 가능한데 기존엔 줄바꿈을 하려면 /n을 사용해야 했으나 백 틱 내부에서는 자연스럽게 내용을 타이핑하면 그대로 출력이 된다.
5. 클래스
객체 생성 방식 중의 하나이며, 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍이다.
6. 모듈
모듈이란 재사용하기 위한 코드 조각을 뜻하며, 세부사항을 캡슐화 시키고 API 부분만 외부에 노출시킨 코드들이다.
모듈은 모듈 스코프를 가지며 export, import 키워드로 사용한다. 사용법은 아래와 같다.
<script type="module" scr="lib.mjs"></script>
<script type="module" scr="app.mjs"></script>사용법은 type에 module을 추가하고, 파일 확장자를 mjs로 변경시키는 것이다.
7. 디스트럭처링 할당
디스트럭처링이란 비구조화, 파괴를 뜻하는 단어이며 크게 객체나 배열에서 사용해서 개별 변수에 할당하는 것이다.
8. 프로미스
비동기 통신에 있어 기존에는 콜백 함수를 사용한 콜백 패턴을 사용하였다. 결과적으로 콜백헬을 발생시켰는데 이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메소드를 통해 에러 처리를 효과적으로 할 수 있게 되었다.
9. string 메소드
includes, startWith, endsWith 메소드가 추가되었으며 포함되어있는지, ~로 시작되는지, ~로 끝나는지 확인해주는 기능을 수행한다.
true 혹은 false로 값을 리턴하며 해당 메소드로 검사 로직을 수행할 수 있다.