[JavaScript]Object Destructuring(구조분해 할당)

공부 중 모르는 JavaScript 문법이나와 정리하여 한다.

---

구조분해 할당(Object Destructuring)

말 그대로 오브젝트를 분해하여 변수로 할당하는 방법이다. 

하나의 문법으로 변수할당이 매우 간결해 지기 때문에 꼭 정리해 두자

---

예시 Object

obj라는 임시 오브젝트를 선언하고 각각의 값을 변수로 할당하려한다. 

내가 아는 지식으론 아래코드와 같이 변수를 할당 해야 한다. 

  const obj = {
    id: 1,
    name: '트니',
    age: 9,
  }

  const id = obj.id;
  const name = obj.name;
  const age = obj.age;
  console.log(id, name, age);

출력값

---

구조분해할당 적용코드

구조분해할당 문법을 적용하면 아래와 같이 축약할 수 있다. 

  const obj = {
    id: 1,
    name: '트니',
    age: 9,
  }
  
  const { id, name, age } = obj;
  console.log(id, name, age);

출력값

---

Arr에도 적용 가능

  const arr = [1, '트니', 9];

  const [id, name, age] = arr;

  console.log(id, name, age)

출력값

 

---

주의사항

arr는 변수명을 자유롭게 입력 할 수 있지만 오브젝트를 다룰때는 키값과 동일한 변수명을 사용해야 한다.