🚀 자바스크립트 객체 끼리 값 비교하는 방법

객체 끼리 값 비교하기

 

key 순서가 정해진 객체 비교

const one = {
  fruit: '🥝',
  nutrients: {
    energy: '255kJ',
    minerals: {
      name: 'calcium'
    }
  }
};

const two = {
  fruit: '🥝',
  nutrients: {
    energy: '255kJ',
    minerals: {
      name: 'calcium'
    }
  }
};

// 1. Using JSON
JSON.stringify(one) === JSON.stringify(two); // true

// 2. Using Object.entries
Object.entries(one).toString() === Object.entries(two).toString();

// 3. Using Lodash Library
_.isEqual(one, two); // true

---

key 순서가 정해지지 않은 객체 비교

만일 순서가 정해진 객체가 아닌, 객체의 key 순서를 보장하지 않을 경우 위의 비교식으로는 불가능하다.

let one = {splitter : true, plate : true};
let two = {plate : true, splitter : true};

console.log(JSON.stringify(one) === JSON.stringify(two));
// false
console.log(Object.entries(one).toString() === Object.entries(two).toString());
// false

대표적으로 서버의 데이터베이스의 값들을 객체화 할때 발생하는 경우이다. 예를들어 서버로부터 객체를 받아오는데 그때마다 {splitter : true, plate : true} 로 들어올 때 도 있고, {plate : true, splitter : true } 로 들어오기도 해서 제대로 된 비교를 하기 위해 아래와 같은 하드 코드를 작성한다.

/* 1. 먼저 객체의 key값을 sort()를 통해 정렬해주고
   2. 정렬된 key를 reduce로 순회하면서 key value를 첫 {} 안에 순서대로 입력해준다 */
let one_sort = Object.keys(one).sort().reduce((obj, key) => (obj[key] = one[key], obj), {});
let two_sort = Object.keys(two).sort().reduce((obj, key) => (obj[key] = two[key], obj), {});

console.log(one_sort); // { "plate":true, "splitter": true }
console.log(two_sort); // { "plate":true, "splitter": true }

console.log(JSON.stringify(one_sort) === JSON.stringify(two_sort));
// true
console.log(Object.entries(one_sort).toString() === Object.entries(two_sort).toString());
// true