Home IT/WEB 트리 구조의 객체를 재귀적 함수로 평면화하는 방법

[javascript]트리 구조의 객체를 재귀적 함수로 평면화하는 방법

const getItems = (items) => {
  const flattenItems = (currentItems) => {
    let flatItems = [];

    for (const item of currentItems) {
      flatItems.push(item);

      if (item.children && item.children.length) {
        flatItems = flatItems.concat(flattenItems(item.children));
      }
    }

    return flatItems;
  };

  return flattenItems(items);
};

const items = getItems(this._.cloneDeep(this.maxDepthItems));
  1. getItems 함수를 선언합니다. 이 함수는 트리 구조의 아이템들을 평면화하기 위한 목적으로 사용됩니다. 인자로 items를 받습니다.
  2. getItems 함수 내부에 flattenItems 함수를 선언합니다. 이 함수는 실제로 트리 구조의 아이템들을 평면화하는 작업을 수행합니다. 인자로 currentItems를 받습니다.
  3. flattenItems 함수 내부에서 빈 배열 flatItems를 선언합니다. 이 배열은 평면화된 아이템들을 담기 위한 목적으로 사용됩니다.
  4. flattenItems 함수 내부에서 currentItems 배열의 각 요소를 순회합니다. 반복문에서 현재 아이템을 flatItems 배열에 추가합니다.
  5. 현재 아이템의 children 프로퍼티가 존재하고, 그 길이가 1 이상일 경우에만 재귀 호출을 수행합니다. 이 때, flattenItems(item.children)를 호출하여 재귀적으로 자식 아이템들을 평면화한 뒤, concat 메소드를 사용하여 현재 flatItems 배열에 추가합니다.
  6. 모든 반복이 끝나면, flattenItems 함수는 완전히 평면화된 아이템들을 담고 있는 flatItems 배열을 반환합니다.
  7. 마지막으로, getItems 함수는 flattenItems 함수를 호출하여 평면화된 아이템들을 반환합니다. 이 때, 인자로 받은 items를 전달합니다.
  8. getItems 함수를 호출하며, this._.cloneDeep(this.maxDepthItems)를 인자로 전달합니다. cloneDeep을 사용함으로써 원본 데이터를 변경하지 않고 필요한 데이터를 얻을 수 있습니다.
  9. getItems 함수의 반환 값을 items 변수에 저장합니다. 이 변수에는 평면화된 아이템들이 저장됩니다.
inline ad

RECENT POSTS

[javscript]API 응답에서 키 값들을 검증하는 방법

API 응답에서 다수의 키 값들을 검증할 때 코드의 중복을 줄이는 것은 유지보수성을 향상시키고, 가독성을 높이는 데 중요합니다. 이를 위해 몇 가지 접근 방법을 사용할...

[javscript]특정 키를 제외하고 두 객체를 비교하는 방법

특정 키를 제외하고 두 객체를 비교하는 작업은 데이터의 동등성을 평가하고 싶을 때 유용합니다. Lodash 라이브러리를 통해서 처리할 수 있는 방법에 대해서 살펴보겠습니다. Lodash를 사용한 특정...

[javscript]배열을 특정 키의 값에 따라 정렬하는 방법, _.orderBy

Lodash의 _.orderBy 메소드를 사용하면 배열을 특정 키의 값에 따라 정렬할 수 있습니다. 이 메소드는 배열의 각 항목을 정렬할 기준이 되는 하나 이상의 속성 이름과...

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...