ES란?
JavaScript가 넷스케이프 커뮤니케이션즈로부터 개발되고 나서, MS에서 JScript를 개발하였다. 두 언어는 서로 호환되지 못하는 경우가 있어 크로스 브라우징 이슈가 발생하였는데 이 크로스브라우징 이슈를 해결하기 위해 JavaScript를 표준화하였는데 이게 바로 ECMAScript이다. ES는 ECMAScript를 줄여쓰는 말이다. 뒤에 나오는 숫자는 버전을 뜻하는데 ES5는 2009년 발표되었고, ES6는 2015년 발표되었다.
ES6에서 달라진점
1. let, const 키워드 추가
기존의 var 키워드에 비해 블록 레벨 스코프를 가지며 재할당이 가능한 let, const 키워드가 추가되었다. 변수의 생명주기에 영향을 끼치며 키워드만 보고도 변수의 성격을 파악할 수 있게 되었다.
2. Arrow Function 추가
화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되었다. 이로 인해 코드의 가독성 및 유지 보수성이 상승하였다.
3. Default Parameter 추가
기존에 함수의 매개변수에 초기값을 작성하려면 함수 내부에서 로직이 필요했지만 ES6 이후 default parameter가 추가되었다.
4. Template literal
ES6부터 새롭게 등장한 템플릿 리터럴 덕분에 문자열 표현이 훨씬 간단해졌다. 템플릿 리터럴이란 작은 따옴표나 큰 따옴표 대신 백틱(`)으로 문자열을 감싸 표현하는 기능을 말한다. 템플릿 리터럴을 사용하면 플레이스홀더(${variable})를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.
5. Multi-line string
문자열이 라인을 넘어가게 되면 \n 줄바꿈과 덧셈연산자를 사용해야 하기 때문에 관리가 불편했다. 하지만 백 틱(`)을 사용하게 되면 여러 라인의 문자열도 문제없이 사용할 수 있게 되었다.
6. 클래스
ES5에서는 class라는 키워드는 없었지만 프로토타입을 통해 실현 가능했다. ES6에서는 class 키워드를 사용해서 선언할 수 있게 되었다.
7. 모듈
ES5 이전에는 각 기능별로 JS 파일을 나누고 개발 및 관리하는 것이 불가능했다. ES5에서는 require를 통해 모듈화를 할 수 있었다. ES6 부터는 import/export로 모듈을 관리할 수 있다. 모듈을 실현가능한 특정 프로그램의 그룹이다. 그리고 이것은 다른 파일의 변수, 함수를 참조한다. 클래스와 같은 모듈이 로딩될 때, import와 export를 이용해 사용될 수 있다.
8. 디스트럭처링 할당
디스트럭처링이란 비구조화, 파괴를 뜻하는 단어로 크게 객체나 배열에서 개별 변수에 할당할 때 사용하는 방법이다.디스트럭처링 할당을 통해 자료구조에서 일부 또는 전체를 편리하게 사용할 수 있다.
9. Promise
비동기 통신에 있어 기존에는 콜백 함수를 사용한 콜백 패턴을 사용했다. 이는 결과론적으로 콜백헬을 발생시켰다. 이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메서드를 통해 에러 처리를 효과적으로 할 수 있게 되었다.
10. string 메서드(includes, startsWith, endsWith)
includes, startsWith, endsWith의 문자열 메서드가 추가되었다. true/false 값을 리턴하며 문자열 메스드들로 검사 로직을 수행할 수 있다.
