(20) Modern JavaScript - 구조 분해 (Destructuring)

배열과 객체는 여러 개의 값을 다룰 때 유용하게 활용될 때,

배열과 객체를 다룰 때 사용할 수 있는 "구조 분해 (Destructuring) " 라는 문법이 존재하며

이름 그대로 배열이나 객체의 구조를 분해하는 문법이다.

 

그런데 index로 여러 값에 순서가 있는 배열하고

프로퍼티 네임으로 여러 값에 이름이 붙는 객체는

구조가 서로 다르기 때문에

구조 분해 문법도 배열과 객체에 각각 적용되는 방식에 차이가 있다.

그렇기 때문에 배열과 객체 각각 따로 구조 분해 문법을 알아야한다.

---

구조 분해 문법 - 배열

우선 배열의 구조 분해 문법을 살펴보자.

// 구조 분해 (Destructuring)
const rank = ["행섭", "죡팡", "힝카인", "찌듕"];

const macbook = rank[0];
const ipad = rank[1];
const airpods = rank[2];
const coupon = rank[3];

console.log(macbook);
console.log(ipad);
console.log(airpods);
console.log(coupon);

등수가 가려진 rank라는 배열을 만들기위해 배열 값에 이름을 작성하고

이 순위에 따라 상품을 나눠주기 위해 

상품 이름으로 만든 변수에 배열의 요소를 순서대로 할당한 코드를 만들었다.

처음부터 상품 이름에 맴버 이름을 할당할 수 있지만

나중에 배열 요소들의 순서가 변경되었을 때 

자연스럽게 배열의 순서에 따라 값이 할당 되게 끔 작성하였다.

---

구조 분해(배열) 문법 살펴보기

구조 분해는 아래의 상황들에서 유용하게 활용된다.

해당 문법으로 다시 작성해본 결과, 다음과 같다.

// 구조 분해 (Destructuring)
const rank = ["행섭", "죡팡", "힝카인", "찌듕"];

// const macbook = rank[0];
// const ipad = rank[1];
// const airpods = rank[2];
// const coupon = rank[3];

const [macbook, ipad, airpods, coupon] = rank;

console.log(macbook);
console.log(ipad);
console.log(airpods);
console.log(coupon);

이렇게 4줄로 작성된 코드가 한 줄로 표현이 가능하게 된다.

 

좀 더 코드를 살펴보자면

할당 연산자 왼편에 변수의 이름들

[macbook, ipad, airpods, coupon] 은 배열의 형태로 선언되어 있고

rank 배열 자체를 할당하였다.

이렇게 되면 배열의 형태를 한 변수 이름들에

rank 배열의 요소들이 순서대로 할당되는 원리로 동작한다.

콘솔창을 확인해보면 이전과 똑같이 잘 동작할 것이고

즉 배열을 분해해서 하나씩 할당하는 원리라고 볼 수 있다.

 

단 주의해야 할 점은

할당 연산자 오른쪽(rank)에 할당되는 값이 배열의 형식이 아니거나

아예 아무것도 할당하지 않을 경우 오류가 발생한다.

const [macbook, ipad, airpods, coupon] = 12345; // Error

const [macbook, ipad, airpods, coupon]; //Error

 

▼ 선언된 변수의 개수와 배열의 길이가 같을 필요 없다.

문법을 계속 살펴보면

배열을 가지고 구조 분해를 할 때

꼭 선언된 변수의 개수와 배열의 길이가 같아야 할 필요는 없다.

// 구조 분해 (Destructuring)
const rank = ["행섭", "죡팡", "힝카인", "찌듕", "스기따라"];

// const macbook = rank[0];
// const ipad = rank[1];
// const airpods = rank[2];
// const coupon = rank[3];

const [macbook, ipad, airpods, coupon] = rank;

console.log(macbook);
console.log(ipad);
console.log(airpods);
console.log(coupon);

위와 같이 '스기따라' 맴버를 추가하여

할당하는 배열의 길이가 선언된 변수의 개수보다 많더라도

그냥 인덱스에 따라 순서대로 할당 되기 때문에

길이가 넘치는 요소는 어느 변수에도 할당되지 않는다.

 

그대신 순서대로 할당되는 특징을 잘 고려해서 

배열 안의 요소들의 순서나 

혹은 할당 받을 변수들의 순서는 잘 정리해야 한다.

---

구조 분해(배열) -  마침표(...) 활용하기

마지막 변수에 마침표 세 개(...)를 붙여서 레스트 파라미터처럼 배열을 분해해서 할당할 때 

앞쪽에 있는 변수의 순서대로 요소를 할당하고

남은 나머지 요소를 마지막 변수의 배열로 할당하는 것이 가능하다.

// 구조 분해 (Destructuring)
const rank = ["행섭", "죡팡", "힝카인", "찌듕", "스기따라"];

// const [macbook, ipad, airpods, coupon] = rank;
const [macbook, ipad, airpods, ...coupon] = rank;

console.log("맥북:", macbook);
console.log("아이패드:", ipad);
console.log("에어팟:", airpods);
console.log("무신사쿠폰:", coupon);

