객체 값 비교하는 방법

자바스크립트에서 객체 값 비교

object(객체)는 참조형이기 때문에 key,value값 및 순서가 같은 object 를 === 으로 비교할 수가 없다는 뜻이다. 즉 참조형을 원시형으로 바꾸어서 비교해주어야 한다.

(순서는 보장해줄 수 없으므로 순서가 보장된 객체의 비교만 가능하고, 순서까지 보장해준뒤 비교하려면 아래 추가 코드(sort 와 reduce사용) 를 통해 보장해 줄 수 있다)

1. Object.entries 사용하기

• Object.entries(obj) 는 array를 return 하는데, 이중배열로서 key,value값을 각각 담고있는 배열을 리턴한다. 즉 아래와같이 return한다.

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

• 이제 비교를 할 수 있도록 return값을 toString()으로 변환해주면 string으로 return하게 때문에 비교가 가능하다.

console.log(Object.entries(obj).toString()) // 'foo,bar,baz,42'

실제프로젝트에서 사용한 비교

saga 에서 지금 cupdispenser 값이 redux store인 hwStatus 값과 다를때에만 dispatch해라 라고 적용해주었다.

if (Object.entries(cupDispenserStatus).toString() !== 
    Object.entries(hwStatus.cupDispenser).toString()) {
	yield put(setCupDispenserStatus(cupDispenserStatus));}

2. JSON.stringify 사용하기

• JSON.stringify(a) a에 들어가는 객체,배열,string 등 모든 값을 string으로 묶어주는 역할을 한다. 즉 아래 코드를 보면 객체 비교가 가능하다.

const obj = { foo: 'bar', baz: 42 };
const obj2 = { foo: 'bar', baz: 42 };

console.log(JSON.stringify(obj)) //'{"foo":"bar","baz":42}'
console.log(JSON.stringify(obj2)) // '{"foo":"bar","baz":42}'
console.log(JSON.stringify(obj)===JSON.stringify(obj2)) // true

실제프로젝트에서 사용한 비교 예시

saga 에서 지금 cupdispenser 값이 redux store인 hwStatus 값과 다를때에만 dispatch해라 라고 적용해주었다.

if (JSON.stringify(cupDispenserStatus) !== JSON.stringify(hwStatus.cupDispenser)) {
          yield put(setCupDispenserStatus(cupDispenserStatus));
        }

3. 객체의 key 순서를 보장하지 않고 DB에서 들어올때 정렬하기

• firebase에서 cupDispenser의 객체를 받아오는데 그때마다 {splitter : true, plate : true} 로 들어올 때 도 있고, {plate : true, splitter : true } 로 들어오기도 해서 제대로 된 비교를 하기 위해 아래와 같은 코드를 작성했다.

const sortedCupDispenserStatus = cupDispenserStatus.map((cupDispenser) =>
Object.keys(cupDispenser).sort().reduce((obj, key) => ((obj[key] = cupDispenser[key]), obj), {}));

1. 먼저 객체의 key값을 sort()를 통해 정렬해주고
2. 정렬된 key를 reduce로 순회하면서 key value를 첫 {} 안에 순서대로 입력해준다