[JavaScript] 배열 내 저장된 객체의 중복 제거

리액트 프로젝트 진행 중 배열 내 중복을 제거하는 작업을 하였다.

배열 내의 저장된 데이터의 형태는 다음과 같았다.

const cartArr = [{
                    id : 2,
                    title : "제목",
                    writer : "작가"
                }, {
                    id : 5,
                    title : "제목",
                    writer : "작가"
                }, ···];

 

배열 내에 객체가 저장되었고, 각 객체 내부에는 모두 다른 데이터가 들어가있는 상태이다.

같은 값이 저장되면 안되는 상황이었기 때문에 중복을 제거하기 위해 Set 자료형을 사용하려 하였지만

어째서인지 먹히지않았다..

 

아마 배열내에 저장된 데이터가 모두 '객체'라는 점에서 다르게 인식되어 중복으로 저장할 수 있었던 것 같다.. (추측)

 

이를 해결하기 위해 구글링을 하던 중 Set 자료형으로 배열 내 객체데이터의 중복을 제거할 수 있는 방법을 발견하였다.

 

---

 

설명 전, 코드를 먼저 작성해보겠다.

 

let cartSet = [...new Set(cartArr.map(JSON.stringfy))].map(JSON.parse);

 

필자는 한번에 이해하기엔 힘들었다..

다음부터는 필자가 이해한대로의 설명일뿐 완벽하게 신뢰할 수는 없다..

 

 

🧵 JSON.stringfy와 JSON.parse 

 

코드에 대한 설명을 하기 전 JSON.stringfy와 JSON.parse에 대해 알아보자.

 

JSON은 JavaScript Object Notation의 약자로, 데이터를 문자열의 형태로 나타내기 위해서 사용된다. 이름에서 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포맷이다. 

 

- JSON.stringfy

stringfy 메소드는 JavaScript 객체를 JSON 문자열로 변환시켜 준다.

 

- JSON.parse

parse 메소드는 JSON 문자열을 JavaScript 객체로 변환시켜 준다.

 

JSON에 대한 자세한 설명은 다른 포스트를 참고하고 본론으로 돌아가보자.

 

 

1. cartArr.map(JSON.stringfy)

cartArr 내에 있는 데이터를 map 반복문을 통해 stringfy(JSON 문자열로 변환)해준다.

JSON 문자열로 변환된 데이터는 다음과 같을 것이다.

const cartArr = [{
                    "id" : "2",
                    "title" : "제목",
                    "writer" : "작가"
				}, {
                    "id" : "5",
                    "title" : "제목",
                    "writer" : "작가"
                }, ···];

cartArr 내 모든 데이터가 JSON 문자열이 되었다.

 

 

2. [...new Set(cartArr.map(JSON.stringfy))]

JSON 문자열로 변환된 배열을 Set 자료형으로 만들어줌으로써 중복된 데이터가 사라진다.

 

해당 코드에서는 ... 이라는 spread 연산자가 등장한다.

set 자료형은 { ··· } 형태로 저장되기 때문에 set 자료형을 복사해 배열에 넣어준다.

 

🔍 spread 연산자

스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리할 수 있다. 

우리가 본문에서 사용할 용도는 set 자료형을 복사하는 것이므로 복사에 대한 예제를 보겠다.

 

const arr1 = ['blue', 'red'];
const arr2 = [...arr1];

arr2.push('yellow');

console.log(arr2);  // ['blue', 'red', 'yellow']
// 원본 배열은 변경되지 않습니다.
console.log(arr1);  // ['blue', 'red']

arr를 복사하는 예제입니다. 스프레드 연산자를 사용하면 다음과 같이 새로운 복사된 배열을 생성할 수 있습니다.

 

참고로 spread 연산자를 이용한 복사는 얕은(shallow) 복사를 수행하며, 배열 안에 객체가 있는 경우에는 객체 자체는 복사되지 않고 원본 값을 참조한다. 따라서 원본 배열 내의 객체를 변경하는 경우 새로운 배열 내의 객체 값도 변경된다.

const arr1 = [{name: '녜힝', age: 20}];
const arr2 = [...arr1];

arr2[0].age = 100;

console.log(arr1);  // [{name: '녜힝', age : 100}]
console.log(arr2);  // [{name: '녜힝, age: 100}]

 

 

3. [...new Set(cartArr.map(JSON.stringfy))].map(JSON.parse)

위 과정을 통해 배열에는 set자료형을 통해 중복없는 데이터가 들어갔다.

하지만 우리는 시작할때 데이터를 모두 JSON 문자열로 변환해주었기 때문에 다시 JavaScript 객체로 변환해주어야 한다.

 

배열내에 있는 JSON 문자열을 map반복문을 통해 JSON.parse(JavaScript 객체로 변환) 해준다. 

 

이렇게까지 하면 배열 내에 객체 중 중복을 제거할 수 있다.

 

 

 

 

 

 

자세한 내용에 대한 블로그 참조

(저를 살려주신 감사한 분들.. 감사합니다.)

배열 내 객체 중복 제거에 대한 참고 : https://kyounghwan01.github.io/blog/JS/JSbasic/dupulication-property-remove/#filter

JSON 자료형과 메소드에 대한 참고 : https://www.daleseo.com/js-json/

Spread 연산자에 대한 참고 : https://paperblock.tistory.com/62