Javascript의 객체 구조화 | 실시간 예 | 좋은 연습

내 프로젝트에서 작업 중이었고 앱이 중단될 수 있으므로 내 동료로부터 내포된 개체에 대한 기본값을 입력하라는 검토 의견을 받았습니다.

다음은 API 호출에서 얻은 응답 개체 구조입니다.

response = {
  data:
   someData: {
     name: 'Ashish',
     number: 9876543210
    }
  }
}

name 및 number만 코드에서 사용되었습니다. 이전에 작성한 주석을 받은 코드는 다음과 같습니다.

const { name, number } = response.data.someData;

문제

이제 위 코드의 문제는,

백엔드가 데이터 개체를 공유하지 않는 경우. 그런 다음 JS 엔진은 undefined 에서 someData 를 찾으려고 합니다. 이로 인해 응용 프로그램이 중단될 수 있습니다

.

여러 번 destructuring 하지 않고 한 줄에 다 쓰고 싶었습니다

그래서 위의 문제를 피하기 위해 Google에서 기본값을 사용하여 javascript multilevel destructuring에 대한 모범 사례를 검색해야 했습니다. 그리고 여기 내가 얻은 것이 있습니다.

해결책

const { data: { someData: { name, number } } = { someData: { name: '', number: null } } } = response;

코드는 프론트엔드에서 응답 객체에 대한 기본값을 설정하기 때문에 깨지지 않습니다.

클린 코드

가독성 (이 점은 개발자 관점에 따라 다름)

설명

다단계 구조화를 시도하지 않은 경우 위의 코드가 약간 혼란스러워 보일 수 있습니다. 위의 코드를 여러 문으로 분해해 보겠습니다.


1. 다단계 구조화

const { 
  data: 
    { someData: 
      { 
        name,
        number
       }
     }
   } = response;

//OR
// In one line

const { data: { someData: { name, number } } } = response;

이것이 우리가 다단계 객체를 구조화하는 방법입니다. 외부에서 부모 객체data가 자식 객체someData를 가리키고 다음 자식 객체someData가 name 및 number 값을 갖는 자식 객체를 참조합니다.


2. 기본값 할당

응답 개체에 data가 없으면 기본값을 할당합니다.

const { data = {} } = response;

응답에 data가 없으면 응답 내부에 빈 객체가 있는 데이터가 생성됩니다.


메모:

기본값은 오른쪽으로 이동하고 = 값을 할당하는 데 사용됩니다.

const {
        data: { 
           someData: { 
             name,
             number
           }
       } = { someData: { name: '', number: null } } } = response;
// OR
// in 1 line

const { data: { someData: { name, number } } = { someData: { name: '', number: null } } } = response;

이것은 someData 기본값이 name 빈 문자열이고 '' 의 기본값이 number 인 null 개체를 만듭니다.


메모:
'' 빈 문자열 및 null는 거짓 값입니다.