JavaScript CodingStudy - Array 중복 제거

문제

다음 배열에서 중복되는 숫자를 제거하려면 어떻게 해야할까?

[1, 2, 3, 6, 6, 7, 2, 2, 8, 9]

---

풀이

Set()을 활용한 중복제거

Array 중복을 제거하는 방법들이 있는데,
우선 ES6에서 활용되는, Set() 문법이 있다.

Set()은 중복을 허용하지 않는다.
Set()에 대한 설명

const mySet = new Set();

mySet.add(1);
mySet.add(2);
mySet.add(2);

console.log(mySet);
// Set(2) { 1, 2 }

우선 Set을 만들어주고, mySet에 같은 숫자를 추가하는 경우 중복숫자는 배열에 들어가지 않는다는 동작을 확인했다.

이를 토대로 주어진 배열에서 중복을 제거해보자.

const num = [1, 2, 3, 6, 6, 7, 2, 2, 8, 9]

const uniqueNums = [new Set(nums)];
console.log(uniqueNums);
// [ Set(7) { 1, 2, 3, 6, 7, 8, 9 } ]

중복은 잘 제거가 되었지만, []안에 set이 들어가 있고, 배열이 딕셔너리 형태로 짜져있어 깔끔하게 정제되어 있지 않은 상태이다. 이럴때는 스프레드 연산자(...)를 사용하면 된다.
스프레드 연산자는 iterable한 객체들 (반복 가능한 객체)를 개별요소로 분리해주어서 깔끔하게 배열을 둘수가 있다.

const num = [1, 2, 3, 6, 6, 7, 2, 2, 8, 9]

const uniqueNums = [...new Set(nums)];
console.log(uniqueNums);
// [1, 2, 3, 6, 7, 8, 9]

---

indexOf()을 활용한 중복제거

indexOf와 lastindexOf에 대하여

indexOf를 활용하면,주어진 index에 첫번째 인수를 찾아주는데 이를 통해, 인수를 먼저 찾은뒤 뒤를 제거하는 방식으로
다음 indexOf가 가진 원리구조이다.

const num = [1, 2, 3, 6, 6, 7, 2, 2, 8, 9]

console.log(nums.indexOf(6));
// 3

6이라는 value를 Zero base 기준으로 3번째 포지션으로 먼저 찾아주는 원리다. 이를 통해 풀이를 진행한다.

const num = [1, 2, 3, 6, 6, 7, 2, 2, 8, 9]

const uniqueNums = nums.filter((item, position) => {
  return nums.indexOf(item) === position;
});

console.log(uniqueNums);
// [1, 2, 3, 6, 7, 8, 9]

array filter를 통해 callback 값이 전달을 하여, item 즉 인수값이 position과 동일한지 확인하는 로직으로 진행된다.

	position	indexOf	return
1	0	0	1
2	1	1	2
3	2	2	3
6	3	3	6
6	4	3
7	5	5	7

위에 표와 같이 포지션에서 인덱스값이 일치하는 인수가 되면, 리턴값을 내주는데 중복 값 (indexof 위치가 일치)이 있을경우에는 리턴값을 반환하지 않고 다음 인수로 넘어가서 중복되지 않는 배열을 반환해준다.

소스코드