[ ECMA Script6 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=11556385)

7.1 프로퍼티 이름 조합

문자열 조합

문자열 연결(조합)하여 오브젝트의 프로퍼티 키로 사용할 수 있습니다.

let item = {
  ['one'+'two']: 12
};
console.log(item.onetwo);

변수 값과 문자열 조합

변수 값과 문자열을 조합하여 오브젝트의 프로퍼티 키로 사용할 수 있습니다.

let item = 'tennis';
let sports = {
  [item]: 1,
  [item + 'Game']: '윔블던',
  [item + 'Method']() {
    return this[item]
  }
};

console.log(sports.tennis);
console.log(sports.tennisGame);
console.log(sports.tennisMethod());

디스트럭처링과 프로퍼티 이름 조합

프로퍼티 이름을 조합하고 조합한 이름을 분할 할당(디스트럭쳐링)으로 값을 할당할 수 있습니다.

let one = 'sports';
let {[one]: value} = {sports: '농구'};

console.log(value)

7.2 Default Value

변수, 파라미터 프로퍼티에 값이 할당되지 않을 때 사전에 정의한 값이 할당 되는 것을 default value라고 합니다.
값을 할당하지 않은 변수의 기본 값인 undefined와는 다른 의미로 변수에 값이 할당되지 않았을 때 할당될 값을 작성해두는 것 입니다.

let [one, two, five = 5] = [1, 2];
console.log(five);

[one, two, five = 5] = [1, 2, 77];
console.log(five);

let {six, seven = 7} = {six:6};
console.log(six, seven);

default value는 왼쪽에서 오른쪽의 순서로 적용 됩니다.

7.3 Default 파라미터

호출받는 함수의 파라미터에 디폴트 값을 작성할 수 있습니다.

// default parameter
let plus = (one, two = 2) => one + two;

console.log(plus(1));
console.log(plus(1, undefined));
console.log(plus(1, 70));


// 파라미터 디스트럭쳐링
let getTotal = ([one, two] = [10, 20]) => one + two;
console.log(getTotal());

let getValue = ({two: value} = {two: 20}) => value;
console.log(getValue());

7.4 for-of

for-of 문은 이터러블 오브젝트를 반복하여 처리하는 것으로 반복하는 것은 for-in문과 동일하지만 대상과 방법에서 차이가 존재합니다(7.5 참고)

[구문]
for (variable of interableObject) { code }

이터러블 오브젝트인 Array, String, NodeList에 사용할 수 있으며 이터러블 오브젝트의 구조에 맞춰 사용하면 디스트럭처링을 할 수 있습니다.

// Array
for (var value1 of [10, 20, 30]) {
  console.log(value1);
}

// String
for (var value2 of 'ABC') {
  console.log(value2);
}

// nodeList
let nodes = document.querySelectorAll('li');
for (var node of nodes) {
  console.log(node.textContent);
}

// 디스트럭처링
let values = [
  {item: '선물1', amount: {apple:10, candy:20}},
  {item: '선물2', amount: {apple:30, candy:40}}
];
for (var {item: one, amount: {apple: two, candy: five}} of values) {
  console.log(one, two, five);
}

7.5 for-of과 for-in의 차이

for-in 대상은 Object이며 열거 가능한 프로퍼티가 대상
for-of 이터러블 오브젝트가 대상이며 prototype에 연결된 프로퍼티는 대상이 아님

let values = [10, 20, 30];
// 테스트를 위해 Array 오브젝트에 임의의 prototype을 추가
Array.prototype.music = function () {
  return '음악'
};
Array.prototype.sports = function () {
  return '스포츠'
};
console.log('<<<< for-in >>>>');
for (var key in values) {
  console.log(key, values[key]);
}
console.log('<<<< for-of >>>>');
for (var key2 of values) {
  console.log(key2);
}

7.6 for-of로 Object 열거

Object는 이터러블 오브젝트가 아니므로 for-of문을 열거할 수 없지만 개발자 코드로 사전 처리를 하면 열거할 수 있게 됩니다.

let sports = {
  soccer: '축구',
  baseball: '야구'
};
// Object.keys메서드는 프로퍼티 키를 Array로 변환하며 반환 합니다.
let keyList = Object.keys(sports); 

for (var key of keyList) {
  console.log(key);
}

7.7 거듭 제곱 연산자

거듭 제곱(Exponenitation) 연산자는 곱하기 문자를 연속하여 2개 작성한 형태(**)로 ES7 스펙에 추가 되었습니다.

1
2
3

console.log(3**2);
console.log(3**3);
console.log(Math.pow(3, 3));

(ES6) - 07 오퍼레이션