[ES6]Destructuring assignment

Destructuring assignment

구조 분해 할당이라고 번역 되어진다.

예시를 보자

var colors = ["red", "white", "orange"];

var first = colors[0];

var second = colors[1];

var third = colors[2];

console.log(first, second, third);

기존에 배열마다 변수를 선언 하기 위해선 다음과 같은 방식을 이용해야 했다.

이를 es6에서는

var colors = ["red", "white", "orange"];

const [first, second, third] = colors;

console.log(first, second, third);

이와 같이 사용 될 수 있다.

객체도 구조 분해 할당을 할 수 있다.

const loginInfo = {

users: {

createdAt: "2018-03-15",

email: "operation@naver.com",

name: "김철수",

Id: "CC"

},

photo: {

computer: {

createdAt: "2019-01-27",

likes: "38",

size: "2048"

},

book: {

createdAt: "2019-01-29",

likes: "558",

size: "2048"

}

}

};

const {

users,

photo: {

computer,

book: { bookCreated: createdAt, likes, size }

}

} = loginInfo;

다음 예시는 json과 관련해서 데이터를 주고 받을 때 자주 사용 할 수 있을 것 같다.

users는 loginInfo의 user 모두를 받고

photo는 photo안의 computer와

book의 속성들을 변수로 만들었다.