객체 구조분해 할당

구조 분해 할당

 

 

1. 구조분해 할당(Destructuring Assignment)

const [left, right] = [1, 2];
const { data } = { data: [0, 1, 2, 3] }

console.log(left);  // 1
console.log(data);  // [0, 1, 2, 3]

배열, 객체 구조분해 할당의 기본적인 사용법은 위와 같음.

 

 

 

2. 원하는 속성을 다른 변수명으로 지정하기

const obj = {
    data: {
        id: 1,
        title: "제목",
        date: "2022-08-01"
    }
}

const { data: entry } = obj;

console.log(data);  // Uncaught ReferenceError: data is not defined
console.log(entry);  // { id: 1, ... }

객체 구조분해 할당을 사용해 객체 obj의 data 속성을 변수 data로 할당해줄 수 있음. 하지만, 속성명과 동일한 변수명을 쓰지 않고 내가 원하는 변수명을 지정해줄 수는 없을까? 배열은 그 자체로 내가 원하는 변수명을 지정해줄 수 있지만 객체는 그렇게는 할 수 없음. { 속성명: 새 변수명 } 형태로 구조분해 할당을 하면 가능함. 객체의 속성명과 동일한 변수가 이미 존재할 때, 해당 변수명을 수정하지 않고 이 방법을 쓰면 좋음.

 

※ Typescript에서 객체의 타입을 { data: Array<string>, others: Array<number> }처럼 정의해줄 수 없는 이유가 이것 때문!

 

 

 

3. 다차원 객체의 구조분해 할당

다차원 객체의 구조분해도 동일한 방식으로 가능하지만 변수로 할당할 속성의 상위 속성명은 반드시 명시해줘야 함.

const data = {
    repository: {
        discussions: {
            nodes: [{...}, {...}, {...}]
        }
    }
}

구조분해 할당을 할 객체가 위와 같은 형태일 때, discussions 속성을 분해해서 가져오고 싶다면, 아래와 같이 구조분해 할당을 사용해야 함.

❌
const { { discussions } } = data;

✅
const { repository: { discussions }} = data;

첫번째가 안 되는 것은 객체 data 안의 { discussions }가 어떤 속성의 값인지 정해지지 않았기 때문. 한편, 두번째에서 repository는 내부 속성명이기 때문에 discussions 변수만 정의되고, repository는 정의되지 않은 상태임에 주의!

console.log(repository);  // Uncaught ReferenceError: repository is not defined
console.log(discussions);  // { nodes: [...] }

 

 

 

 

 

 

[참고]

How to Destructure Nested JavaScript Objects