[JS] 비구조화 할당(구조분해할당) 쓰는 이유와 사용 방법

 
자바스크립트 비구조화 할당(Object Destructuring Assignment)에 대해 알아보겠습니다
 
다른 언어에도 이와 비슷한 문법은 있습니다
다른 언어에서는 '구조분해 할당(Structuring/Pattern Matching/Destructuring Assignment)' 이라고 부르는데, 둘 다 같은 문법과 기능이며
자바스크립트에서만 특별히 비구조화 할당이라고 부릅니다
 

비구조화 할당을 쓰지 않고 코딩하기

우선 비구조화할당을 사용하지 않고 코딩을 해보겠습니다
다음과 같은 사용자의 이름, 키, 국적을 저장하는 객체가 있다고 가정해봅시다

const user = {
  name: 'clice',
  height: 183,
  country: 'Korea'
};

 
그런다음 사용자의 이름, 키, 국적을 출력하려면 다음과 같이 코드를 입력할것입니다

console.log(person.name); // clice
console.log(person.height); // 183
console.log(person.country); // Korea

 
그런데 앞에 person이 중복되는데 계속해서 객체에 접근할때마다 person.을 입력하는것이 귀찮을 때가 있습니다
항상 개발자는 조금 더 간결하고 조금 더 편한 코드로 바꿀 수 없는지 생각해야 합니다
 
이를 해결하기 위해 es6문법에서 비구조화할당이 등장했습니다
 

객체에서 비구조화 할당 사용하기

객체에서 사용 방법은 다음과 같습니다

const { name , height , country } = person;

 
그러면 사용자의 이름, 키, 국적을 출력할때 person. 을 입력하지 않고도 바로 출력할 수 있습니다. 다음과 같이 말이에요

console.log(name); // clice
console.log(height); // 183
console.log(country); // Korea

 
물론 변수 이름도 할당할 때 변경할 수 있습니다

const { name: personName, height: personHeight, country: personCountry } = person;

console.log(personName); // clice
console.log(personHeight); // 183
console.log(personCountry); //  Korea

 
 
객체뿐만 아니라 배열, 함수에서도 사용할 수 있는데 이건 제가 더 공부하고 곧 추가하겠습니다
 
 

배열에서 비구조화 할당 사용하기

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

 

함수에서 비구조화 할당 사용하기

function printInfo({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const person = { name: 'John', age: 30 };
printInfo(person); // Name: John, Age: 30

 
 
이상으로 자바스크립트 비구조화 할당에 대해 자세히 알아보았습니다. 
비구조화 할당은 코드 작성을 더 편리하게 만들어 주는 강력한 기능이므로, 자바스크립트를 배우는 분들께 꼭 익혀두시길 추천드립니다. 
 
궁금한 점이 더 있다면 언제든 질문해 주세요!
 
ⓒ clicelee clice의 개발일지 입니다