JavaScript에서 객체의 딥 클로닝...

JavaScript 개발자로서 우리는 개체를 복제하고 일부 작업을 수행하기 위해 재사용하려는 상황을 자주 접하지 않습니다.

그리고 우리는 일반적으로 개체를 완전히 복제하기 위해 잘 알려진 접근 방식을 따릅니다.

lodash's cloneDeep method

JSON.parse(JSON.stringify(object))

위의 두 가지 접근 방식을 사용해서는 안 되며 개체를 완전히 복제하는 사용자 지정 방법을 만들어야 한다고 말하면 어떻게 됩니까?

그에 대한 답변이 있습니다. 개체의 심층 복제를 달성하는 데 도움이 되는 유틸리티 메서드를 작성해 보겠습니다.

예시

아래와 같이 중첩된 개체가 있다고 가정해 보겠습니다.

let emptyStack = {
  feTools: 'JS, React, NextJS, Tailwindcss, Netlify',
  react: {
    baseConcepts: 'props, states, hooks',
    advancedConcepts: {
      hoc: 'composition of the functions',
      contextApi: 'Sharing the data without prop drilling'
    }
  }
}

따라서 위에서 볼 수 있듯이 emptyStack 내부에 중첩된 개체가 있습니다. 개체의 심층 복제를 달성하기 위해 실행해야 하는 모든 단계를 이해하고 평가해 봅시다.

의사 코드

단계:

새 빈 객체를 초기화합니다

.

객체의 키를 반복하고 키-값 쌍이 객체인지 확인합니다

.

그리고 2단계의 결과에 따라 빈 개체를 새 속성으로 업데이트합니다.

객체의 마지막 요소가 평가될 때까지 2단계와 3단계를 반복합니다.

궁극적인 유틸리티 방법

function deepCopy(currentObj) {
  let newObj = Array.isArray(currentObj) ? [] : {}; //Step#1
  for (let key in currentObj) { //Step#2
    let property = currentObj[key];
    if (typeof property === "object") {
      newObj[key] = deepCopy(property); //Step#3
    } else {
      newObj[key] = property; //Step#3
    }
  }
  return newObj;
}

용법

let deepClonedObject = deepCopy(emptyStack)

console.log(`${JSON.stringify(deepClonedObject)}`)
/** Output
{"feTools":"JS, React, NextJS, Tailwindcss, Netlify","react":{"baseConcepts":"props, states, hooks","advancedConcepts":{"hoc":"composition of the functions","contextApi":"Sharing the data without prop drilling"}}} */

위의 방법에서 사용된 모든 개념은 무엇입니까?

재귀 함수

객체 키 반복

결론

객체 심층 복제는 복제된 객체에 대해 역참조를 발생시키려는 시나리오에서 정말 유용합니다.
목록과 관련된 더 많은 게시물이 있습니다... 그러니 계속 읽으세요.

이 글을 읽어주셔서 미리 감사드립니다...🚀

나는 당신과 연결하게되어 기쁩니다

당신은 또한 나를 찾을 수 있습니다

@Github

@Medium