[JavaScript-57] 객체 구조분해

이번엔 배열에 이어 객체를 구조분해 해봅시다!

바로 코드로 보시죠

const myCar = {
    brand: 'benz',
    model: 'E220',
    'purchase-year': 2023
    };

//구조분해
const {brand, model} = myCar;
console.log(brand); //benz
console.log(model); //E220

자, 우선 배열과의 차이점은, 

대괄호가 아닌 중괄호를 사용한다는 점이네요!

또, 중괄호 속에 들어가는 변수의 이름은 배열과 달리 객체에 존재하는 이름이어야 합니다!

 

배열에서는, 저희가 원하는 이름을 아무렇게나 사용했다면,

객체에서는 프로퍼티 이름을 적어줘야 합니다.

이건 정해진 약속입니다. 

 

{프로퍼티 네임} = 값을 가져올 객체 이름;

 

이렇게 적어주면, 중괄호 속의 프로퍼티 네임이 객체 안에 실제로 있으면 그 프로퍼티의 프로퍼티 밸류를 가져오는 것이죠.

만약, 객체에 없는 프로퍼티 이름을 적는다면, undefined가 나오니까, 

객체는 배열과 달리 반드시 존재하는 프로퍼티 이름을 적어줘야겠죠?

 

자 그런데, 한 가지 주의할 사항이 있습니다.

const myCar = {
    brand: 'benz',
    model: 'E220',
    'purchase-year': 2023
    };

//구조분해
const {'purchase-year': purchase} = myCar;
console.log(purchase); //2023

purchase-year프로퍼티 같은 경우, 프로퍼티 네임에 하이픈이 있어서 변수 이름 규칙에 어긋나기에,

구조분해를 할 때에 중괄호 속에 그대로 써줄 수 없습니다. 

그래서, 원래 이름을 써주고 콜론을 찍어준 뒤에 새로운 변수 이름을 적어주면 됩니다. 

 

위의 코드에서는 purchase로 이름을 바꿨죠?

그럼, myCar객체의 'purchase-year'프로퍼티의 값은, purchase라는 값에 구조분해 되었으니,

이 값에 접근하려면 purchase변수에 접근해야 하겠죠?!

 

마지막으로, 객체 역시 rest파라미터의 기능을 활용할 수 있는데요,

이때는 변수 이름을 마음껏 정하셔도 무방합니다. 

코드로 보시죠.

const myCar = {
    brand: 'benz',
    model: 'E220',
    'purchase-year': 2023
    };

//구조분해
const {brand, ...rest} = myCar;

이렇게, 점 세 개를 찍어주면, brand를 제외한 나머지 프로퍼티들이 모두 rest라는 변수에 들어가게 됩니다.