<자바스크립트> 구조 분해 할당

 

* 배열 분해

 - 개발을 하다보면 객체나 배열의 원소들을 변수로 받아야 할 상황이 있다. 이 때 유용하게 쓰이는 것이 구조 분해 할당이다.

 

 - 배열의 원소가 변수로 각각 할당되는 예시를 보자.

 

let arr = ["Harry", "Yoon"]

let [firstName, lastName] = arr;

console.log(firstName) // Harry
console.log(lastName) // Yoon

 

 - 배열의 원소가 각각 firstName과 lastName에 순서대로 할당되었음을 알 수 있다. 

 

 - 이렇게 하면 배열의 요소를 인덱스로 이용해서 하나하나 할당하는 것보다 훨씬 효율적이다.

 

 - 위의 경우 배열 대신 "Harry Yoon".split(' ') 을 넣더라도 동일하게 동작할 것이다.

 

 - 배열의 길이가 좀 더 길더라도 순서대로 할당되며, 나머지는 버려진다. 물론 배열은 파괴되지 않는다.

 

 - 쉼표를 사용하면 요소를 무시할 수 있다.

 

let [user1, ,user2] = ["Harry", "Yoon", "IU"];

console.log(user1) // Harry
console.log(user2) // IU

 

 - 위는 쉼표를 사용해서 배열의 가운데 요소를 무시한 예시이다.

 

 - 할당 연산자 우측에는 모든 이터러블이 올 수 있다. 문자열, 셋 등이 가능하다.

 

 - 할당 연산자 좌측에는 모든 할당가능한 것이 올 수 있다. 객체의 프로퍼티도 가능하다.

 

 - 구조 분해 할당은 변수 교환 트릭에서도 사용된다.

 

let admin = "Harry";
let guest = "IU";

[admin, guest] = [guest, admin];

console.log(admin // IU
console.log(guest) // Harry

 

 - 만약 배열의 길이가 너무길어서 뒷부분만 따로 특정 배열에 담고 싶다면 let [admin, guest, ...rest] 와 같이 사용하면 rest에는 첫 번째와 두 번째 원소를 제외한 나머지들이 배열로 담긴다.

 

 - 구조 분해 할당은 기본값을 별도로 설정할 수도 있다. let [admin="Harry", guest] 와 같은 방식으로 사용한다.

 

 

* 객채 분해

 - 객체 또한 구조분해 할당이 가능하다. {}(중괄호)를 사용하며, 할당연산자 우측에는 객체를 넣고 좌측에는 객체 프로퍼티의 '패턴'을 넣는다.

 

let user = {
  id: 0,
  name: "Harry",
  age: 26,
};

let {id, name} = user;

console.log(id) // 0
console.log(name) // Harry

 

 - 객체 분해 또한 =을 사용해서 기본값을 설정할 수 있다.

 

 - 객체 분해에서도 나머지 패턴인 '...'이 사용가능하다. 이 때에는 객체가 저장된다.

 

* 중첩 분해

 - 실제로 개발을 하다보면 위에서 봤던 단순한 객체나 배열이 아니라 객체와 배열이 또 다른 객체와 배열을 포함하는 등의 복잡한 상황을 마주한다. 이 때 좀 더 세밀한 패턴을 사용해서 중첩 배열과 객체의 정보를 추출하는 것을 중첩 구조 분해(nested destructuring)라고 한다.

 

let user = {
  name: {
    firstname : "Harry",
    lastname : "Yoon",
  },
  items: ["Mouse", "Keyboard"],
};

let {
  id = "Anonymous",
  name: {
    firstname,
    lastname,
  },
  items: [item1, item2],
} = user;

console.log(id); // Anonymous
console.log(firstname); // Harry
console.log(lastname); // Yoon
console.log(item1); // Mouse
console.log(item2); // Keyboard

 

 

---

 

 

 

참고

 

 

 

모던 자바스크립트 튜토리얼

모던 JavaScript 튜토리얼