ES는 ECMAScript의 약자이며, 자바스크립트 언어가 준수해야 하는 규칙 및 세부 사항, 지침이라고 할 수 있다.
(ES 뒤에 붙은 숫자는 각 ES의 버전을 의미)
1. let, const 키워드 추가
block-level scope에서 같은 변수명으로 재선언이 불가하며,
재할당만 가능한 let 변수 선언 방식과 상수 선언 방식인 const 키워드가 추가되었다.
ES5에 있던 var보다 가독성 및 유지보수에 용이한 코드를 작성할 수 있게 되었다.
2. 템플릿 리터럴
ES6 이전에는 변수에 담긴 값을 문자열로 표현할 때, 큰 따옴표(")나 작은따옴표(')와 함께 플러스(+)를 이용해서 표현해야 하는 번거로움이 있었으나 ES6부터는 아래와 같이 템플릿 리터럴이 새롭게 나와 이를 사용하면 플레이스 홀더(${variable})를 이용하여 백틱(") 내부에 표현식을 넣어 사용할 수 있게 되어 훨씬 간단해졌다.
// ES5
var str1 = "ES5";
var str2 = "ES6";
console.log( st1 + "와 " + str2 + "를 비교해보자!");
// ES5와 ES6를 비교해보자!
//ES6
let str1 = "ES5";
let str2 = "ES6";
consol.log('${str1}와 ${str2}를 비교해보자!')
// ES5와 ES6를 비교해보자!
- 화살표 함수
ES6부터 함수 표현식을 화살표 함수로 표현할 수 있게 되어 코드가 간결하게 표현되어 가독성 및 유지보수성이 올라갔다.
화살표 함수에서는 매개변수가 하나일 때 괄호를 생략할 수 있고, return과 {}가 생략될 수 있다. (단, 같이 생략되어야 한다.)
//ES5
funtion sumFn(a, b){
return a + b;
}
//ES6
//함수 표현식 - 화살표 함수
const sumFn = (a + b) => {
return a + b;
}
//함수 표현식 - 화살표 함수(생략)
const sumFn = (a + b) => a + b;4. 구조 분해 할당
구조 분해 할당은 펼치다라는 뜻으로 배열이나 객체의 속성을 해체하여, 개별 값을 변수에 할당 수 있게 하는 JavaScript 표현식이다.
// 배열
const arr = ["one","two","three"];
const [x, y, z] = arr;
console.log(x); // "one"
console.log(y); //" two"
console.log(z); // "three"
// 객체
const a, b;
({a, b} = {a:1, b:2});
console.log(a); // 1
console.log(b); // 2
5. promise(프로미스)
비동기 통신에 있어 기존 자바스크립트에서는 콜백 함수를 사용한, 콜백 패턴을 사용하여, 결과적으로 콜백헬을 발생시켰다. 이를 해결하기 위해 promise가 도입되었고, promise 후속처리 메서드를 이용해 에러 처리를 효과적으로 할 수 있게 되었다.
6. class
ES5에서는 class라는 키워드 대신 프로토타입을 통해 class와 같이 구현이 가능했다.
7. String Method(includes, startsWith, endsWith)
ES6에 문자열 메서드가 추가되었는데, 해당 문자열에 포함이 되어 있는지(includes)?, 시작하는지(startsWith)?, 끝나는지(endWith)? 메서드로 true/false 값을 리턴한다. 이는 문자열을 검증하는 로직에 이용하면 유용하다.
8. Multi-line String (여러 줄 문자열)
ES6이전에는 문자열 개행을 시키기 위해서는 '\n'과 덧셈 연산자를 사용했어야 했으나, ES6 이후에는 백팅(')을 사용하여 개행을 할 수 있게 되면서 여러 줄의 문자열 관리도 편해진 것 같다.
//ES5
var str = 'A B C D E F G H I J K L M N O P Q R S T U V W X Y Z \n' +
'a b c d e f g h i j k l m n o p q r s t u v w x y z \n '
//ES6
let str = 'A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z '9. Default Parameter (기본값 매개변수)
기본값 함수 매개변수를 사용하면 값이 없거나 undefind가 전달될 경우, 매개 변수의 값을 기본(default 값)을 넣어 줄 수 있다.
10. Module (모듈)-??
모듈은 재사용을 하기 위한 코드 조각이며, 코드의 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드다.
하기와 같이 type에 module을 추가해야 자바스크립트 파일이 모듈로서 동작하게 된다.
(모듈임을 구분하기 위해 확장자를 js를 mjs로 사용하기도 한다.)
위의 코드를 추가하게 되면 이제 브라우저가 모듈로 인식해 import와 export 키워드를 통해 사용할 수 있으며, 모듈은 모듈 스코프를 가진다.
모듈 외부에서 사용할 수 있도록 공개된 변수나 함수 앞에 export 키워드를 붙이고, 다른 모듈에서 import 키워드를 이용해서 불러올 수 있다.
