📖 [JS] 구조 분해 할당

 

 

자바스크립트에서 구조 분해 할당이란 배열이나 객체에 저장된 여러 개의 값들을

말 그대로 분해해서 각각 다른 변수에 할당하는 문법을 말합니다.

 

 

---

 

 

배열의 구조 분해 할당

 

let arr = [1, 2, 3];

let one = arr[0];
let two = arr[1];
let three = arr[2];

------------------------------
const arr = [1, 2, 3];

// 기본 배열 구조 분해 할당
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// 일부 요소만 할당
const [x, y] = arr;
console.log(x); // 1
console.log(y); // 2

// 나머지 요소 모으기
const [first, ...rest] = arr;
console.log(first); // 1
console.log(rest); // [2, 3]

 

 

배열의 요소를 각각 변수에 할당해 주는 건, 배열의 이름을 각각 매번 적어줘야 하기 때문에 불편함을 느낄 수 있다.

 

// 배열의 구조 분해 할당

let arr = [1, 2, 3];

let [one, two, three] = arr;

 

 

위와 같은 방법으로 배열을 표현하듯이 대괄호 안에 3개의 변수를 동시에 선언하고 초기값으로 arr 배열을 넣어주면 된다.

이렇게 선언하면 arr 배열에 있는 원소들이 각각 순서대로 one = 1, two = 2, three = 3 변수에 각각 할당이 된다.

 

---

 

 

객체의 구조 분해 할당

 

let person = {
    name: "ser"
    age: 26,
    hobby: "game",
}

let {name, age, hobby} = person;
----------------------------------

const obj = { name: "Alice", age: 25, city: "Wonderland" };

// 기본 객체 구조 분해 할당
const { name, age, city } = obj;
console.log(name); // Alice
console.log(age); // 25
console.log(city); // Wonderland

// 다른 변수 이름으로 할당
const { name: personName, age: personAge } = obj;
console.log(personName); // Alice
console.log(personAge); // 25

// 기본값 설정
const { country = "Unknown" } = obj;
console.log(country); // Unknown

 

 

person이라는 객체를 저장하는 변수가 있다 또는 객체가 있다고 할 때

이 객체 안에 있는 객체 속성 property를 일일이 다 변수에 할당해주려면

name은 person.name, age은 person.age, hobby은 person.hobby << 이런 식으로 일일이 다 했었어야 했지만,

객체 구조분해 할당은 배열의 구조 분해 할당과는 다르게 {}를 사용해서 할당할 수 있습니다.

 

---

 

중첩 구조 분해 할당

 

const nestedObj = {
  person: {
    name: "Bob",
    address: {
      city: "Builderland",
      zip: "12345"
    }
  }
};

const { person: { name, address: { city, zip } } } = nestedObj;
console.log(name); // Bob
console.log(city); // Builderland
console.log(zip); // 12345

const nestedArr = [1, [2, 3], 4];
const [first, [second, third], fourth] = nestedArr;
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
console.log(fourth); // 4

 

---

 

객체 구조 분해 할당을 이용해서 함수의 매개 변수를 받는 방법

 

const func = (person) => {
	person.name;
    person.age....
}

// 위와 같은 방법 대신에

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

func(person)

 

이때 한 가지 주의해야 할 점은

객체를 넘겼을 때만 중괄호와 함께 구조분해 할당을 받을 수 있다는 것이다.

 

func(person)처럼 person이라는 객체를 넘겼기 때문에 구조 분해 할당이 가능한 것이고 만약에 일반적인 값인

func(10)을 넘겼으면 당연히 구조분해할당은 이루어지지 않습니다.