ES란
ECMASCRIPT의 약어를 뜻하며 자바스크립트의 표준, 규격을 나타내는 용어이다.
뒤에 숫자는 버전을 뜻하는데 ES5(2009년), ES6(2015년) 출시되었다.
버전별로 확인하다 보면 ES6 이후에는 매년 업데이트가 되고 있는 반면, ES5와 ES6 사이에는 시간 차이가 있으며 많은 기능들이 추가되었다.
1. let, const 키워드
블로스코프를 가지고 재선언 불가 재할당 가능한 let 변수 선언 키워드와 상수 선언 키원드 const가 추가되었다.
기존 var 키워드만 있었을 때 보다 예측 가능한 코드를 작성 할 수 있게 되었다.
2. 템플릿 리터럴
사용법은 “(back tick)으로 가능하다.
${} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.
// ES5
var str1 = ', ';
var str2 = 'World!';
var str3 = 'Hello' + str1 + str2;
// ES6
let str1 = ', ';
let str2 = 'World!';
let str3 = `Hello ${str1} ${str2}`;3. 객체 리터럴
이전 보다 훨씬 간결해진 코드로 객체를 선언할 수 있다.
메소드에 더 이상 콜론(:)이나 function을 붙이지 않아도 된다.
함수명이 겹치는 경우에는 한 번만 쓸 수 있다.
객체의 프로퍼티를 동적으로 생성하려면 객체 리터럴 바깥에서 [text + 1]과 같이 선언했어야 했는데, ES6부터는 객체 안에서 바로 속성으로 사용할 수 있다.
const myFn = function() {
console.log('myFn');
};
const text = 'TEXT';
const obj = {
inside() {
console.log('객체 안에 바로 함수를 선언');
},
myFn,
[text + 1]: '하나몬'
};
obj.inside(); // 출력값: 객체 안에 바로 함수를 선언
obj.myFn(); // 출력값: myFn
console.log(obj.TEXT1); // 출력값: 하나몬4. 화살표 함수
함수 표현식을 화살표 함수로 표현할 수도 있다.
화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 되어 가독성 및 유지 보수성이 올라갔다.
만약 함수의 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할 수 있다. 단, 같이 생략해야한다.
return문에서 소괄호는 사용가능하다.
// ES5
function plusFn(a, b) {
return a + b;
}
// ES6
// 함수 표현식 - 화살표 함수
const plusFn = (a, b) => {
return a + b;
}
// 함수 표현식 - 화살표 함수 (생략형)
const plusFn = (a, b) => a + b;5. 구조 분해 할당
구조분해 할당이란 펼치다란 뜻으로 객체나 배열에서 사용하며, 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.
// 배열에서 Spread 사용
const arr = [1, 2, 3];
const [one, two, three] = arr;
one // 1
two // 2
three // 3
// 객체에서 Spread 사용
const obj = {
firstName: '하나',
lastName: '몬'
};
const { firstName, lastName } = obj;
firstName // 하나
lastName // 몬6. Promise
자바스크립트에서 비동기 처리를 기존에는 콜백 함수를 사용한, 콜백 패턴을 사용하였다.
결과론적으로, 콜백헬을 발생시켰다.
이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메소드를 이용해 에러 처리를 효과적으로 할 수 있게 되었다.
7. Class
자바스크립트는 프로토타입 기반의 객체 지향 언어이다.
클래스 기반의 객체 지향 프로그래밍도 할 수 있게 Class 키워드를 도입하였다.
자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해서 만들어졌다.
클래시는 사실 특별한 함수이다.
클래스는 호이스팅이 let, const 키워드 처럼 동작한다.
8. String Method (includes, startsWith, endsWith)
포함되어있는지(includes), 시작하는지(startsWith), 끝나는지(endsWith)
boolean 타입을 return 해준다.
const str = 'Hello World Hanamon';
str.includes("Hana"); // true
str.startsWith("Hello"); // true
str.endsWith("mon"); // true9. Multi-line String
문자열이 라인을 넘어가게 되면 ‘\n’ 과 덧셈 연산자를 사용했어야했다.
백틱을 사용하게 되면서 여러줄의 문자열 관리도 편해졌다.
// ES5
var str = 'asdhasfhfsahsfhfshasfhsfahsfahsfahasfh.\n' +
'mxmxmxmxmxmxmxmmxmxmxmxmxmmxmxmxmxmxm.\n'
// ES6
let str = `asdhasfhfsahsfhfshasfhsfahsfahsfahasfh
mxmxmxmxmxmxmxmmxmxmxmxmxmmxmxmxmxmxm`;10. Default Parameter
기존에는 함수의 매개변수에 초기화를 하려면 내부 작업이 필요했으나, ES6 에서는 필요 없어졌다.
// ES5
function myFn(a, b) {
var a = a || 100;
var b = b || 200;
return a + b;
}
console.log(myFn(100)); // 300
// ES6
const myFn = (a = 100, b = 200) => a + b;
console.log(myFn()); // 30011. Module
모듈이란, 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드이다.
type에 module을 추가시키고 확장자를 mjs로 변경하여 사용한다.
모듈은 모듈 스코프를 가지며, import와 export 키워드를 이용하여 사용한다.
<script type="module" src="lib.mjs"></script>