간단간단! 자바스크립트(JS) 문자열, 배열 중복값 제거하기

이전 글에서는 자바스크립트(JavaScript)의 문자열과 배열의 중복값 찾기를 알아보았는데요. 이번에는 중복값을 제거하는 방법에 대해 알아보겠습니다.

즉 최종적으로 제거한 값만 남는 것이죠.

 

아래 순서대로 진행하고 이번에는 4가지 방법을 소개해보도록 하겠습니다.

 

배열과 문자열에서 중복값 제거하기

1. Set 활용하기
2. filter() 메서드와 indexOf() 메서드 활용하기
3. reduce() 메서드와 includes() 메서드 활용하기
4. 반복문(forEach, for...of) 활용

 

---

 

 

1. Set 활용하기

// Set 활용

//배열의 중복값 제거
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];

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


// 문자열의 중복값 제거
const str = 'hello lobster';
const uniqueStr = [...new Set(str)].join('');

console.log(uniqueStr); // 'helo bstr'

Set 객체는 중복값을 허용하지 않는 특징을 가지고 있습니다. 그래서 배열을 Set 객체로 변환한 후 다시 배열로 변환하면 중복값이 제거된 배열을 얻을 수 있습니다. 

문자열 또한 마찬가지로 Set을 통해 배열 형태로 만든 다음 join() 메서드를 이용하여 다시 문자열로 변환하면 중복값이 제거됩니다.

 

---

 

2. filter() 메서드와 indexOf() 메서드 활용하기

// filter, indexOf 활용

// 배열의 중복값 제거
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.filter((el, index) => arr.indexOf(el) === index);
console.log(uniqueArr); // [1, 2, 3, 4, 5]


// 문자열의 중복값 제거
const str = 'hello lobster';
const uniqueStr = str.split('').filter((el, index, arr) => arr.indexOf(el) === index).join('');
console.log(uniqueStr); // 'helo bstr'

filter() 메서드와 indexOf() 메서드를 조합하여 중복값을 제거할 수도 있습니다.

filter() 메서드는 콜백 함수를 이용하여 조건에 맞는 요소만 추출한 배열을 반환하고, indexOf() 메서드는 특정 요소가 배열 내에서 처음으로 등장하는 인덱스를 반환합니다.

 

문자열도 마찬가지로 가능한데요. 먼저 split() 메서드를 통해 각각의 문자를 하나의 요소로 쪼갠 배열을 만든 후 filter()와 indexOf()를 활용하여 중복값을 제거한 뒤 다시 join() 메서드를 이용해 문자열로 변환합니다.

 

---

 

3. reduce() 메서드와 includes() 활용하기

// reduce 활용

// 배열의 중복값 제거
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((acc, cur) => {
  // acc는 배열 []이고 내부에 cur이 있는지 찾는다.
  if (acc.includes(cur)) {
    return acc // 만약 있으면 acc을 그대로 반환.
  } else {
    return [...acc, cur] // 없으면 cur를 포함하여 배열을 리턴한다.
  }
}, []);

// 위 uniqueArr을 아래처럼 삼항연산자를 활용해 코드 길이를 짧게 만들 수도 있다.
// const uniqueArr = arr.reduce((acc, cur) => acc.includes(cur) ? acc : [...acc, cur], []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]


// 문자열의 중복값 제거
const str = 'hello lobster';
const uniqueStr = str.split('').reduce((acc, cur) => acc.includes(cur) ? acc : acc + cur, '');
console.log(uniqueStr); // 'helo bstr'

reduce() 메서드와 includes() 메서드를 이용하여 중복값을 제거할 수도 있는데요. reduce() 메서드에 대한 배경지식이 있으셔야 좀 더 이해가 쉬울 것 같습니다.

 

reduce() 메서드는 배열의 각 요소를 순회하면서 이전 값과 현재 값을 연산하여 하나의 결과값을 반환합니다. 여기서 acc은 '누산기'라고 불리는데 이 개념은 지금 당장 설명 드리는 것 보다 따로 찾아보시면 좋을 것 같고요. 여기서는 쉽게 설명해서 초기값 정도로 이해하고 넘어갑시다. reduce() 메서드의 두번째 인자로 []을 설정했기 때문에 초기값은 빈 배열([])이 됩니다. 그리고 해당 빈 배열에 cur인 1, 2, 2, 3, 4, 4, 5를 순회하면서 해당 숫자가 있는지 없는지 판단합니다. 있으면 그냥 그대로 배열 acc를 반환하고, 없으면 배열 acc에 cur을 넣은 배열을 리턴합니다. 최종적으로 중복값이 제거된 배열이 반환됩니다.

 

문자열은 먼저 split() 메서드를 활용해, 배열을 만든 후 초기값(acc)을 빈 문자열('')로 설정하여 reduce()와 includes()를 활용합니다.

 

---

 

4. 반복문(forEach, for ... of) 활용하기

// 반복문 활용

// 배열의 중복값 제거
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];

arr.forEach(el => {
  if (!uniqueArr.includes(el)) {
    uniqueArr.push(el);
  }
});

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


// 문자열의 중복값 제거
const str = 'hello lobster';
let uniqueStr = '';

for (const char of str) {
  if (!uniqueStr.includes(char)) {
    uniqueStr += char;
  }
}

console.log(uniqueStr); // 'helo bstr'

반복문으로도 중복값을 제거할 수 있습니다.

배열의 경우 예시로 forEach() 메서드를 활용했는데요. uniqueArr라는 새로운 빈 배열을 만들고, 중복값을 제거할 arr 배열에 요소를 순회하면서 uniqueArr에 있는지 없는지 includes() 메서드를 활용해 판단합니다. 없으면 uniqueArr에 넣고 있으면 무시하는 방법으로 중복값을 제거할 수 있습니다. forEach 뿐만 아니라 다양한 반복문으로 활용할 수도 있겠죠?

 

문자열의 경우는 for ... of를 활용했습니다. 배열과 방식은 유사합니다.

 

---

 

이상으로 자바스크립트(JavaScript)로 배열, 문자열에서 중복값을 삭제하는 방법을 4가지 알아보았습니다.

각각의 방법은 장단점이 있으니 상황에 맞게 잘 선택하여 활용하세요.