JavaScript에서 객체 비교

1. JavaScript의 JSON.stringify() 함수를 사용하여 객체 비교
2. JavaScript에서 수동으로 객체 비교

이 튜토리얼에서는 수동으로 또는 JavaScript의 JSON.stringify() 함수를 사용하여 객체를 비교하는 방법에 대해 설명합니다.

JavaScript의 JSON.stringify() 함수를 사용하여 객체 비교

JavaScript에서 변수를 비교하는 것은 비교적 쉽습니다. 두 변수 사이에 비교 연산자 ===를 사용하기만 하면 됩니다. 변수는 문자열 및 정수와 같은 모든 데이터 유형이 될 수 있습니다.

비교 연산자는 비교되는 변수에 따라 true 또는 false일 수 있는 부울을 반환합니다. 예를 들어, 비교 연산자를 사용하여 문자열 유형의 두 변수를 비교합시다.

아래 코드를 참조하십시오.

var a = 'Apple';
var b = 'Apple';
console.log(a === b)

출력:

true

출력에서 부울 true는 두 변수가 동일함을 나타냅니다. 마찬가지로 숫자를 비교할 수도 있습니다. 이제 JavaScript의 객체 비교에 대해 이야기해 보겠습니다.

객체 비교는 여러 값을 포함하고 그 안에 객체를 포함할 수 있기 때문에 쉽지 않습니다. 두 객체를 비교하는 빠르고 쉬운 방법은 JASON.stringify() 함수를 사용하는 것입니다. 이 방법의 단점은 속성의 순서가 상대적으로 중요하다는 것입니다.

이 함수는 한 개체의 첫 번째 속성을 다른 개체의 첫 번째 속성과 비교하는 식입니다. 객체 중 하나에서 속성의 순서를 변경하면 이 방법이 작동하지 않습니다. 예를 들어 JSON.strigify() 함수를 사용하여 두 객체를 비교해 보겠습니다.

아래 코드를 참조하십시오.

const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  name: 'Apple',
  price: '2'
};
console.log(JSON.stringify(fruit1) === JSON.stringify(fruit2))

출력:

true

이 코드에서 우리는 각각 두 개의 속성을 포함하는 두 개의 객체를 비교하고 있습니다. 출력에서 두 객체는 ​​동일합니다. 이제 한 객체에서 두 속성의 순서를 변경한 다음 JSON.stringify() 함수를 사용하여 다른 것과 비교해 보겠습니다.

아래 코드를 참조하십시오.

const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  price: '2',
  name: 'Apple'
};
console.log(JSON.stringify(fruit1) === JSON.stringify(fruit2))

출력:

false

출력에서 결과는 false입니다. 두 번째 개체의 속성 순서를 변경했습니다. 이것이 이 방법의 단점입니다.

JavaScript에서 수동으로 객체 비교

위의 방법은 단점이 있어서 두 객체를 비교하는 자체 함수를 만들 수 있으므로 객체의 속성 순서에 신경쓰지 않아도 됩니다.

예를 들어 자바스크립트에서 위의 객체들을 비교하는 함수를 만들어 봅시다. 아래 코드를 참조하십시오.

function ObjCompare(obj1, obj2) {
  if (obj1.name === obj2.name && obj1.price === obj2.price) {
    return true;
  };
  return false;
}
const fruit1 = {
  name: 'Apple',
  price: '2'
};
const fruit2 = {
  price: '2',
  name: 'Apple'
};
console.log(ObjCompare(fruit1, fruit2))

출력:

true

위의 코드에서 ObjCompare() 함수를 만들어 두 객체를 순서에 관계없이 속성에 따라 비교했습니다. 이 함수는 두 객체의 이름과 가격이 동일한 경우에만 true를 반환합니다. 그렇지 않으면 false을 반환합니다.

여러 속성을 비교하거나 사용 가능한 모든 속성에서 비교하려는 하나의 속성을 비교하는 고유한 기능을 만들 수도 있습니다. 한 번에 두 개 이상의 객체를 비교하는 또 다른 함수를 만들 수도 있습니다.

이제 많은 속성을 가진 두 개의 개체가 있고 모든 속성을 비교하려고 한다고 가정해 보겠습니다. 이런 종류의 기능을 만드는 것은 많은 시간이 걸릴 것입니다.

대신 Object.keys() 함수를 사용하여 함수의 모든 키 또는 속성을 가져오고 루프를 사용하여 비교할 수 있습니다. 모든 속성이 동일한 경우 함수는 true를 반환합니다. 그렇지 않으면 false를 반환합니다.

예를 들어 이 함수를 만들고 위의 두 개체로 테스트해 보겠습니다. 아래 코드를 참조하십시오.

function ObjCompare(obj1, obj2) {
  const Obj1_keys = Object.keys(obj1);
  const Obj2_keys = Object.keys(obj2);
  if (Obj1_keys.length !== Obj2_keys.length) {
    return false;
  }
  for (let k of Obj1_keys) {
    if (obj1[k] !== obj2[k]) {
      return false;
    }
  }
  return true;
}
const fruit1 = {
  name: 'Apple',
  price: '2',
  color: 'red'
};
const fruit2 = {
  price: '2',
  name: 'Apple',
  color: 'red'
};
console.log(ObjCompare(fruit1, fruit2))

출력:

true

이 프로그램에서 ObjCompare() 함수 내부의 첫 번째 if 문은 두 객체 내부의 속성 또는 키 길이를 확인하는 데 사용됩니다.

같지 않으면 함수는 false를 반환하고 루프로 이동하지 않습니다. 이 방법은 속성의 순서나 객체의 키를 변경하더라도 잘 작동합니다. 이 기능을 변경하여 한 번에 세 개 이상의 개체를 비교할 수도 있습니다.