ES6(ECMAScript 6) 주요 문법

0. ES6(ECMAScript 6)

2015년에 발표한 JavaScript의 버전

1. let, const

이전 글 참고 (변수 선언 키워드 (var, let, const))

2. 템플릿 리터럴(Template Literal)

문자열의 새로운 표현 방식

• 기존의 따옴표('',"") 대신 백틱(``)을 사용
• 문자열 내부에서 줄바꿈이 가능함

`It is possible to use multi-line
	if you use Template Literal`

• ${}를 사용하여 문자열 안에 데이터를 넣을 수 있음

`It is also possible to put ${data} inside String`

3. 화살표 함수(Arrow Function)

익명 함수의 새로운 표현 방식

• function 키워드 대신 =>를 사용함

// ~ ES5
let func = function (x) { return x*x };

// ES6 ~
let func = x => x*x;

// 인수가 1개인 경우 괄호()를 생략할 수 있음
let func = x => {return x*x;};

// 인수가 없는 경우, 괄호()를 생략할 수 없음
let func = () => {console.log("생략 불가");};

// 함수 내부의 문장이 return 뿐인 경우, 중괄호{}와 return 키워드를 생략할 수 있음
let func = x => x*x;

// 함수 내부의 문장이 return 뿐이지만, return 값이 객체인 경우, 괄호()를 사용함
let func = (a, b) => ({x: a, y: b};);

4. 단축 속성명(Property Shorthand)

객체의 key 값과 value 값이 동일한 경우, 생략할 수 있음

// ~ ES5
let obj = {
  a: a,
  b: b,
  c: c,
};

// ES6 ~
let obj = {a, b, c}

객체의 메서드의 function 키워드도 생략할 수 있음

// ~ ES5
let obj = {
  a: a,
  sayHello: function () {...}
}

// ES6 ~
let obj = {
  a,
  sayHello() {...}
}

5. 전개 연산자(Spread Operator)

전개할 배열 or 객체의 앞에 ...를 사용하여 해당 배열 or 객체를 문자열 형태로 전개함

// 배열
let arr = ["b", "C"];
console.log("a", ...arr, "d");	// a b c d

// 객체
let obj = {name: "Tom", age: 30};
let newObj = {...obj, city: "seoul"};
console.log(newObj);	// {name: 'Tom', age: 30, city: 'seoul'}

6. 나머지 매개변수(Rest Parameter)

전개 연산자(...)를 사용하여 가변 인수 목록을 배열 형태로 가짐

• 반드시 인수의 마지막 부분에 사용해야 한다.

function func(a, b, ...rest) {
  console.log(a, b, rest);
}

func(1, 2, 3, 4, 5);	// 1 2 [3, 4, 5]

7. 기본 매개변수(Default Parameter)

함수의 매개변수에 기본값을 설정할 수 있음

• 해당 기본값은 설정한 인수에 대응하는 값이 없거나 undefined인 경우에 적용된다.

function sum(a, b=5) {
  return a + b;
}
console.log(sum(1,2));	// 3 (1+2)
console.log(sum(1));	// 6 (1+5)

8. 구조 분해 할당(Destructuring)

배열 or 객체의 값을 변수에 할당할 수 있음

// 배열
let [a, b] = ["value1", "value2"];
console.log(a);	// value1
console.log(b);	// value2

// 객체
let {x: a, y: b} = {x: 1, y: 2};
console.log(a);		// 1
console.log(b);		// 2

• 나머지 매개변수를 사용할 수 있음

let [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a);		// 1
console.log(b);		// 2
console.log(rest);	// [3, 4, 5]

let {a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4};
console.log(a);		// 1
console.log(b);		// 2
console.log(rest);	// {c: 3, d: 4}

• 변수의 개수가 (좌변, 우변)인 경우, 남은 값은 undefined가 됨

let [a, b, c] = [1, 2];
console.log(a);		// 1
console.log(b);		// 2
console.log(c);		// undefined

let {a, b, c} = {a: 1, b: 2}
console.log(a);		// 1
console.log(b);		// 2
console.log(c);		// undefined

• 변수의 개수가 (좌변 < 우변)인 경우, 남은 값은 할당되지 않음

let [a, b] = [1, 2, 3];
console.log(a);		// 1
console.log(b);		// 2

let {a, b} = {a: 1, b: 2, c: 3}
console.log(a);		// 1
console.log(b);		// 2

• 기본값을 설정할 수 있음

let [a, b, c=1] = [1, 2];
console.log(a);		// 1
console.log(b);		// 2
console.log(c);		// 1

let {a=10, b=2} = {a: 3};
console.log(a);		// 3
console.log(b);		// 2

9. 모듈(Module)

기능 단위로 묶은 코드의 집합체

• export를 사용하여 모듈을 외부로 보내고 import를 사용하여 가져옴

• 보내는 방식

// Default export
// 1. 모듈에서 단 한 개만 export할 수 있음
export default function {...};	// ex.js
// 2. 다른 파일에서 아무 이름으로 import할 수 있음
import funcFromEx from "ex.js";

// Named export
// 1. 모듈에서 여러 개를 export할 수 있음
export const name1, name2;
export function func() {...};
// 2. 이름을 변경하여 export할 수 있음
export {name1 as newName1, name2 as newName2};
// 3. import한 모듈을 export할 수 있음
export * from "ex.js";
// import * from "ex.js";  export *;
export {func1 as newFunc1, func2 as newFunc2} from "func.js";

10. Map / Set

데이터의 구성, 검색 및 사용을 배열이나 객체보다 효율적으로 처리하는 객체

Map

(key, value) 값을 저장함

• 생성 방법 : new Map();

• Object 객체와의 차이점

유형	Object 객체	Map 객체
key 유형	문자열만 가능	모든 타입 가능
key 순서	존재하지 않음	존재함
내부 데이터의 개수	수동으로 계산	map.size

• 주요 메서드

메서드	설명
Map.set(key, value)	Map 객체에 (key, value)를 추가함
Map.get(key)	Map 객체에서 key에 해당하는 value를 return
Map.has(key)	Map 객체에 key에 해당하는 value가 있는지 true/false
Map.delete(key)	Map 객체에서 key에 해당하는 value를 제거함
Map.clear()	Map 객체의 모든 (key,value)를 제거함
Map.forEach(callback)	Map 객체의 모든 key를 순회하며 callback 함수를 실행함
Map.keys()	Map 객체의 모든 key를 Iterator 형태로 return
Map.values()	Map 객체의 모든 value를 Iterator 형태로 return
Map.entries()	Map 객체의 모든 (key, value)를 Iterator 형태로 return

Set

value 값을 저장함

• 생성 방법 : new Set();

특징

• value 값이 중복되지 않는다. (고유한 값을 저장한다.)

• value의 타입에 제한이 없다.

• 주요 메서드

메서드	설명
Set.add(value)	Set 객체에 value를 추가함
Set.has(value)	Set 객체에 value가 있는지 true/false
Set.delete(value)	Set 객체에서 value를 제거함
Set.clear()	Set 객체의 모든 value를 제거함
Set.forEach(callback)	Set 객체의 모든 key를 순회하며 callback 함수를 실행함
Set.values()	Set 객체의 모든 value를 Iterator 형태로 return

11. 클래스(Class)

별도 작성 예정

12. Promise

별도 작성 예정