객체 동일성 확인

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 JavaScript 에서 객체 동일성 (object equality) 의 개념을 탐구합니다. 두 값이 동일한지 여부를 결정하기 위해 다양한 기술을 사용하여 두 값 간의 심층 비교 (deep comparison) 를 수행하는 방법을 배우겠습니다. 예를 들어, 값이 동일한지 확인하고, 동일한 값을 가진 비 객체 값인지 확인하며, Object.keys()를 사용하여 두 값 모두 동일한 수의 키를 가지고 있는지 확인하는 방법 등이 있습니다. 또한 재귀 (recursion) 를 사용하여 중첩된 객체를 비교하는 방법도 이해할 것입니다.

JavaScript 에서 객체 동일성 확인 방법

두 값이 동일한지 확인하려면 다음 단계를 따르세요.

  1. 터미널/SSH 를 열고 node를 입력하여 코딩 연습을 시작합니다.
  2. equals() 함수를 사용하여 두 값 간의 심층 비교 (deep comparison) 를 수행합니다.
  3. 두 값이 동일한지 확인합니다. 그렇다면 true를 반환합니다.
  4. Date.prototype.getTime()을 사용하여 두 값이 동일한 시간을 가진 Date 객체인지 확인합니다. 그렇다면 true를 반환합니다.
  5. 두 값이 동일한 값을 가진 비 객체 값 (strict comparison) 인지 확인합니다. 그렇다면 true를 반환합니다.
  6. 값 중 하나만 null 또는 undefined이거나 프로토타입이 다른지 확인합니다. 그렇다면 false를 반환합니다.
  7. 위의 조건 중 어느 것도 충족되지 않으면 Object.keys()를 사용하여 두 값 모두 동일한 수의 키를 가지고 있는지 확인합니다.
  8. Array.prototype.every()를 사용하여 a의 모든 키가 b에 존재하고 equals()를 재귀적으로 호출하여 동일한지 확인합니다.

equals() 함수를 구현하려면 다음 코드를 사용하세요.

const equals = (a, b) => {
  if (a === b) return true;

  if (a instanceof Date && b instanceof Date)
    return a.getTime() === b.getTime();

  if (!a || !b || (typeof a !== "object" && typeof b !== "object"))
    return a === b;

  if (a.prototype !== b.prototype) return false;

  const keys = Object.keys(a);
  if (keys.length !== Object.keys(b).length) return false;

  return keys.every((k) => equals(a[k], b[k]));
};

equals() 함수를 테스트하려면 다음 코드 예제를 사용하세요.

equals(
  { a: [2, { e: 3 }], b: [4], c: "foo" },
  { a: [2, { e: 3 }], b: [4], c: "foo" }
); // true

equals([1, 2, 3], { 0: 1, 1: 2, 2: 3 }); // true

요약

축하합니다! 객체 동일성 확인 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.