구조 분해 할당(Destructuring Assignment) - 객체, 중첩구조 편

 

이전 포스팅에서는 구조 분해 할당에서도 배열을 분해하는 방법에 대해서 알아보았다. 이번 포스팅에서는 객체를 분해하는 방법과 중첩 구조를 분해하는 방법, 그리고 기타 내용들에 대해서 다뤄보고자 한다.

 

구조 분해 할당(Destructuring Assignment)

객체 분해하기

구조 분해 할당 기법을 통해서 객체 역시도 분해가 가능하다. 아래 코드를 통해 기본 문법을 확인해보자.

let {v1, v2} = {v1:..., v2:...}

할당 연산자 우측엔 분해하고자 하는 객체가 있으며 좌측엔 상응하는 객체 프로퍼티의 Patter을 넣는다. 말이 어려울 수 있으니 아래 예제 코드를 통해 조금 더 쉽게 알아보도록 하자.

let book = {
    'title': '디자인패턴',
    'author': 'GoF',
    'price': 50000
};

let {title, author, price} = book;

console.log(title)  // 디자인패턴
console.log(author) // GoF
console.log(price)  // 50000

book객체의 프로퍼티에 저장된 값이 상응하는 변수에 할당된 것을 볼 수 있다. 참고로 순서는 중요하지 않다. 아래의 코드처럼 작성해도 동일하게 작동한다.

let {author, price, title} = {'title': '디자인패턴','author': 'GoF','price': 50000};

console.log(title)  // 디자인패턴
console.log(author) // GoF
console.log(price)  // 50000

 

콜론(:)을 통한 프로퍼티 Key값 설정

할당 연산자 좌측엔 좀 더 복잡한 패턴이 올 수 있다. 콜론(:)을 활용하여 객체 프로퍼티를 Key:변수의 형태로 저장하는 방법이다. 아래 코드를 보면 무슨 이야기인지 쉽게 이해 될 것이다.

let book = {
    'title': '디자인패턴',
    'author': 'GoF',
    'price': 50000
};

let {title:t, author:a, price:p} = book;

console.log(t) // 디자인패턴
console.log(a) // GoF
console.log(p) // 50000

 

기본값 (Default)

배열을 분해할 때 살펴봤던 Default값을 세팅하는 것 역시 객체 분해에서도 아래 코드의 형태로 사용 가능하다. 마찬가지로 함수 표현식을 기본 값으로 할당할 수도 있으며, 위에서 언급한 콜론을 활용할 수도 있다.

let book = {
    title: '디자인패턴'
}

let {author = prompt("author?"), price:p = 50000, title } = book;

console.log(title)  // 디자인패턴
console.log(p)  // 50000
console.log(author) // prompt에서 입력받은 값

 

나머지 패턴 '...'

분해하려는 객체의 프로퍼티 개수가 할당하려는 변수의 개수보다 많을땐, '나머지 패턴'을 활용하여 나머지를 어딘가에 할당하면 된다.

참고로 모던 브라우저는 나머지 패턴을 지원하지만, IE를 비롯한 몇몇 구식 브라우저는 나머지패턴을 지원하지 않으므로 주의해서 사용해야 한다. (물론 바벨을 사용하면 해결할 수 있는 문제이다).

아래 코드를 살펴보자.

let book = {
    'title': '디자인패턴',
    'author': 'GoF',
    'price': 50000
};

let {title, ...rest} = book;

console.log(title)  // 디자인패턴
console.log(rest.author) // GoF
console.log(rest.price)  // 50000

 

let 없이 사용하기

우선 아래의 잘못된 코드를 살펴보자.

let title, author, price;
{title, author, price} = {title:'디자인패턴', author:'GoF', price:50000}

// SyntaxError: Unexpected token '='

자바스크립트는 표현식 안에 있지 않으면서 주요 코드 흐름상에 있는 { } 중괄호 사이의 코드를 코드 블록으로 인싱한다. 코드 블록의 본래 용도는 statement를 묶는 역할이다. 위의 예시에서는 구조 분해 할등을 위해 사용한 { } 중괄호를 자바스크립트가 코드 블록으로 인식해서 에러가 발생했다. 이를 해결하기 위해선 할당문을 괄호로 감싸 자바스크립트가 { } 중괄호를 코드 블록이 아닌 표현식으로 해석하면 된다.

