[Javascript] 구조 분해 할당(destructuring)

ES6에서 배열과 object를 조금 더 쉽게 다루는 방식이 추가됐다.

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

구조 분해 연산자, 전개 연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한 번에 처리할 수 있도록 해준다.

 

1. 객체 구조 분해 할당

아래는 객체 구조분해(destructuring)의 예시이다.

let obj = {
  name : "devlog",
  age : 1
};

let { name, age } = obj;

name과 age의 값을 확인해보면 각각 obj.name, obj.age의 값이 담긴 것을 확인해볼 수 있다.

객체를 구조분해 할 때 주의해야 할 것은 우선 할당 연산자의 왼쪽에 객체리터럴이 와야 하고,할당 연산자의 오른쪽에 오는 값이 null이나 undefined여서는 안된다는 것이다.

그리고 구조 분해를 할 때 변수를 선언만 해서는 안되고 반드시 초기자(initializer)를 해줘야 한다.

 

2. 배열 분해 할당

배열의 값을 별도의 변수에 할당하려는 경우, destructuring을 통해 간단하고 깨끗하게 할당할 수 있다.
인덱스나 루프를 사용할 필요가 없다.

const array = ['a', 'b', 'c', 'd'];
const [first, second, third, fourth] = array;

console.log(first); 	 // Outputs 'a'
console.log(second);	 // Outputs 'b'
console.log(third);		 // Outputs 'c'
console.log(fourth);	 // Outputs 'd'

위와 같이 배열의 값들을 알아서 할당해준다.

이 문법은 배열 안에 있는 원소를 다른 이름으로 새로 선언해주고 싶을 때 사용하면 매우 유용하다.

객체 비구조화 할당과 마찬가지로, 기본값 지정이 가능하다.

 

3. 깊은 값 구조 분해 할당

const deepObject = {
  state : {
    information : {
      name : 'devlog',
      category : ['js', 'algorithm', 'java']
    }
  },
  age: 1
};

위와 같은 배열이 존재할 때, name, category 값들을 밖으로 꺼내고 싶다면 어떻게 해야 할까?

첫 번째 방법은 비구조화 할당 문법을 두 번 사용하는 것이다.

const deepObject = {
  state: {
    information : {
      name : 'devlog',
      category : ['js', 'algorithm', 'java']
    }
  },
  age : 1
};

const { name, category } = deepObject.state.information;
const { age } = deepObject;

const extracted = {
  name,
  category,
  age
};

console.log(extracted); // {name: "devlog", category: Array[3], age : 1}

위에서 extracted 객체를 선언할 때 사용한 방식은 아래와 같은 의미이다.

const extracted = {
  name : name,
  category : category,
  age : age
}

이번엔 두 번째 방법, 한 번에 모두 추출하는 방법을 알아보자.

const deepObject = {
  state : {
    information : {
      name : 'devlog',
      category : ['js', 'algorithm', 'java']
    }
  },
  age : 1
};

const {
  state : {
    information : { name, category }
  },
  age
} = deepObject;

const extracted = {
  name,
  category,
  age
};

console.log(extracted);

이렇게 하면 깊숙이 안에 들어있는 값도 객체에서 바로 추출할 수 있다.