Javascript에는 객체 타입이 존재합니다.
객체 타입은 {name : "Tom", food : "pizza"}와 같이 Key, Value 값으로 편리하게 쓸 수 있는 장점이 있습니다.
그래서 실무에서는 이런 객체를 배열에 담고 쓰는 경우가 종종 있는데요.
그러나 배열에 넣고 쓰다보니 배열에 이미 들어있는 객체인지 중복 여부를 체크해서 처리해야되는 경우가 발생합니다.
단순한 타입 비교라면, 그냥 == 비교로 하면 되겠지만, 객체는 그렇게 할 수 없습니다.
객체 타입은 참조에 의해 할당되고 복사되는 타입으로, == 이나 Object.is() 비교를 사용했을 때, 객체 자체가 아닌 각각의 변수들이 저장하고 있는 객체의 참조를 비교하기 때문에, 객체 간 Key와 Value값이 일치해도 참조값은 다르기 때문에 false로 처리됩니다.
[ 해결 방법 ]
그렇기 때문에, 객체 간 비교를 위해서는 객체 자체를 비교하지말고 다른 방법을 이용해야 합니다.
1. Key, Value 값을 이용해 비교하는 방법
<!-- 기존 Array (Existing Array) -->
let arr = new Array();
arr.push({id : "test1", name : "테스트 유저1"});
arr.push({id : "test2", name : "테스트 유저2"});
위와 같은 arr 이라는 객체 배열이 있을 때, 배열에 추가하고 싶은 객체가 있을 수 있습니다.
<!-- 추가하고 싶은 객체(Object to add) -->
const user = {id : "test1", name : "관리자"};
이 때, arr 배열 안에 객체가 이미 존재하는지 식별자인 id 키 값을 기준으로 비교하는 방법은 다음과 같습니다.
<!-- 비교 후 배열에 추가(Check duplicate userId & push to array) -->
if( arr.filter((e) => { return e.id == user.id }).length < 1 ) arr.push(user);Javascript 내장 함수인 filter를 통해서 arr 내부에 user 객체의 id와 동일한 값이 없으면 user 객체를 arr 안에 추가하는 코드입니다.
for 문으로 처리해도 좋지만, 내장함수의 사용과 코드 길이의 장점이 있어 보다 쉽게 코드를 작성할 수 있습니다.
----------------------------------- 1번 방식 권장(아래는 참고 용도) -----------------------------------
2. JSON.stringify를 통해 객체를 변환하여 비교하는 방법
(* KEY와 VALUE값이 동일할 때 / when both(key, value) are the same *)
동일한 상황에서 추가하고 싶은 객체가 아래와 같이 완전히 동일한 경우에만 사용 가능한 방법입니다.
(키 값으로 id만 조회해서 stringify로 처리해줘도 될 것 같습니다만, 1번 방식을 권장합니다)
<!-- 추가하고 싶은 객체(Object to add) -->
const user = {id : "test1", name : "테스트 유저1"};
<!-- 비교 후 배열에 추가(Check duplicate userId & push to array) -->
let isDupl = false;
for(let i = 0; i < arr.length; i++){
if(JSON.stringify(user).includes(JSON.stringify(arr[i]))) isDupl = true;
}
if(!isDupl) arr.push(user);
해당 상황일 때, user와 arr 내부 요소를 JSON.stringify로 변환하여 중복여부를 확인한 후, 중복되지 않았을 때 배열에 추가하는 코드입니다.
이를 통해서, 객체 배열에 추가할 객체가 있는지 검사한 후, 추가 로직을 작성할 수 있습니다.
🤞 도움이 되셨기를 바랍니다. 한 번의 클릭과 댓글은 어딘가의 누군가에게 진실로 큰 힘이 됩니다. 🐱🏍
댓글