JavaScript: 비구조화 할당

const object = { a: 1, b: 2 };
const { a, b } = object;
console.log(a);
console.log(b);
 
// 1
// 2

비구조화 할당 문법을 사용해서 object 객체의 a와 b를 바깥으로 꺼내어 출력해주는 코드이다.

 

const object = { a: 1, b: 2 };
 
function print({ a, b }) {
  console.log(a);
  console.log(b);
}
 
print(object);
 
// 1
// 2

함수에서도 비구조화 할당을 사용할 수 있다.

 

const object = { a: 1 };
 
function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}
 
print(object);
 
// 1
// 2

함수에서와 같은 방법으로 객체에 b가 존재하지 않을 경우에 출력을 위한 default값 설정도 가능하다.

 

const object = { a: 1 };
 
const { a, b = 2 } = object;
console.log(a);
console.log(b);

비구조화 할당을 함수에서만 사용 가능한 것은 아니다. 다음과 같이도 사용할 수 있다.

 

다음으로 비구조화 할당을 할 때 이름을 바꾸는 방법에 대해 알아보자.

 

const animal = {
  name: "멍멍이",
  type: "개",
};
 
// const nickname = animal.name;
const { name: nickname } = animal;
 
console.log(nickname);
console.log(animal);
 
// 멍멍이
// { name: '멍멍이', type: '개' }

6번 줄과 7번줄은 같은 의미이다. 하지만 이렇게 한다고 해서 기존의 animal이 바뀌는 것이 아니라는 것을

10번 줄의 출력을 보고 알 수 있다.

 

const array = [1, 2];
 
const [one, two] = array;
 
console.log(one);
console.log(two);

배열에서도 비구조화 할당을 할 수 있다. 변수 one과 two에 1, 2가 각각 들어간 것이 확인된다.

 

객체의 깊숙한 곳에 들어있는 값 꺼내기

const deepObject = {
  state: {
    information: {
      name: "velopert",
      languages: ["korean", "english", "chinese"],
    },
  },
  value: 5,
};

다음과 같은 객체에서 가장 깊숙히 있는 name, languages와 value를 꺼내는 방법을 알아보자.

 

const { name, languages } = deepObject.state.information;
const { value } = deepObject;
 
const extracted = {
  name,
  languages,
  value,
};
console.log(extracted);
 
// {
//   name: 'velopert',
//   languages: [ 'korean', 'english', 'chinese' ],
//   value: 5
// }

이는 비구조화 할당을 두 번 해서 꺼내는 방법이다.

 

const {
  state: {
    information: { name, languages },
  },
  value,
} = deepObject;
 
const extracted = {
  name,
  languages,
  value,
};
console.log(extracted);
 
// {
//   name: 'velopert',
//   languages: [ 'korean', 'english', 'chinese' ],
//   value: 5
// }

이는 비구조화 할당을 한 번 사용하는 것인데, 두 번 사용했을 때보다 더 길이도 길고, 지저분해 보인다. 

경우에 따라 두 가지 경우를 적절하게 사용하는 것이 아주 좋지만, 첫 번째 방법을 좀 더 추천한다.

 

비구조화 할당의 다양한 사례에 대해 알아보았다. 비구조화 할당을 잘 할줄 안다면 코드를 더 깔끔하게 작성하는데

도움이 된다. 쓸 수 있는 상황에서는 쓰는 것이 좋겠지만 그렇다고 과하게 사용하는 것은 좋지 않을 수 있다.