코드를 실행해보면 마지막 쿠폰을 받을 사람이 배열로 모인 2명이 확인된다.

레스트 파라미터와 마찬가지로

나머지 요소를 가져오기 때문에 항상 마지막 변수에만 활용할수 있으니 이점 유의해야한다.

---

구조 분해(배열) - undefined와 기본값

 

할당하는 배열의 길이가 선언된 변수의 개수보다 적다면

// 구조 분해 (Destructuring)
const rank = ["행섭", "죡팡", "힝카인"];

const [macbook, ipad, airpods, coupon] = rank;
// const [macbook, ipad, airpods, ...coupon] = rank;

console.log("맥북:", macbook);
console.log("아이패드:", ipad);
console.log("에어팟:", airpods);
console.log("무신사쿠폰:", coupon);

이런경우, 순서대로 배열안의 요소가 할당되고

남은 변수에는 선언이 안되거나 오류가 발생하는 것이 아니라,

undefined 값이 할당된다.

 

여기서, 함수의 파라미터처럼 undefined 값이 할당되려고 할 때

아래와 같이 기본값을 설정해주면 undefined 대신 '없음' 문자열이 할당된다.

---

구조 분해(배열) - 할당된 값 서로 교환

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

아래 두 변수에 서로 다른 값이 할당되어 있는 코드를 보면

let macbook = "행섭";
let ipad = "죡팡";
console.log("맥북:", macbook);
console.log("아이패드:", ipad);

let temp = macbook;
macbook = ipad;
ipad = temp;
console.log("맥북:", macbook);
console.log("아이패드:", ipad);

구조 분해 문법을 활용하지 않았을 경우

이 두 변수의 값을 서로 교환할 때 임시로 값을 담아 둘 변수를 만들어서 'macbook'의 값을 담아두고

macbook에는 'ipad'의 값을 담고 ipad에는 'temp'에 있는 macbook의 값을 담는 방식으로 교환하였다.

새로운 변수를 만들어야 되기도 하고 코드도 여러 줄 작성 해야 하는 불편함이 있지만 

구조 분해 문법이 등장하기 전에는 위와 같이 코드를 작성 해야 했다.

 

그렇다면 위 코드를 구조 분해 문법을 활용해보면 다음과 같다.

let macbook = "행섭";
let ipad = "죡팡";
console.log("맥북:", macbook);
console.log("아이패드:", ipad);

// 구조 분해 문법 사용 전
/*
let temp = macbook;
macbook = ipad;
ipad = temp;
*/

// 구조 분해 문법 사용 후
[macbook, ipad] = [ipad, macbook];

console.log("맥북:", macbook);
console.log("아이패드:", ipad);

할당 연산자는 오른쪽 값을 왼쪽 피연산자에 할당하는 동작을 한다고 했을 때,

ipad에 담겨있는 '죡팡'이 macbook으로 할당되고

macbook에 담겨있는 '행섭;이 ipad로 할당되게 된다.

 

실행해보면 두 변수에 담긴 값이 잘 교환된 것을 확인할 수 있다.

---

구조 분해 문법 - 객체

// 구조 분해 (Destructuring)
const macbook = {
  title: "맥북 프로",
  price: 1000000,
  memory: "16GB",
  storage: "1TB",
};

객체도 배열과 크게 다르진 않지만 

객체는 인덱스가 아니라 프로퍼티 네임으로 여러 값들을 구분한다고 했을 때,

일반적으로 아래와 같이 객체의 프로퍼티 값을 사용하려고 하는데

// 구조 분해 (Destructuring)
const macbook = {
  title: "맥북 프로",
  price: 1000000,
  memory: "16GB",
  storage: "1TB",
};

const title = macbook.title;
const price = macbook.price;
console.log(title);
console.log(price);

점 표기법으로 매번 객체를 작성하지 않고

간결하게 프로퍼티 네임 자체를 변수처럼 사용하고자 할 때 구조 분해를 활용한다.

---

객체의 구조분해 문법은 다음과 같다.

// 구조 분해 (Destructuring)
const macbook = {
  title: "맥북 프로",
  price: 1000000,
  memory: "16GB",
  storage: "1TB",
};

// const title = macbook.title;
// const price = macbook.price;

const { title, price } = macbook; // 구조 분해

console.log(title);
console.log(price);

배열을 분해할 때는 배열처럼 대괄호를 감쌌던 것 처럼

객체를 분해할 때도 객체처럼 중괄호로 변수를 감싸줘야한다.

요소를 인덱스 순서대로 할당했던 배열과는 다르게

객체는 프로퍼티 네임을 통해서 분해가 되기 때문에

할당 연산자 오른편의 'macbook' 객체에서

할당 연산자 왼편에 선언된 변수 {title, price}의 이름과 똑같은 프로퍼티 네임이 있다면

이 변수 이름에 그 값이 할당되는 방식으로 동작한다.

 

그 외에는 대부분 배열의 구조 분해와 비슷하게 동작한다.

---

구조 분해(객체) -  마침표(...) 활용하기

