Javascript/기초

비구조화 할당(구조 분해)

appmaster 2021. 2. 1. 17:48

해당 객체의 값을 알아내고싶을때 이용합니다.

구조 분해 할당의 구문은 기존 할당문과 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의합니다.

 

 

1. 값을 나눠서 구하는 방법

const deepObject = {
    state:{
        information: {
            name: 'velopert',
            languages: ['korean', 'english', 'chinese']
        }
    },
    value: 5
};

const {name, languages} = deepObject.state.information;
const {value} = deepObject;

const extracted = {
    name,
    languages,
    value
};

console.log(extracted);
//출력값
{
  name: 'velopert',
  languages: [ 'korean', 'english', 'chinese' ],
  value: 5
}

 

 

 

2. 값을 한꺼번에 구하는 방법

const deepObject = {
    state:{
        information: {
            name: 'velopert',
            languages: ['korean', 'english', 'chinese']
        }
    },
    value: 5
};

const{
    state:{
        information:{
            name, languages
        }
    },
    value
} = deepObject;

const extracted = {
    name,
    languages,
    value
};

console.log(extracted);
//출력값
{
  name: 'velopert',
  languages: [ 'korean', 'english', 'chinese' ],
  value: 5
}