javascript Object 자료형의 값을 비교하는 방법

최근 Front-end 단에서 사용자가 데이터를 변경한 뒤 화면을 이동하거나 종료할 때 저장여부에 대한 알림을 띄워주는 기능을 개발해야 했는데, 그 기능중 이전 데이터 Object와 변경된 데이터 Object를 어떻게 비교했는지에 대해서 정리해보려고 한다.(Vue.js에서는 이런기능을 따로 구현할 필요는 없는것으로 알고있다.)

 

사실 별다른 내용은 없고, Object를 비교하는 내용만 정리할거라 바로 코드로 정리한다, 코드는 다음과 같다.

function compareData() {
    let object = {name : 'kim', age : 32, gender : 'M'};
    let object2 = {name : 'park', age : 20, gender : 'M'};
    //Object.entries를 이용한 방법
    console.log(Object.entries(object).toString() === Object.entries(object2).toString()); // false
    //Json.stringify를 이용한 방법
    console.log(Json.stringify(object) === Json.stringify(object)); // false
    //비교 연산자 대신 Object.is, 외에 문자열.equals(대상)을 이용해도 결과는 같음.
    console.log(Object.is(Json.stringify(object), Json.stringify(object))); // false
}

간략하게 정리하면 Object.entries, Json.stringify 방법 둘 다 자료형을 문자열로 변환 한 뒤 값을 문자열 자체를 비교하여 값이 같은지 다른지 비교된 결과를 리턴한다.

 

코드상 특별히 난해하거나 어려운부분은 없는데, 주의해야 할점이라고 한다면 Object.entreis나 Object.is는 IE환경에서는 지원하지 않기 때문에 크로스 브라우징을 고려한다면 가급적 Json.stringify를 사용하거나 반복문을 통해 문자열로 데이터를 바꿔주는 것이 좋을 것 같다.