(21) Modern JavaScript - 함수와 구조 분해 (Destructuring)

구조 분해는 배열과 객체를 다룰 때 활용할 수 있다고 했을 떄,

이 구조 분해 문법을 함수와 함께 활용하면서 문법을 좀 더 익혀보자.

---

함수와 구조 분해 - 배열

일단 배열부터 살펴보면 가장 간단한 상황은

아래와 같이 함수가 리턴하는 값이 배열일 때 그 리턴 값을 활용하는 것이다.

// 구조 분해 (Destructuring)
function getArray() {
  return ["컴퓨터", "냉장고", "세탁기"];
}

const [el1, el2, el3] = getArray();
console.log(el1);
console.log(el2);
console.log(el3);

그렇게 컴퓨터 는 el1로, 냉장고는 el2, 세탁기는 el3으로

배열의 요소들이 하나씩 순서대로 전달이 되므로 아래와 같은 결과를 얻을 수 있다.

---

또다른 상황을 보자면..

레스트 파라미터가 배열이라는 점을 가지고 아래와 같이 구조 분해 문법을 활용할 수 있다.

function printWinners(...arg) {
  const [macbook, ipad, airpods, ...coupon] = arg;

  console.log(`맥북 당첨자: ${macbook}`);
  console.log(`아이패드 당첨자: ${ipad}`);
  console.log(`에어팟 당첨자: ${airpods}`);
  console.log(`무신사 쿠폰 당첨자는 다음과 같습니다.`);

  for (let user of coupon) {
    console.log(`${user}`);
  }
  console.log(`쿠폰 수령 인원: ${coupon.length} 명`);
}

printWinners("행섭", "양천", "힝카인", "스기따라", "찌듕", "넌적혈구");

 

위 코드를 응용하여 다음과 같이 파라미터 부분에서 구조분해 문법을 바로 활용할 수도 있다.

// function printWinners(...arg) {
function printWinners([macbook, ipad, airpods, ...coupon]) {
  // const [macbook, ipad, airpods, ...coupon] = arg;

  console.log(`맥북 당첨자: ${macbook}`);
  console.log(`아이패드 당첨자: ${ipad}`);
  console.log(`에어팟 당첨자: ${airpods}`);
  console.log(`무신사 쿠폰 당첨자는 다음과 같습니다.`);

  for (let user of coupon) {
    console.log(`${user}`);
  }
  console.log(`쿠폰 수령 인원: ${coupon.length} 명`);
}

// printWinners("행섭", "양천", "힝카인", "스기따라", "찌듕", "넌적혈구");
const rank = ["행섭", "양천", "힝카인", "스기따라", "찌듕", "넌적혈구"];
printWinners(rank);

printWinners에는 여러 개의 아규먼트를 전달 받는 함수가 아니라

배열 하나를 아규먼트로 전달 받는 함수로도 구현이 가능해진다.

변수를 선언하던 부분이 그냥 파라미터로 바뀐 것 뿐이지

코드를 잘 살펴보면 여러 개의 파라미터를 대괄호로 묶어주고 그 배열을 할당하였다.

---

함수와 구조 분해 - 객체

객체도 배열과 마찬가지로 아래와 같이 함수가 객체를 리턴한다면 

자연스럽게 구조 분해 문법을 활용할 수 있다.

// 구조 분해 (Destructuring) - 객체
function getObject() {
  return {
    name: "SeopE",
    birth: 2024,
    job: "백수",
  };
}

const { name: brand, birth, job } = getObject();
console.log(brand);
console.log(birth);
console.log(job);

그런데 객체를 리턴하는 함수보다는

파라미터를 객체의 형태로 작성한 함수에서 좀 더 유용하게 활용된다.

아래 코드를 살펴보면

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

function printSummary(object) {
  const { title, price, memory } = object;
  // console.log(`상품명: ${object.title}`);
  // console.log(`가격: ${object.price} 원`);
  // console.log(`옹량: ${object.memory}`);
  console.log(`상품명: ${title}`);
  console.log(`가격: ${price} 원`);
  console.log(`옹량: ${memory}`);
}

printSummary(macbook);

함수 내부에서 객체가 가지고 있는 항목들인 프로퍼티들을 활용할 때

매번 객체에 접근(object.property) 하는 것이 아니라

위와 같이 구조 분해 문법을 활용 하여 프로퍼티들을 좀 더 간결하게 (object.property) 사용할 수 있다.

 

만약 함수 내에서의 프로퍼티들만 사용할 거라면

아래와 같이 파라미터 부분에서 바로 구조 분해 문법을 활용할 수도있다.

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

function printSummary({ title, price, memory }) {
  // const { title, price, memory } = object;
  // console.log(`상품명: ${object.title}`);
  // console.log(`가격: ${object.price} 원`);
  // console.log(`옹량: ${object.memory}`);
  console.log(`상품명: ${title}`);
  console.log(`가격: ${price} 원`);
  console.log(`옹량: ${memory}`);
}
printSummary(macbook);

---

 

이렇게 함수와 같이 활용할 수있는 구조 분해 문법을 봤는데

특히 파라미터 부분에서 객체를 분해하는 방식은

나중에 자바스크립트 기반으로한 라이브러리나 프레임워크에서도 자주 활용되므로 잘 숙지하고있어야한다.