5. 디스럭처링 할당(구조 분해 할당)

1. 디스럭처링 할당(destructuring assignment) 이란

1) 디스럭처링 뜻

var arr = [1, 2, 3];

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

console.log(one, two, three);// 1 2 3

배열은 구조화되었다고 한다. 디스럭처링 할당은 다른 말로 구조 분해 할당인데 구조화된 배열을 비구조화하여 각 요소를 변수에 개별적으로 할당하는 방법을 말한다. 

아래 코드를 보면

 

var arr =[1, 2, 3]

const [one, two, three] = arr;
console.log(one, two, three) // 1 2 3

구조화된 배열을 구조 분해 할당 기법을 통해 개별 요소를 각 변수에 할당하는 비구조화 구조를 나타낸 것이다. 

 

● 구조 분해 할당의 일반화 코드

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

 

2) 추가 내용

배열 디스럭처링 할당의 기준은 배열의 인덱스이다. 배열의 인덱스 순서로 구조 분해 문법에서 각 변수에 할당되며 배열의 모든 index가 할당될 필요는 없다.

const [p, q] = [1];
console.log(p); //1
console.log(q); //undefined

 

 

2. 객체 디스럭처링 할당

객체를 선언하고 객체의 프로퍼티를 객체로부터 디스럭처링(구조분해)하여 각 변수에 저장하기 위해서는 프로퍼티 키를 사용해야한다.  (Js 객체의 key-value는 변수명-값 과 유사한 느낌)

 

객체 디스럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 변수에 할당하는데 선언된 변수 이름과 프로퍼티 키가 일차하기만 하면 된다.

=> 필요한 프로퍼티만 추출하며 된고 변수의 순서는 상관이 없다. 

 

아래 코드는 구조 분해 할당을 하지 않고 객체의 프로퍼티에 접근하기 위한 방법으로 일반적인 방법이다.

이때 React에서 state에 접근하는 구조와 같음을 알 수 있다. 

var person = {
  name = 'Kim', 
  age = '22',
  address = 'korea',
}

var name = person.name;
var age = person.age;
var address = person.address;


/*--------------------------------------*/
//React에서 state 
class PersonComponent {
  state = {
      name = 'Kim', 
      age = '22',
      address = 'korea',
  }
  
  getInfor = () => {
    var name = this.state.name;
    var age = this.state.age;
    var address = this.state.address;
  }
}

 

 

아래 코드는 위 코드를 구조 분해 할당하여 변경한 코드 예시이다.

아래 코드와 같이 객체의 구조분해를 사용하면 class 에서 기존에 state의 프로퍼티로 접근하려면 this.staet를 계속 붙여줘야했는데 이것을 계속 쓰는 번거로움을 덜 수 있게 된다. 

var person = {
  name = 'Kim', 
  age = '22',
  address = 'korea',
}

const {name, age, address} = person

var name = name;
var age = age;
var address = address;


/*--------------------------------------*/
//React에서 state 
class PersonComponent {
  state = {
      name = 'Kim', 
      age = '22',
      address = 'korea',
  }
 
  getInfor = () => {
    const {name, age, address} = this.person
    var name = name;
    var age = age;
    var address = address;
  }
}

 

※ 배열의 구조 분해 할당은 변수들을 대괄호에 지정하고 객체의 프로퍼티의 구조분해 변수들은 {} 중괄에 지정한다.