구조 분해 할당(Destructuring assignment)

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

 

객체의 경우

중괄호 안에 변수명을 넣고 분해할 객체를 지정해 주면 된다.

 

const {name, age}는 객체의 키 값이기 때문에 {age, name} 이렇게 순서를 변경하여도 결과는 같다.

객체는 순서가 중요하지 않다!

const person = {name : 'jiji', age: 11};

const {name, age} = person;
console.log(name) //jiji
console.log(age) //11

 

 

만약 변수명을 키의 이름과 다르게 변경하고 싶다면 아래와 같이 키 값 : 새로운 변수명 과 같이 작성해 주면 된다.

const person = {name : 'jiji', age: 11};

const {name : name22, age : age22} = person;
console.log(name22) //jiji
console.log(age22) //11

 

 

중첩 객체의 경우

아래와 같은 중첩 객체가 있다고 할 때,

const person = {
    name : 'jiji',
    age : '11',
    info : {
        food : '김치볶음밥',
        color : 'blue'
    }
}

 

구조 분해 할당한 부분에서 한 번 더 구조 분해 할당을 하면 중첩 객체도 분해할 수 있다.

const {name, age, info:{food, color}} = person
console.log(`${name}님이 좋아하는 음식은 ${food}입니다.`) //jiji님이 좋아하는 음식은 김치볶음밥입니다.

배열의 경우

객체와 다른 점은 대괄호를 사용하고, 대괄호 안에 변수명의 순서가 중요하다는 점이다.

const person = ['jin', 'james', 'jun']

const [name1, name2] = person;
console.log(name2) //james

 

2번째 변수인 name2를 출력하면 james가 출력되는 것을 볼 수 있다.

 

만약 첫 번째와 두 번째 값이 필요하지 않다면 생략하고 할당할 수 있다.

const [, , name3] = person

console.log(name3) //jun