두 개체를 비교(diff)하는 방법

JavaScript의 객체 비교

JavaScript의 객체 비교는 믿을 수 없을 정도로 복잡합니다. 숫자나 문자열과 같은 기본 값을 비교하는 것은 간단하지만 객체를 비교하면 예상치 못한 결과가 발생할 수 있습니다. 객체 비교에 대한 다양한 접근 방식을 살펴보고 객체 간의 변경 사항을 감지하기 위한 강력한 솔루션을 구축해 보겠습니다.

직접 비교의 함정

개발자는 JavaScript에서 객체 비교를 처음 접할 때 다음과 같은 방법을 시도하는 경우가 많습니다.

const user1 = { name: "John", age: 30 };
const user2 = { name: "John", age: 30 };

console.log(user1 === user2); // false

놀랍게도 두 개체의 내용이 동일하더라도 false를 반환합니다. 이는 JavaScript가 해당 값이 아닌 객체 참조를 비교하기 때문에 발생합니다. 두 객체 모두 메모리의 서로 다른 위치를 가리킵니다.

간단한 비교 접근법

1. JSON.stringify

객체를 비교하는 빠른 방법은 JSON.stringify를 사용하는 것입니다.

const areEqual = (obj1, obj2) => 
  JSON.stringify(obj1) === JSON.stringify(obj2);

console.log(areEqual(user1, user2)); // true

간단한 경우에는 작동하지만 다음과 같은 제한 사항이 있습니다.

• 기능을 처리하지 않습니다
• 속성 순서가 중요합니다
• 순환 참조를 처리할 수 없습니다
• 차이점에 대한 정보를 제공하지 않습니다

2. 더 나은 객체 비교 구축

차이점을 감지할 뿐만 아니라 변경된 내용도 알려주는 더욱 정교한 솔루션을 만들어 보겠습니다.

function getObjectDiff(original, current) {
  const changes = {};

  // Check current object's properties
  for (const [key, value] of Object.entries(current)) {
    if (!(key in original)) {
      changes[key] = {
        oldValue: undefined,
        newValue: value
      };
      continue;
    }

    const originalValue = original[key];
    const currentValue = value;

    // Handle different types of comparisons
    if (
      originalValue !== currentValue &&
      String(originalValue) !== String(currentValue) &&
      JSON.stringify(originalValue) !== JSON.stringify(currentValue)
    ) {
      changes[key] = {
        oldValue: originalValue,
        newValue: currentValue
      };
    }
  }

  // Check for removed properties
  for (const key of Object.keys(original)) {
    if (!(key in current)) {
      changes[key] = {
        oldValue: original[key],
        newValue: undefined
      };
    }
  }

  return Object.keys(changes).length === 0 ? null : changes;
}

이 구현:

• 개체가 동일한 경우 null을 반환합니다
• 유형 강제 처리(예: "30" 대 30)
• 추가 및 제거된 속성 감지
• 상세 변경정보 제공

실제 응용 프로그램

이러한 유형의 개체 비교는 다음과 같은 경우에 특히 유용합니다.

1. 양식 변경 사항 추적: 양식에서 어떤 필드가 변경되었는지 감지

const originalForm = { name: "John", email: "john@example.com" };
const currentForm = { name: "John", email: "john.doe@example.com" };
console.log(getObjectDiff(originalForm, currentForm));
// Output: { email: { oldValue: "john@example.com", newValue: "john.doe@example.com" } }

1. 상태 관리: 애플리케이션 상태 중 어느 부분이 변경되었는지 추적
2. API 업데이트: PATCH 요청에서 보낼 필드 결정
3. 감사 로깅: 데이터에 대한 특정 변경 사항을 기록합니다

엣지 케이스(추가 노력이 필요한 경우)

1. 중첩된 객체: 심층 비교 vs 얕은 비교
2. 배열: 순서 민감도 및 참조 비교
3. 유형 강제: 문자열 대 숫자 비교
4. 특수 값: 정의되지 않음, null, NaN
5. 성능: 큰 개체의 경우 심층 비교에 비용이 많이 들 수 있음

PS: 두 객체를 비교하고 차이점을 알아내는 간단한 기능에 대한 Github 요지는 다음과 같습니다.

위 내용은 두 개체를 비교(diff)하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!