구조 분해 Destructuring

배열과 객체와 같이 내부에 여러 값을 담고 있는 데이터 타입을 다룰 때 Destructuring 문법을 활용하면, 배열의 요소나 객체의 프로퍼티 값들을 개별적인 변수에 따로 따로 할당해서 다룰 수가 있다.

// 배열 구조분해 Array Destructuring
const members = ['코딩하는지용', '글쓰는유나', '편집하는민환'];

const macbook = members[0]; //지용
const macbook = members[1]; //유나
const macbook = members[2]; //민환
//위 세 줄 코드를 구조분해 문법으로 작성하면 아래의 코드 한줄과 같다.
const [macbook, ipad, coupon] = members;
//할당 연산자 members의 왼편에 변수의 이름들이 배열로 선언되어 있고, 
//members 배열 자체를 할당해 버린 모습을 하고 있다. 즉, 배열을 분해해서 하나씩 할당하는 것.

//할당하는 값이 없거나 배열의 형식이 아닌 경우엔 에러가 발생한다.
//const [macbook, ipad, coupon]; 혹은 const [macbook, ipad, coupon] = 123;

console.log(macbook); // 코딩하는지용
console.log(ipad); // 글쓰는유나
console.log(coupon); // 편집하는민환

함수에서 default parater, rest parameter를 다루듯이 Destructuring 문법을 활용할 때도 기본값과 rest 문법을 활용할 수 있다.

// Array Destructuring
const members = ['코딩하는지용', '글쓰는유나', undefined, '편집하는민환', '촬영하는준하'];
const [macbook, ipad, airpod = '녹음하는규식', ...coupon] = members;

console.log(macbook); // 코딩하는지용
console.log(ipad); // 글쓰는유나
console.log(airpod); // 녹음하는규식
console.log(coupon); // (2) ["편집하는민환", "촬영하는준하"]
//rest parameter와 마찬가지로 나머지 요소를 가져오기 때문에 항상 마지막 변수에만 활용할 수 있다.

선언된 변수의 개수와 배열의 길이가 같아야 할 필요는 없다. 할당하는 배열의 길이가 길더라도, 인덱스에 따라 순서대로 할당이 되기 때문에 길이가 넘치는 요소는 어느 변수에도 할당되지 않는다. 배열의 길이가 적을 경우에는 남은 변수에 undefined 값이 반환된다.

배열의 구조분해 문법은 변수에 할당된 값을 서로 교환할 때도 활용할 수가 있다.

let macbook = '주원';
let ipad = '희준';

console.log('MacBook 당첨자:', macbook); //Macbook 당첨자: 주원
console.log('iPad 당첨자:', ipad); //iPad 당첨자: 희준

//배열 구조분해를 사용하지 않을 때 두 값을 교환해야 하는 경우
let temp = macbook; //임시로 값을 담아둘 변수를 만들어 활용했다.
macbook = ipad;
ipad = temp;

console.log('MacBook 당첨자:', macbook); //Macbook 당첨자: 희준
console.log('iPad 당첨자:', ipad); //iPad 당첨자: 주원

//배열 구조분해를 활용하는 경우. (할당연산자는 오른쪽 값을 왼쪽의 피연산자에 할당하는 동작을 한다.)
[macbook, ipad] = [ipad, macbook];

console.log('MacBook 당첨자:', macbook); //Macbook 당첨자: 희준
console.log('iPad 당첨자:', ipad); //iPad 당첨자: 주원

객체도 배열과 크게 다르진 않지만 객체는 인덱스가 아니라 프로퍼티 네임으로 여러 값들을 구분한다. 배열 구조분해에서 대괄호를 감쌌던 것처럼 객체를 분해할 때는 중괄호로 변수를 감싸준다.

// 객체 구조분해 Object Destructuring
const macbookPro = {
  title: '맥북 프로 16형',
  price: 3690000,
};

const title = macbookPro.title;
const price = macbookPro.price;
//위 코드 두 줄을 아래 한줄로 객체 구조분해 할 수 있다.
const { title, price } = macbookPro;

console.log(title); // 맥북 프로 16형
console.log(price); // 3690000

그외에는 배열의 구조분해처럼 존재하는데 예를 들어 객체에 존재하지 않는 프로퍼티 네임으로 변수가 선언이 되어 있으면 undefined 값이 할당 되고, 할당연산자를 통해서 기본값을 지정해 줄수도 있다. 

+ 선언된 변수의 개수와 배열의 길이가 같아야 할 필요는 없다. 할당하는 배열의 길이가 길더라도, 인덱스에 따라 순서대로 할당이 되기 때문에 길이가 넘치는 요소는 어느 변수에도 할당되지 않는다. 배열의 길이가 적을 경우에는 남은 변수에 undefined 값이 반환된다.

// Object Destructuring
const macbookPro = {
  title: '맥북 프로 16형',
  price: 3690000,
  memory: '16 GB 2667 MHz DDR4',
  storage: '1TB SSD 저장 장치',
};

const { title, price, color = 'silver', ...rest } = macbookPro;

console.log(title); // 맥북 프로 16형
console.log(price); // 3690000
console.log(color); // silver
console.log(rest); // {memory: "16 GB 2667 MHz DDR4", storage: "1TB SSD 저장 장치"}

...rest 처럼 나머지 프로퍼티를 하나의 객체로 모을 수도 있는데, 만약 이것을 제외하면 변수 이름은 항상 프로퍼티 네임과 동일해야 하는 걸까?

// Object Destructuring
const macbookPro = {
  title: '맥북 프로 16형',
  price: 3690000,
  memory: '16 GB 2667 MHz DDR4',
  storage: '1TB SSD 저장 장치',
};

const { title: product, price, color = 'silver', ...rest } = macbookPro;
//바꿔주고싶은 프로퍼티 네임: 바꿀 프로퍼티 네임

console.log(title); //Error!!
console.log(product); // 맥북 프로 16형

바꿔주고싶은 프로퍼티 네임: 바꿀 프로퍼티 네임으로 작성해주면 새로운 이름의 변수를 선언 할 수 있다. 코드를 실행해봤을 때 console.log(title)은 에러가 발생하지만 console.log(product)로 실행해보면 title 프로퍼티가 잘 할당되어 있는 것을 확인 할 수 있다.

//객체 내부의 프로퍼티 네임이 변수 이름으로 사용할 수 없는 경우
const launching = {
  title: '서울 어린이 동물원',
  thema: '동물원',
  price: 40000,
  operatingHours: '9 to 5',
  'serial-num': 'ABCDEFGHIJKLMNOP'
};
//따옴표를 활용하면 중간에 하이픈이 있어서 변수로 사용할 수 없는 이름도 프로퍼티 네임으로 사용할 순 있지만
//구조분해를 할 때는 반드시 새로운 이름으로 변수를 선언해야 한다.

const {title, thema, price, operatingHours, 'serial-num':serialNum } = launching;

//그리고 위 방식말고도 아래 방식으로 변수의 새로운 이름을 선언할수도 있다.

const propertyName = ''serial-num';
const { [propertyName]: serialNum } = launching;