ES6 에서 추가된 문법들(1)
let, const
변수를 선언할 때 let과 const를 사용해 선언할 수 있다.
let x = 10;
const y = 20;
기존에 사용하던 var 는 변수와 상수를 구분하지 않고 선언했으나, 변수에는 let, 상수에는 const 를 사용해 선언한다.
- ES6 이전 문법 → var
- var 는 변수를 선언하는 키워드로, var는 호이스팅되어 함수나 전역 스코프의 최상단으로 끌어올려진다. 안정성과 변수/함수 구분을 위해 let과 const를 사용하는 것이 좋다.
화살표 함수(Arrow Functions)
function 키워드 없이, ⇒ 만으로 함수를 선언할 수 있다.
// ES5
var fn = function(x, y) => {
return x + y;
}
// ES6
const newFn = (x, y) => x + y;
function 키워드 없이 함수를 선언할 수 있으며, 함수 내부에 코드를 한 줄만 작성하는 경우에는 중괄호({})와 return 도 생략할 수 있다.
- ES5 이전 문법 → function함수 표현식은 변경되지 않기 때문에 const 로 선언하는 것이 안전하다.
- 화살표함수는 호이스팅 되지 않기 때문에 사용하기 전에 선언되어야 한다.
구조분해할당 (Object Destructruing)
객체
객체의 특정 요소들만 사용하고 싶을 때, 쉽게 꺼내서 쓸 수 있다.
const book = {
material: 'paper',
name: 'The Pragmatic Programmer',
page: 478,
author: 'David Thomas'
};
// ES5
const name = book.name;
const page = book.page;
// ES6
const { name, page } = book;
중괄호 안에 key 를 적어 쉽게 꺼내서 선언할 수 있다.
다른 이름으로 선언하고 싶다면 : 을 사용하면 된다.
const book = {
material: 'paper',
name: 'The Pragmatic Programmer',
page: 478,
author: 'David Thomas'
};
// ES6
const { name: bookName, page: bookPage } = book;
name에 담긴 값을 다른 이름으로 사용하고 싶다면 : 뒤에 적어주면 바로 원하는 이름으로 선언할 수 있다.
배열
배열은 index 순서대로 할당할 수 있다.
const numbers = [1, 2, 3];
// ES5
const firstNumber = numbers[0];
const secondNumber = numbers[1];
// ES6
const [firstNum, secondNum] = numbers;
좌항에는 할당할 변수명이 담긴 배열을, 우항에는 할당할 값이 담긴 배열을 적는다.
전개 연산자(Spread Operator, …)
배열 혹은 객체의 요소들을 펼쳐서 복사에 사용한다.
원본은 영향받지 않는다.
const arr1 = [1, 2, 3];
const arr2 = [11, 12, 13];
const arr3 = [21, 22, 23];
// ES6
const arr4 = [ ...arr1, ...arr2, ...arr3 ];
// [1, 2, 3, 11, 12, 13, 21, 22, 23]
const obj1 = {
first: 1,
second: 2,
};
const obj2 = {
third: 3,
forth: 4
};
// ES6
const obj3 = { ...obj1, ...obj2 };
// { first: 1, second: 2, third: 3, forth: 4 }
For/of 순환
for과 of 를 사용해 배열을 순환할 때 각 요소에 쉽게 접근할 수 있다.
const months = ['JAN', 'FEB', 'MAR', 'APR'];
// ES5
let fullText = '';
for (let i = 0; i < months.length; i++) {
fullText += months[i];
}
console.log(fullText); // JANFEBMARAPR
// ES6
let fullText2 = '';
for (const mon of months) {
fullText2 += mon;
}
console.log(fullText2); // JANFEBMARAPR
for…of 를 사용하지 않는다면 index 의 숫자를 하나씩 증가해가며 접근해야 배열을 하나씩 사용할 수 있었다. for…of 를 사용하면 좀 더 직관적으로 코드를 작성할 수 있다.
string 을 순환하는데도 사용할 수 있다.
const js = 'Javascript';
let result = '';
for (let s of js) {
result += s + ' ';
}
console.log(result); // J a v a s c r i p t
array, string, maps, nodeLists 를 순회할 수 있다.
object 는 for…of 를 통해 하나씩 사용할 수 있을 것 같지만 에러가 난다.
const colorCodes = {
red: '#FF0000',
pink: '#FFC0CB',
orange: '#FFA500'
};
for (let color of colorCodes) {
console.log(color);
}
// Uncaught TypeError: colorCodes is not iterable
참고 문서