객체 분해 101

일명 doIt({ x: x2 = getX() } = {})은(는) 무슨 뜻인가요?!

React에 익숙해지고 있습니다. 구성 요소와 화살표 기능이 있습니다. 그러나 당신은 이 짐승과 마주칩니다.

function doRender (
  ui,
  {
    state: initialState,
    options = getOptions({ overrides })
  } = {}
) { // ... }

잠깐, 어떻게? 대괄호와 콜론, 등호, 이런! 이 작은 조각은 당신의 두뇌를 깨뜨립니다. 이 개발자는 무슨 생각을 하고 있었을까요? 그들이 너무 영리했습니까? 아니면 무엇입니까?!

확실히 브라켓 수프이지만 광기에 대한 방법이 있습니다.

이것은 함수 호출 내에서 서로의 위에 계층화된 몇 가지 다른 수준의 객체 구조화입니다. 프로처럼 읽을 수 있도록 차근차근 살펴보겠습니다.

레벨 1: 기본 구조 분해

먼저, 기본부터 시작하겠습니다. 객체 구조화는 객체에서 직접 특정 키를 추출하는 방법입니다. React 및 기타 최신 JavaScript 프레임워크에서 상당히 많이 사용됩니다. 사실 이미 사용하고 있을 것입니다. 기본적인 형태로 보면 이렇습니다.

const myObject = {
  name: 'Chris',
  email: '[email protected]',
  city: 'Brisbane'
};

// extracts 'Brisbane' and assigns it to a variable `city`
const { city } = myObject;

쉽죠? 계속하자.

레벨 2: Destructuring의 이름 바꾸기

다음 단계에서 이미 변수city가 있다면 어떻게 될까요? 추출할 때 이름을 변경해 보겠습니다.

const myObject = {
  name: 'Chris',
  email: '[email protected]',
  city: 'Brisbane'
};

// oops we already have city in scope
const city = 'Sydney'; 

// extracts 'Brisbane' and assigns it to a variable `myCity`
const { city: myCity } = myObject; 

2에서 2, 알았습니다.

레벨 3: 다단계 구조화

다음으로 다단계 구조화에 대해 알아보겠습니다. 이 때 구조화하려는 변수가 실제로 다른 키 내부에 중첩됩니다. 이 중첩 객체에서 city 및 state를 시도하고 알아보겠습니다.

const myObject = {
  name: 'Chris',
  email: '[email protected]',
  address: {
    city: 'Brisbane',
    state: 'QLD'
  }
};

// now city variable is 'Brisbane' and state variable is 'QLD'
const {
  address: { city, state }
} = myObject; 

여기서 트릭을 주목하세요. address 실제로 구조가 해제된 것이 아니라 자식을 노리는 데만 사용됩니다. 전체 주소도 원하면 주소를 먼저 구조화한 다음 주소를 도시와 주로 구조화하거나 두 번 구조화할 수 있습니다.

// destructure `address` then `city` from `address`
const { address } = myObject;
const { city } = address;

// destructure `address` itself, then `city` from within it
const {
  address,
  address: { city }
} = myObject;

좋습니다. 우리는 초기 스니펫처럼 보이기 시작했습니다.

레벨 4: 기본값 분해

다음 단계는 기본값을 구조화하는 것입니다. 지금까지 우리는 데이터가 있다고 가정했습니다. 그러나 특정 키가 있을 수 있거나 없을 경우 어떻게 됩니까? 여기에서 기본값이 작동합니다.

const myObject = {
  name: 'Chris',
  email: '[email protected]'
  // city is missing for this one
};

// `city` in this case will be `undefined`
let { city } = myObject; 

// let's add a default
// now `city` will be 'Sydney' since it's not set in `myObject`
let { city = 'Sydney' } = myObject; 

const myObject2 = {
  city2: 'Brisbane'
};
// but `city2` here will be 'Brisbane' since it was set in `myObject2`
const { city2 = 'Sydney' } = myObject2; 

다단계 구조화를 시도할 때(또는 더 일반적으로 정의되지 않은 무언가를 구조화하려고 시도할 때) 문제가 발생할 수 있습니다. 이 예를 들어, city 에서 address 를 얻으려고 하지만 address 에는 myObject 가 없습니다.

const myObject = {
  name: 'Chris',
  email: '[email protected]'
  // sometimes we have address, but not this time
  // address: {
  // city: 'Brisbane',
  // }
};

// bah bow - cannot read property 'city' of undefined
const {
  address: { city }
} = myObject; 

// so let's fix that with a default empty object
// now we're looking for `city` in an empty object, 
// which won't fail - `city` will be undefined
// but won't blow up
const { address: { city } = {} } = myObject; 

전체 원

이제 우리는 원래의 브레인 브레이커로 돌아갑니다. 이제 우리가 가진 모든 것이 기본값을 사용하는 일부 다단계 구조 해제라는 것을 알 수 있습니다.

아직도 확신이 서지 않습니까? 좋아, 우리는 그것을 조금씩 단계별로 살펴보고 그것이 확실히 들어가도록 할 것입니다:

// function call
function doRender (

  // first parameter called `ui`
  ui,

  // destructure the second parameter
  {

    // extract and rename `state` to variable `initialState`
    state: initialState,

    // extract `options` to a variable, and if it's unset, 
    // default to the result of `getOptions()`
    options = getOptions({ overrides })

    // finally, default the second parameter to empty object, as it is optional
  } = {}

) { // ... }

바라건대, 이것은 가장 혼란스러워 보이는 구조 분해가 이 4가지 레벨로 구성되어 있음을 확인하는 데 도움이 되었기를 바랍니다. 그것들을 하나씩 파싱하면 곧 이와 같은 코드를 읽고 작성하게 될 것입니다.