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

 

 

참고 문서

https://www.w3schools.com/js/js_es6.asp#mark_spread