[JavaScript] 2차원 배열 중복 제거하기

1차원 배열 내에서 중복된 원소를 제거하고 싶다면 Set을 사용하여 쉽게 구현할 수 있었다.

const arr = [1, 1, 2];
const set = new Set(arr);
const uniqueArr = [...set];

console.log(uniqueArr); // [1, 2]

 

그러나 2차원 배열에 적용해 본 결과, 의도한 대로 동작하지 않았다.

const arr = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 3, 4],
];

const set = new Set(arr);
const uniqueArr = [...set];

console.log(uniqueArr); // [ [ 1, 2, 3 ], [ 1, 2, 3 ], [ 1, 3, 4 ] ] -> 중복 제거 X

 

이때는 아래와 같이 배열 자체를 문자열로 변환함으로써 구현할 수 있다.

const arr = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 3, 4],
];

const set = new Set(arr.join("|").split("|"));
const uniqueArr = [...set]
  .map((d) => d.split(","))
  .map((d) => d.map((e) => +e));
  
console.log(uniqueArr); // [ [ 1, 2, 3 ], [ 1, 3, 4 ] ]

 

너무...복잡하다. 하나씩 차근차근 분석해보자!

---

join("|")

배열 내의 원소를 하나로 묶어서 문자열로 만드는데, 이때 기준을 |로 한다.

console.log(arr.join("|")); // 1,2,3|1,2,3|1,3,4

split("|")

문자열을 |를 기준으로 나눠서 배열에 저장한다.

console.log(arr.join("|").split("|"));
// '1,2,3|1,2,3|1,3,4' 를 |를 기준으로 나눠서 배열에 저장
// [ '1,2,3', '1,2,3', '1,3,4' ]

 

따라서, arr.join("|").split("|")로 만들어진 문자열 배열을 Set에 넣게 되면 중복된 문자열이 제거된다.

const arr = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 3, 4],
];

const set = new Set(arr.join("|").split("|"));
const uniqueArr = [...set];

console.log(uniqueArr); // [ '1,2,3', '1,3,4' ]

 

 

map((d) => d.split(","))

배열 내의 각 문자열을 ,를 기준으로 나눠서 배열에 저장한다.

const arr = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 3, 4],
];

const set = new Set(arr.join("|").split("|"));
const uniqueArr = [...set].map((d) => d.split(","));

console.log(uniqueArr); // [ [ '1', '2', '3' ], [ '1', '3', '4' ] ]

 

map((d) => d.map((e) => +e))

2차원 배열까진 완성했다. 마지막으로 배열 내의 원소들을 문자열 -> 숫자로 변환해야 한다.

const arr = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 3, 4],
];

const set = new Set(arr.join("|").split("|"));
const uniqueArr = [...set]
  .map((d) => d.split(","))
  .map((d) => d.map((e) => +e)); // 2차원 배열이므로 map을 이중으로 돌려야 함
  
console.log(uniqueArr); // [ [ 1, 2, 3 ], [ 1, 3, 4 ] ]