[ES6] 배열과 객체의 비구조화

배열과 객체의 비구조화

비구조화 할당(destructuring assignment) 구문은 배열이나 객체에 있는 각 데이터의 값을 자동으로 추출하기 위한 방법이다.

배열 비구조화

let [a, b] = [3, 4]; // a = 3, b = 4 를 대입

console.log(`${a}, ${b}`);  //  "3, 4"

[a, b] = [b, a]; // a = b, b = a를 대입(교환)

console.log(`${a}, ${b}`); // "4, 3"

[a, b] 에 우측 배열 [3, 4]의 값을 추출해 각각 순서대로 전달받는다. 순서를 바꾸어 대입하면 값을 서로 교환하는 처리가 가능해진다. (원래는 temp같은 임시 저장할 변수가 필요한데 간단해졌다.) 대입할 변수의 갯수와 배열의 크기가 일치하지 않아도 무시하고 일부분만 적용 가능하다. 

let numbers = [1, 2, 3];

let [a, b] = numbers;

let [c, , d] = numbers;

console.log(`${a}, ${b}`); // "1, 2"

console.log(`${c}, ${d}`); // "1, 3"

이렇게 길이가 일치하지 않아도 남는부분은 무시하고 할당하거나, c와 d사이의 빈값을 둠으로 할당할 배열에서 해당 위치의 값은 제외하고 할당할 수도 있다. 

let numbers = [1, 2, 3];

let [a, ...b] = numbers;

console.log(a); // 1

console.log(b); // [2,3] 

b에는 펼침연산자가 적용되어 나머지 부분을 b에 펼쳐, 배열로 가진다.

객체 비구조화

let book = {

title : 'HTML',

price : 23000

};

let {title, price} = book; // book객체의 속성을 개별적으로 좌측의 변수에 전달

console.log(`${title}, ${price}`); // "HTML, 23000"

여기서 중요한 건 변수명과 객체 속성의 이름이 같아야한다는 것이다. 그러나 다르게도 할 수는 있다.

let book = {

title : 'HTML',

price : 23000

};

let {title: newTitle, price: newPrice} = book;

console.log(`${newTitle}, ${newPrice}`;

ES6을 공부하고 글을 쓰다보니 뭔가 ES6 문법은 대화하는 것같다는 생각이든다. 컴퓨터에게 명령을 내리는 느낌에서 점점 대화하는 것이 되는 것 같다는 느낌이 든다. ㅁ단지 사적인 생각일 뿐이다.