Destructuring(ES6)

Destructuring | 구조분해할당

Destructuring은 배열이나 객체의 구조(속성)을 분해(해체)하여 그 값을 변수에 담을 수 있게 하는 ES6 문법이다.

---

const x = [1, 2, 3, 4, 5];
console.log(x[1]);// 2

구조 분해 할당의 구문은 위와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해하여 할당할지 정의한다.

const x = [1, 2, 3, 4, 5];
const [a, b] = x;
console.log(a); // 1
console.log(b); // 2

---

Destucturing 을 사용하는 경우

Destructuring은 Array(배열) Destructuring와 Object(객체) Destructuring으로 나누어져있다.

• 배열에 사용하는 경우

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

• 객체에 사용하는 경우

const player = {
  name: "yoonchan",
  club: "krb",
  address: {
    city: "busan"
  }
};

const {
  name,
  club,
  address: { city }
} = player;
console.log(city);// busan

---

구조 분해 할당을 사용하는 이유

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료형이다.

• 객체 사용 : key를 가진 데이터 여러 개를 하나로 묶어서 저장할 때
  (= 하나의 엔티티 로 저장해야 할 때 객체를 사용된다)

• 배열 사용 : 컬렉션 에 데이터를 순서대로 저장할 때

• 함수에 객체나 배열에 저장된 데이터 전체가 아닌, 일부만 전달할 때
• 함수의 매개변수가 많을 때
• 매개변수의 기본값이 필요한 경우에도 사용할 수 있다.

• And... 코드의 길이를 줄여준다.

---

결론

Destructuring(구조분해할당)은 자료를 더욱 효과적으로 관리할 수 있도록 해준다.