ECMAScript 2015, 일반적으로 ES6라고 불리는 JavaScript의 버전,은 많은 중요한 업데이트와 새로운 기능들을 도입했다. 이러한 변경사항은 JavaScript 개발의 편의성을 크게 향상시켰으며, 현대 웹 개발에 광범위하게 적용되고 있다. 주요 특징들을 정리하면 다음과 같다:
[1] let, const 키워드
- let : 블록 스코프(block scope)를 가진 변수 선언 키워드
(1) 재선언 불가, 재할당 가능
(2) `var`와 달리 블록 내부에서만 유효한 변수를 선언할 수 있다. - const : 상수 선언 키워드
(1) 기존 var 키워드만 있었을 때보다 예측 가능한 코드를 작성할 수 있게 됐다.
(2) 불변의 상수를 선언하는 키워드로, 한 번 할당된 후에는 그 값을 변경할 수 없다.
[2] 템플릿 리터럴
- 사용법은 ``` (back tick)으로 가능하다.
- ${...} 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.
// ES5
var str1 = ', ';
var str2 = 'World';
var str3 = 'Hello' + str1 + str2;
// ES6
let str4 = ', ';
let str5 = 'World';
let str6 = `Hello ${str4} ${str5}`;
[3] 화살표 함수
- function 키워드 대신 =>를 사용하여 더 간결하게 함수를 선언할 수 있다.
- 화살표 함수는 자신만의 this를 생성하지 않고, 외부의 this를 사용한다.
let name = '유재석';
// ES5 함수
function myName(name){
return `이름 : ${name}`;
}
// ES6 화살표 함수
const myName1 = (name) => {
return `이름 : ${name}`;
}
// return 키워드 생략가능
const myName2 = (name) => `이름 : ${name}`;
console.log(myName(name)); // 이름 : 유재석
console.log(myName1(name)); // 이름 : 유재석
console.log(myName2(name)); // 이름 : 유재석
[4] 구조 분해 할당
- '펼치다' 란 뜻으로 객체나 배열에서 사용하며, 값을 해체한 후 개별 값을 변수에 새로 할당하는 과정
const student = {
name : "유재석",
age : 50
}
// console.log(`name : ${name}, age : ${age});
// 에러발생 : Uncaught ReferenceError: Cannot access 'name' before initialization
const { name, age } = student;
console.log(`name : ${name}, age : ${age});
// 출력결과 : name : 유재석, age : 50
const student1 = {
name1 : "아이유",
age1 : 30,
addr1 : "인천"
}
const { name1, age1, addr1 } = student1;
console.log(`name1 : ${name1}, age1 : ${age1}, addr1 : ${addr1}`);
// 출력결과 : name1 : 아이유, age1 : 30, addr1 : 인천
[5] Multi-line String
- 문자열이 라인을 넘어가게 되면 '\n'과 덧셈연산자를 사용했어야 했다.
- 백틱(```)을 사용하게 되면서 여러줄의 문자열 관리도 편해졌다.
//ES5
var es5str = '안녕하세요\n' +
'만나서 반갑습니다.';
//ES6
let es6str = `안녕하세요.
만나서 반갑습니다.`;