문제 발견
다음과 같이 가끔 API로 들어오는 데이터 자체에 중복된 지역명이 한꺼번에 여러 개 들어오는 경우가 있다.
문제 해결
기존 코드에서는 string 타입으로 들어오는 데이터를 분리해서 배열로 return하는 작업만 했다.
- 수정 전 코드
export default function getLocationArray(locations: string) {
return locations.split(",");
}나는 여기에 Set을 활용하여 중복된 데이터를 거르는 작업을 추가해줬다.
- 수정 후 코드
export default function getLocationArray(locations: string) {
return removeRedundancy(locations.split(","));
}
function removeRedundancy(arr: string[]){
const set = new Set(arr);
return Array.from(set.keys());
}- 결과
상세 설명
위에서 내가 추가한 코드를 자세히 살펴보자.
function removeRedundancy(arr: string[]){
const set = new Set(arr);
return Array.from(set.keys());
}Set
-
셋(Set)은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션이다. -
셋에는 키가 없는 값이 저장된다.
-
new Set(iterable)– 셋을 만든다. 이터러블 객체를 전달받으면 그 안의 값을 복사해 셋에 넣어준다.
🤔 keys() 메소드???
이 글을 읽은 여러분은 이상한 점을 느껴야한다.
셋에는 키가 없는 값이 저장된다는데, 내가 쓴 코드를 보면 set.keys()이라고 쓴 부분이 있다. 이상하지 않는가? 이는 도대체 어떻게 된 일일까?
➡️ Set.prototype.keys()와 Set.prototype.values()는 동일하게 작동한다.
values() 메소드는 Set에 요소가 삽입된 순서대로 각 요소의 값을 순환할 수 있는 새로운 Iterator 객체를 반환한다.
values() 메소드는 별칭을 가지고 있는데 바로 key() 메소드이다.
Map 객체와 유사성을 위해 Set 객체에서도 key()메소드를 사용할 수 있다고 한다.
Array.from()
set.keys()로 이터러블 객체를 받아왔다. 이제 이것을 '진짜' 배열로 만들어 주기 위해 Array.from() 메서드를 사용했다.
범용 메서드 Array.from는 이터러블이나 유사 배열을 받아 ‘진짜’ Array를 만들어줍니다. 이 과정을 거치면 이터러블이나 유사 배열에 배열 메서드를 사용할 수 있습니다.
간단한 사항이었기에 포스팅을 할지 말지 고민했었다.
그래도 문제를 해결한 과정을 기록으로 남기고 싶었기 때문에 이렇게 포스팅하게 되었다.
초보적인 사례지만 이 글을 읽는 사람 중 누군가에게 도움이 되길 바란다.