배열의 구조 분해 문법에서도 비슷하게 마지막 변수에 마침표 세 개(...)를 통해서 변수를 선언하게 되면

// 구조 분해 (Destructuring)
const macbook = {
  title: "맥북 프로",
  price: 1000000,
  memory: "16GB",
  storage: "1TB",
};

// const title = macbook.title;
// const price = macbook.price;

const { title, ...rest } = macbook;
console.log(title);
console.log(rest);

'title' 프로퍼티가 유효한 부분들은 모두 할당한 다음에

남은 프로퍼티들(price,memory,storage)을 하나의 객체로 모아서  'rest' 변수에 담긴다.

---

구조 분해(객체) - undefined와 기본값

예를 들면 아래와 같이 객체에 존재하지 않는 프로퍼티 네임으로 변수가 선언되어있으면

undefined 값이 할당한다.

// 구조 분해 (Destructuring)
const macbook = {
  title: "맥북 프로",
  price: 1000000,
  memory: "16GB",
  storage: "1TB",
};

// const title = macbook.title;
// const price = macbook.price;

// const { title, color } = macbook // 구조분해
const { title, color } = macbook; // 존재하지 않는 프로퍼티 

console.log(title);
console.log(color); // 존재하지 않는 프로퍼티

 

마찬가지로 똑같이,

undefined를 대신해 할당 연산자를 통하여 아래와 같이 기본값을 지정해 줄 수 있다.

// 구조 분해 (Destructuring)
const macbook = {
  title: "맥북 프로",
  price: 1000000,
  memory: "16GB",
  storage: "1TB",
};

// const title = macbook.title;
// const price = macbook.price;

// const { title, price } = macbook; // 구조 분해
// const { title, color } = macbook; // // 존재하지 않는 프로퍼티
const { title, color = "실버 색상" } = macbook; // 기본값 지정

console.log(title);
console.log(color);

---

구조 분해(객체) - 콜론(:) 기호 활용법

여기서, 변수 이름은 항상 프로퍼티 네임과 똑같아야 할 필요는 없다.

예를들면 title 프로퍼티를 title이라는 변수로 할당 받지않고 'priduct' 이름의 변수로 할당 받고자 할 때,

// 구조 분해 (Destructuring)
const macbook = {
  title: "맥북 프로",
  price: 1000000,
  memory: "16GB",
  storage: "1TB",
};

// const title = macbook.title;
// const price = macbook.price;

const { title: product, ...rest } = macbook; // product 새로운 변수명 선언

console.log(product); // product 새로운 변수명 선언
console.log(rest);

프로퍼티 네임에 해당하는 title 타음에 콜론(:) 기호를 쓰고 원하는 변수명으로 작성해주면

프로퍼티 네임과 다른 새로운 변수명으로 선언할 수 있게 된다.

---

새로운 이름으로 변수를 선언하는 방식이 꼭 필요한 경우가 있다.

간혹 객체 내부의 프로퍼티 네임이 아래와 같이 변수 이름으로 사용할 수 없는 경우가 있는데

const macbook = {
  title: "맥북 프로",
  price: 1000000,
  memory: "16GB",
  storage: "1TB",
  "serial-num": "ABCDEFG123",
};

이렇게 "따옴표"를 활용하면 중간에 하이픈(-)이 있어서 변수로는 사용할 수 없는 이름도

프로퍼티 네임으로는 사용할 수 있게 된다.

 

이런 경우에는 구조 분해를 할 때 아래와 같이 반드시 새로운 이름으로 변수를 선언해야한다.

// 구조 분해 (Destructuring)
const macbook = {
  title: "맥북 프로",
  price: 1000000,
  memory: "16GB",
  storage: "1TB",
  "serial-num": "ABCDEFG123",
};

const { title: product, "serial-num": serialNumber } = macbook; 

console.log(product);
console.log(serialNumber);

---

이 뿐만 아니라 새로운 이름으로 변수를 선언하는 방식은 

// 구조 분해 (Destructuring)
const macbook = {
  title: "맥북 프로",
  price: 1000000,
  memory: "16GB",
  storage: "1TB",
  "serial-num": "ABCDEFG123",
};

const propertyName = "title";
const { [propertyName]: product } = macbook;
console.log(product);

위와 같이 대괄호를 통해서 'computed' 프로퍼티 네임을 활용할 수도 있다.

 

---

구조 분해를 잘 활용하면

자바스크립트로 객체와 배열을 다룰 때 유용호게 활용되기도 하고

특히 객체를 활용한 구조 분해는 React 라이브러리에서 자주 사용되는 부분이므로

잘 숙달하는 것이 중요하다.

---

▶ Notion

https://purrfect-gargoyle-935.notion.site/Destructuring-152e9530b3e180b081d6ff8fe3ecad27?pvs=4

구조분해 (Destructuring) 배열 연습 | Notion

 

https://purrfect-gargoyle-935.notion.site/Destructuring-152e9530b3e180258e32fa2fc8a1b6cb?pvs=4

구조분해 (Destructuring) 객체 연습 | Notion