[JavaScript] 자바스크립트 구조 분해 할당(Destructuring), 객체 구조 분해 | ES6+

📖 들어가며 

내가 최근에 Vanilla JavaScript를 공부하면서 알게 된 것이 바로 자바스크립트 ES6 문법인 구조 분해 할당(Destructuring)이다.

구조 분해 할당(Destructuring) 객체 구조 분해를 이용하여 변수를 작성하게 되면, 배열이나, 객체를 이용한 변수가 간결하면서도 보기 쉽게 작성할 수 있어서 유용하다.

그래서, 이번에는 간단하게 구조 분해 할당(Destructuring), 객체 구조 분해가 무엇이고, 어떻게 사용해야 하는지 정리해보겠다.

1. 구조 분해 할당(Destructuring)이란 ❓

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

이로서 배열이나 객체를 변수에 담아낼 때 쉽게 변수에 선언할 수 있다.

2. 어떤 식으로 사용하나 ❓

객체 구조 분해에 대해서 알아 보겠다.

 

예를 들어, 아래와 같은 객체가 있다고 가정했다.

const user =  {
  name: "yong",
  age: "23",
  job: "대학생"
}

그리고, 이 객체를 호출하기 위한 함수를 정의했다.

function getUserInfo(user) {  
  retrun `이름은 ${user.name}이고 나이는 ${user.age}, 직업은 ${user.job}입니다.`;
}
console.log(getUserInfo)
//이름은 yong이고 나이는 23, 직업은 대학생입니다.

위의 함수를 보면 user.name, user.age ... 이렇게 user가 세번이 반복되는 것을 볼 수 있다.

 

여기서 구조 분해 할당(Destructuring)을 사용하게 되면 단순히 보기에 좋기만 좋게 하는 것이 아니라,

코딩을 하는 부분에서 더욱 편리하다.

 

이제 위의 객체를 이용한 함수에서 구조 분해 할당(Destructuring)을 이용하게 되면

function getUserInfo(user) {
  const { name, age, job } = user;
  retrun `이름은 ${name}이고 나이는 ${age}, 직업은 ${job}입니다.`;
}
console.log(getUserInfo)
//이름은 yong이고 나이는 23, 직업은 대학생입니다.

이런 식으로 객체의 Property를 이용해서 변수처럼 접근해서 사용이 가능하다.

 

위처럼 Property user.name 과 user.age, user.job에 저장된 값이 상응하는 변수에 할당된 것을 확인할 수 있다.

📕 마치며

간단하게 자바스크립트의 ES6 문법인 구조 분할 할당(Destructuring), 객체 구조 분해에 대해서 간단하게 정리를 해봤다.

앞으로 객체나 배열을 이용해서 변수를 선언할 때 유용하게 쓸 수 있다.

정말 간단하게 정리했는데 구조 분할 할당(Destructuring)에 대해서 더 자세하고 깊게 알고 싶다면,

아래의 문서들을 참고 해보면 좋을 것 같다.

ko.javascript.info/destructuring-assignment

구조 분해 할당

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN