[JavaScript 심화] 구조 분해 할당

구조 분해 할당은 배열이나 객체의 값을 손쉽게 변수로 꺼내는 문법임
배열의 인덱스나 객체의 키를 하나씩 접근할 필요 없이,
필요한 값만 직접 변수에 담을 수 있음

---

1. 배열의 구조 분해 할당

let arr = [1, 2, 3];

let [one, two, three, four /* = 4 */] = arr;
console.log(one, two, three, four); // 1 2 3 undefined(4)

설명

• 배열의 인덱스에 따라 변수의 값이 할당됨
• 대응되는 값이 없으면 `undefined`가 됨
• `=`를 사용해 기본값을 줄 수 있음

let [a, b, c =10] = [1, 2];
console.log(a, b, c); // 1 2 10

---

2. 객체의 구조 분해 할당

let person = {
  name: "도서",
  age: 28,
  hobby: "게임",
};

let {
  name,
  age, // age: myAge 도 가능!
  hobby,
  extra /* = "hello" */,
} = person;

console.log(name, age, hobby, extra); // 도서 28 게임 undefined (hello)

설명

• 객체의 key 이름과 동일한 변수명을 지정하면 자동으로 할당됨
• key 이름을 바꾸고 싶으면 `key: 새이름` 형태로 사용하면됨
• 없는 key는 `undefined`, 또는 기본값을 줄 수 있음

let { age: myAge, hobby: myHobby = "독서" } = person;
console.log(myAge, myHobby); // 28 "게임"

---

3. 함수 매개변수에서 구조 분해 사용하기

const func = ({ name, age, hobby, extra }) => {
  console.log(name, age, hobby, extra);
};

func(person); // 도서 28 게임 undefined

설명

• 매개변수에서 구조 분해를 바로 사용하면 객체를 통째로 전달받되, 내부 속성만 간편하게 꺼낼 수 있음
• API응답, `props`, `option` 객체 등에서 자주 쓰임

const showUser = ({ name, age }) => {
  console.log(`${name}(${age})님 안녕하세요!`);
};
showUser({ name: "도서", age: 28 });

---

 

구문	문법	특징
배열 구조 분해	`[a, b, c] = arr`	순서(index) 기준
객체 구조 분해	`{name, age} = obj`	key 이름 기준
기본값 설정	`a = 0`	값이 없을 때 대체 사용
변수명 변경	`age: myAge`	key와 변수명을 다르게 지정
함수 매개변수	`({ name, age })`	전달받은 객체 내부 값 바로 추출