구조 분할 할당 (Destructuring assignment)

최근에 자바스크립트를 보다가 이게 뭐지 라고 생각하는 것이 있어서 간단히 예제를 찾아서 공유한다.

영어로는 destructuring assignment라고 부르는데 ES6에 나온 문법이라고 한다.

아래 예제를 보면 어떻게 사용해야 하는지 너무 이해하기 쉽다.  심지어 이렇게 좋은게 있었다니... 라는 생각조차 들었다.

 

예전같으면 object 내부의 property를 가져오기 위해 obj.a obj.b obj.c 이런씩으로 매번 써야했지만, 이 방식을 이용하면 const를 이용해서 변할수 없는 값으로 할당가능하기 때문에 코드가 너무 이뻐진다.

 

기억하자! :)

 

const obj = {
  name: "Fred",
  age: 42,
  id: 1
}

//simple destructuring
const { name } = obj;
console.log("name", name);

//assigning multiple variables at one time
const { age, id } = obj;
console.log("age", age);
console.log("id", id);

//using different names for the properties
const { name: personName } = obj;
console.log("personName", personName);