[JS] 객체 구조 분해 할당 (Object Destructuring)

요즘은 벌레잡기 게임 클론 코딩을 하고 있다. 

변수에 중괄호({ })가 나와서 찾아본 것을 공부해보자! 

---

 

말이 딱딱하고 어렵다! 

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

여기서 객체 구조 분해할당(Object Destructuring) 은 객체의 값을 변수에 담을 수 있다. 

객체에서 여러개를 접근할때 하나씩 꺼내기가 귀찮으니까 중괄호를 사용해서 한꺼번에 접근한다.

이 표현식은 ES6버전에 새로 추가된 기능이라고 한다. 

 

예시를 살펴보자! 

const user = {
  email: "harvey@mail.com",
  password: "dIkNGkdoPH",
  firstName: "Harvey",
  lastName: "Milk",
  born: 1930,
  died: 1978,
  bio: "Harvey Bernard Milk was an American politician and the first open....",
  city: "Sanfransico",
  state: "California",
};

//아래와 같이 하나씩 접근해야 한다. 
const firstName = user.firstName;
const lastName = user.lastName;
const email = user.email;

//아래와 같이 한꺼번에 변수를 만들수 있다. 
const { email, firstName, lastName, city, bio } = user;

🔸 여기서 순서는 상관없고 이름이 중요하다.

 

 

 

---

이 값을 객체에서 꺼낼 수도 있지만,

📌새 이름도 지을 수 있다. 

형식은 '기존 이름 + 콜론(:) + 새 이름'으로 입력하면 된다. 

//born의 이름을 birthYear로, died이름을 deathYear로 다음과 같이 바꿀 수 있다. 
const { born: birthYear, died: deathYear } = user;

//콘솔창에 결과값은 born을 넣으면 나오지 않고 birthYear를 넣어야 제대로 나온다.

 

 

---

📌디폴트 값을 추가할 수도 있다. 

const user2 = {
  email: 'stacy@mail.com',
  firstName: 'Stacy',
  lastName: 'Gonzalez',
  born: 1987, 
  city: 'Tulsa',
  state: 'Oklahoma'
}

//위의 예시는 died가 없다. 
//값이 없을때 N/A라고 출력하고 싶을때 아래와 같이 지정한다. 
const { city, state, died = 'N/A' } = user2;

🔸 값이 있는데 디폴트값을 지정하면 N/A가 뜨지 않는다.