문제 이해
종종 우리는 JavaScript 애플리케이션에서 복잡한 데이터 구조를 접하게 됩니다. 이러한 구조는 깊게 중첩된 개체일 수 있으므로 직접 조작하거나 처리하기가 어렵습니다. 일반적인 작업 중 하나는 이러한 객체를 평면화하여 모든 속성이 최상위 수준에 있는 더 간단한 구조로 변환하는 것입니다.

이 블로그에서는 깊게 중첩된 개체를 효과적으로 평면화하는 JavaScript 코드 조각을 자세히 살펴보겠습니다. 코드를 한 줄씩 분석하여 논리와 기능을 설명하겠습니다.

코드 분석

let user = {
  name : 'Chiranjit',
  address : {
    personal : {
      city: 'Kolkata',
      state: 'West Bengal'
    },
    office : {
      city: 'Bengaluru',
      state: 'Karnataka',
      area: {
        landmark:'Waterside',
        post: 433101
      }
    }
  }
}
var finalObj = {} 

const flatObjFn = (obj, parent) => {
  for(let key in obj){
    if(typeof obj[key] === 'object'){
      flatObjFn(obj[key], parent '_' key)
    }else{
      finalObj[parent   '_'   key] = obj[key]
    }
  }
}

flatObjFn(user, 'user');
console.log(finalObj);

한 줄씩 설명

1. 중첩된 개체 만들기:
   • user라는 이름의 깊게 중첩된 객체를 만드는 것부터 시작합니다. 그것은 포함 이름, 주소 및 추가로 중첩된 개체와 같은 속성 주소.

2. 출력 개체 초기화:

   • 평탄화된 결과를 저장하기 위해 빈 객체 finalObj가 생성됩니다.

3. 평탄화 기능 정의:

   • flatObjFn이라는 함수가 정의되어 있으며 두 개의 매개변수를 허용합니다. a) obj: 병합할 개체입니다. b) parent: 명확성을 위해 속성 이름 앞에 붙는 문자열입니다.

4. 객체 속성을 통한 반복:

   • for...in 루프는 입력 객체 obj의 각 속성을 반복합니다.

5. 중첩 객체 처리:

   • 속성 값이 객체인 경우 flatObjFn 함수는 다음과 같습니다. 해당 객체를 재귀적으로 호출합니다. 상위 매개변수는 다음과 같습니다. 현재 속성 이름과 연결되어 새 접두사를 만듭니다. 중첩된 속성의 경우.

6. 기본 값 처리:

   • 속성 값이 객체가 아닌 경우(즉, 기본 값 문자열이나 숫자와 같은) 키와 함께 finalObj에 추가됩니다. 상위 속성과 현재 속성 이름을 연결하여 구성됩니다.

7. 평탄화 기능 호출:

   • flatObjFn은 사용자 개체를 입력으로 사용하고 '사용자'를 입력으로 사용하여 호출됩니다. 초기 상위 접두사.

8. 평탄화된 객체 기록:

   • 최종적으로 편평해진 객체는 다음을 사용하여 콘솔에 인쇄됩니다. console.log(finalObj).

작동 방식
flatObjFn 함수는 객체를 재귀적으로 탐색하여 중첩된 구조를 플랫 객체로 분해합니다. 상위 매개변수는 객체 계층 구조를 추적하여 함수가 출력 객체에 의미 있는 속성 이름을 생성할 수 있도록 합니다.

트위터나 링크드인으로 소통하자