ES6(ECMAScript 6) - 단축 속성명 / 계산된 속성명 / 전개 연산자 / 비구조화

1. 단축 속성명(shorthand property names)

:  객체의 속성값이 이미 변수로 존재한다면 변수이름만 사용하여 객체 생성 가능

let name = "John";
const obj = {
    age: 21,
    name: name,
    getName: function getName() {
        return this.name;
    }
};


const obj = {
    age: 21,
    name,		// 속성이름과 속성값을 가지고 있는 변수 이름이 동일한 경우
    getName(){		// 속성이름과 함수(메소드) 이름이 동일한 경우 => function 키워드와 함께 생략
        return this.name;
    }
};

2. 계산된 속성명(computed property names)

: 변수를 이용해서 객체 속성의 키를 생성

 // 속성 이름(key)과 속성 값(value)을 전달받아 객체를 반환하는 함수를 정의 
 function returnObject(key, value) {
    /*
    const obj = {};
    obj[key] = value;
    return obj;
    */
    return { [key]: value };
}

 function returnObject(key, value) {
        /*
        const obj = {};
        obj[key] = value;
        return obj;
        */
        return { [key]: value };
    }

 // 속성 이름이 일련번호 형태를 가지는 객체를 반환하는 함수
 function returnObject2(key, value, no) {
    /*
    const obj = {};
    obj[key+no] = value;
    return obj;
    */
    return { [key+no]: value };
}

3. 전개 연산자(spread operator) ...

:배열 또는 객체를 하나하나 넘기는 용도로 사용

const numbers = [10, 20, 1, 30, 3, 2];

console.log(numbers);               // 배열
console.log(...numbers);            // 순열 (숫자의 나열) => 배열 요소의 나열

// 객체를 복사하는 과정에서 새로운 속성을 추가하거나 속성의 값을 변경하는 경우
let obj1 = { age: 26, name: 'hong' };

 /*
let obj2 = { ...obj1 };
obj2.name = 'gildong';
*/
let obj2 = { ...obj1, name: 'gildong' };
console.log(obj2);  // {age: 40, name: 'gildong', color: Array(2)}

// 객체를 결합하는 경우
const obj1 = { age: 21, name: 'hong' };
const obj2 = { hobby: 'soccer', age: 40 };

const obj3 = { ...obj1, ...obj2 };
console.log(obj3);      // {age: 40, name: 'hong', hobby: 'soccer'}

const obj4 = { ...obj2, ...obj1 };
console.log(obj4);      // {hobby: 'soccer', age: 21, name: 'hong'}

** 배열 관련 유의사항

let arr1 = [ 1, 2, 3 ];
let arr2 = arr1;
console.log(arr1);		// [1, 2, 3]
console.log(arr2);		// [1, 2, 3]

// 배열 값을 변경
 arr1[1] = 20;
console.log(arr1);		// [1, 20, 3]
console.log(arr2);		// [1, 20, 3]

// => arr2는 arr1 배열의 주소를 복사한 것

// 배열의 주소가 아닌 배열의 값을 복사하는 것이 필요
// 전개 연산자를 이용해서 배열의 값을 복사
let arr5 = [ 1, 2, 3 ];
let arr6 = [ ...arr5 ];
 console.log(arr5);		// [1, 2, 3]
console.log(arr56;		// [1, 2, 3]

arr5[1] = 20;
console.log(arr5);		// [1, 20, 3]
console.log(arr6);		// [1, 2, 3]

4. 비구조화(destructuring)

: 배열 또는 객체의 데이터(요소)를 변수에 나눠서 할당

 

1) 배열 

const arr = [ 1, 2, 3, 4, 5 ];

let [ c, d, e, f ] = arr;
console.log(c, d, e, f);		// 1 2 3 4 
								// =>c, d, e, f 변수에 arr 배열에 첫번째 인덱스부터 차례로 할당

 // 두 변수의 값을 교환
let x = 10;
let y = 20;

비구조화   배열
~~~~~~~~   ~~~~~~~~
[ x, y ] = [ y, x ];
console.log(x, y);		// 10 20

 // 배열의 크기 보다 변수의 개수가 많은 경우, 기본값 설정이 가능
const arr = [ 1, 2 ];
let [ a, b, c=30 , d ] = arr; 
console.log(a, b, c, d);		// 1 2 30 undefined

 // 배열의 일부값을 변수에 할당할 경우, 할당하지 않을 자리는 비워둠
  let arr= [1, 2, 3];
  let a=10, b=20, c=30;
  [ a, , c ] = arr;
  console.log(a, b, c);		//1 20 3
  
// 배열의 값을 할당하고 남은 나머지를 새로운 배열로 만드는 경우 
const arr = [ 1, 2, 3, 4, 5 ];
const [first, ...rest] = arr;

console.log(first);		// 1
console.log(rest);		// [2, 3, 4, 5]

2) 객체

// 객체 비구조화를 할 때는 객체의 속성명(key)이 중요
const obj1 = { age: 21, name: 'mike' };
const obj2 = { age: 40, name: 'john' };

const { age, name } = obj1;
console.log(age, name);		// 21 'mike'

const { ageNew, nameNew } = obj1;
console.log(ageNew, nameNew);		// undefined undefined

// 객체 비구조화를 통해 가져온 값을 새로운 변수 이름으로 사용할 경우 => 별칭을 부여
const { age: ageNew, name: nameNew } = obj1;
console.log(ageNew, nameNew);		//21 'mike'

// 객체에 존재하지 않는 요소를 변수에 할당할 때 적용할 기본값 설정도 가능
const { age, name: nameNew, email='default' } = obj1;
console.log(age, nameNew, email);   // 21 'mike' 'default'

// 객체 비구조화 시 객체의 일부 속성을 변수에 할당하고, 나머지를 새로운 객체로 저장
const obj3 = { age: 32, name: "John", grade: "c" };

// obj3의 age 속성의 값을 johnAge 변수에 할당하고, 나머지를 rest 이름의 객체에 할당
const { age: johnAge, ...rest } = obj3;
console.log(johnAge, rest);     // 32 {name:'John', grade:'c'}