[ES6] 단축속성명, 계산된 속성명

단축 속성명
객체 속성값 일부가 이미 변수로 존재 시 변수이름만 적기!

예1

이전 문법

const name = 'mike';
const obj = {
    age : 21,
    name,    // 단축속성명
    getName() {return this.name}
}

바뀐 문법

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

예2

//이전
function makeObject1(key,value) {
    const obj = {};
    obj[key] = value;
    return obj
}
// 바뀐 문법
function makeObject2(key,value) {
    return {[key]:value}      // 계산된 속성명 [key] !??!?!
}

[key]값이 key의 이름으로 동적으로 할당--> 여기 모름!??!!!

배열 비구조화

1.배열비구조화는 순서를 기준으로 할당

• unlike 객체 비구조화, 배열 비구조화는 index값 기준

const arr = [1,2];
const [a,b] = arr;
console.log(a)    // 1
console.log(b)    // 2

2.배열 비구조화의 기본값

const arr = [1];        // arr[0]=1
const [a=10, b=20] = arr;
console.log(a)    //    1
console.log(b)    //    20

a=10, b=20은 default value
여기에 첫 번재 요소에 1, 두 번째 요소에 undefined!

결과 a=1, b=20

3.배열 비구조화 값 교환은 한줄컷 가능

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

4.중간 속성값 건너뛰기

const arr = [1,2,3];
const [a,,c] = arr;
console.log(a)    // 1
console.log(c)    // 3

5. Spread Syntax로 나머지배열 생성

• 나머지값 없으면 빈배열!

const arr = [1,2,3];
const [first, ...rest1] = arr;
console.log(rest1) // [2,3]
const [a,b,c, ...rest2] = arr;
console.log(rest2) // []

복습 꼭 하기😂