let title, author, price;
({title, author, price} = {title:'디자인패턴', author:'GoF', price:50000});

// SyntaxError: Unexpected token '='

 

중첩 구조 분해 (Nested Destructuring)

개발을 하다보면 객체 또는 배열이 다른 객체나 배열을 포함하는 경우를 심심찮게 볼 수 있다. 이런 경우 좀 더 복잡한 패턴을 활용한다면 중첩 배열이나 객체의 정보를 추출할 수 있는데, 이를 중첩 구조 분해(nested destructuring)이라고 한다.

let book = {
  info: {
    title: "디자인패턴",
    author: "GoF",
    price: 50000,
  },
  store: ["교보문고", "영풍문고"],
  isUsed: true,
};

let {
  info: { 
    title, 
    author, 
    price 
  },
  store: [store1, store2],
  isUsed,
  pages = 1000
} = book;

console.log(info)   // ReferenceError: info is not defined
console.log(title)  // 디자인패턴
console.log(author) // GoF
console.log(price)  // 50000
console.log(store)  // null
console.log(store1) // 교보문고
console.log(store2) // 영풍문고
console.log(isUsed) // true
console.log(pages)  // 1000

console.log의 결과 값을 통해 알수 있듯이, info나 store 전용 변수는 없으며, 전용 변수 대신 info와 store안의 정보를 변수에 할당함을 유의하도록 하자.

 

구조 분해를 매개변수에 활용하기

함수에는 종종 많은 매개변수를 포함할 때가 있는데, 이를 전부 사용하는 것이 아니라 상황에 따라 선택적으로 쓰이는 경우가 많다. 이를 구조 분해를 사용하여 조금 더 쉽게 활용하는 방법을 알아보도록 하자.

// Before Refactoring
function getBookInfo(title='', author='', price=10000, store=[]) {}

// excute fuction
getBookInfo('디자인패턴', undefined, undefined, ['영풍문고', '교보문고'])

위의 코드는 리팩토링 전의 함수와 그를 실행하는 구문이다. 이렇게 함수를 작성하면 인수의 순서가 정확하게 맞아 떨어져야 한다. 또한 기본값이 설정되어 있어 굳이 인수를 넘겨주지 않아도 되는 경우 문제가 발생한다.

 

구조 분해를 활용하면 이를 좀 더 스마트하고 깔끔하게 표현할 수 있다. 아래의 코드를 살펴보자.

let params = {
    title: '디자인패턴',
    store: ['영풍문고', '교보문고']
}

function getBookInfo({
    title = 'Untitled', 
    author = 'Unknown', 
    price:p = 10000, 
    store = [store1, store2]
}) {
    ...
    // title과 store는 객체 params에서 가져옴
    // author와 price는 기본값을 사용함.
}

getBookInfo(params)

조금 더 깔끔하고 유연하며 확장성 있게 활용할 수 있다.

 

참고로 함수 매개변수를 구조분해할 땐, 반드시 인수가 전달된다고 가정하고 사용된다는 점에 유의해야 한다. 모든 인수에 기본값을 할당해주려면 빈 객체를 명시적으로 전달해야 한다.

function getBookInfo({
    title = 'Untitled', 
    author = 'Unknown', 
    price:p = 10000, 
    store = [store1, store2]
}) {
    ...
}

getBookInfo({}) // 모든 인수에 기본값 할당
getBookInfo()   // 에러가 발생할 수 있음

위의 상황처럼 에러가 발생할 수 있는 상황을 예방하려면, 아래의 코드처럼 빈 객체를 인수 전체의 기본값으로 만들면 된다.

function getBookInfo({
    title = 'Untitled', 
    author = 'Unknown', 
    price:p = 10000, 
    store = [store1, store2]
}={}) {
    ...
}

getBookInfo() // 모든 인수에 기본값 할당

 

 

마무리하며..

구조분해 할당을 사용하면 객체나 배열을 변수로 연결할 수 있다. 할당 연산자 좌측과 우측의 패턴 구조가 같을때에는, 중첩 배열 또는 객체가 있는 복잡한 구조에서도 원하는 데이터를 뽑아낼 수 있다. 이는 함수의 매개변수가 많거나 매개변수의 기본 값이 필요한 경우 등에서 꽤나 유용하게 쓰일 수 있는 문법이니 잘 익혀두면 큰 도움이 될 것 같다.

 

 

참고링크

JAVASCRIPT.INFO