자바스크립트 활용 7
문제47 : set 자료형의 응용
바울랩에서는 3월 29일 제주대학교에서 '제주 빅데이터 사회혁신 해커톤' 행사를 주최하게 되었습니다.
이에 구글 설문지를 배포하였으나 제주대학생들이 중복해서 n개씩 설문지를 제출하였습니다.
중복된 데이터들을 삭제하여 실제 접수 명단이 몇 명인지 알고 싶습니다.
아래 주어진 데이터들로부터 중복을 제거하여 실제 접수 인원을 출력해 주세요.
const people = {
이호준: "01050442903",
이호상: "01051442904",
이준호: "01050342904",
이호준: "01050442903",
이준: "01050412904",
이호: "01050443904",
이호준: "01050442903"
};
이 문제는 JavaScript의 `Set` 자료형을 활용하여 중복을 제거하는 개념에 적용.
`Set`은 ES6(ECMAScript 2015)에서 도입된 자료구조 중 하나로, 고유한 값을 저장하기 위한 컬렉션입니다.
즉, 어떤 값이 `Set`에 이미 존재하는 경우, 그 값의 중복 추가를 허용하지 않습니다.
문제에 적용된 JavaScript 개념:
1. Set 객체:
중복되지 않는 고유한 값들만 저장할 수 있는 컬렉션입니다. 이 문제에서는 `Set`을 사용하여 중복된 설문 응답자를 제거합니다.
2. 배열 변환:
`Set` 객체를 사용하여 중복을 제거한 후, 결과를 배열로 변환하거나 `Set`의 크기를 확인하여 실제 접수 인원 수를 알 수 있습니다. `Array.from()` 함수나 스프레드 연산자 `...`를 사용하여 `Set`을 배열로 변환할 수 있습니다.
3. Set.prototype.size 속성:
Set 객체의 크기(즉, 고유한 요소의 수)를 반환합니다. 이 속성을 통해 중복이 제거된 후의 실제 접수 인원 수를 쉽게 알 수 있습니다.
문제 해결을 위한 로직 과정
1. 주어진 데이터에서 각 항목의 값을 `Set` 객체에 추가하여 중복을 제거합니다. 이 경우, 사람들의 전화번호가 중복을 확인하는 기준이 됩니다.
2. 중복 제거된 전화번호의 총 개수를 확인하여 실제 접수 인원 수를 알아냅니다.
const people = {
이호준: "01050442903",
이호상: "01051442904",
이준호: "01050342904",
이호준: "01050442903",
이준: "01050412904",
이호: "01050443904",
이호준: "01050442903"
};
// 1. 객체의 값을 이용하여 Set 객체 생성
const uniquePhoneNumbers = new Set(Object.values(people));
// 2. Set 객체의 크기를 통해 중복 제거된 실제 접수 인원 수 확인
const actualRegistrantsCount = uniquePhoneNumbers.size;
console.log(actualRegistrantsCount); // 중복 제거된 실제 접수 인원 수 출력
```
이 코드는 먼저 `Object.values(people)`을 사용하여 `people` 객체의 모든 값(전화번호)을 배열로 변환합니다.
이 배열을 `new Set()`에 전달하여 중복된 값을 제거하고, 고유한 전화번호만을 포함하는 `Set` 객체를 생성합니다.
마지막으로, `uniquePhoneNumbers.size`를 통해 중복이 제거된 실제 접수 인원 수를 확인하고 출력합니다.
// 예시 데이터를 배열 형태로 변환
const peopleArray = [
["이호준", "01050442903"],
["이호상", "01051442904"],
["이준호", "01050342904"],
["이호준", "01050442903"],
["이준", "01050412904"],
["이호", "01050443904"],
["이호준", "01050442903"]
];
// 중복 제거를 위해 Set을 사용
const uniquePeople = new Set();
peopleArray.forEach(person => {
// 배열의 각 요소(사람)를 문자열 형태로 변환하여 Set에 추가
// 객체의 키와 값 모두를 고려하기 위해 키와 값을 조합한 문자열을 생성
const personStr = `${person[0]}: ${person[1]}`;
uniquePeople.add(personStr);
});
// 중복이 제거된 실제 접수 인원 출력
console.log(uniquePeople.size); // Set의 size 속성을 사용하여 요소의 개수(인원 수)를 출력
이 코드는 중복된 데이터를 제거하고 고유한 요소의 개수를 세는 과정을 구현한 것이다.
구체적으로, 주어진 데이터는 사람의 이름과 전화번호를 포함하는 2차원 배열(`peopleArray`) 형태로 되어 있으며,
이 데이터에서 중복을 제거하여 실제로 몇 명의 고유한 사람이 있는지를 확인하는 것이 목표입니다.
코드 분석
1. 데이터 정의: `peopleArray`는 이름과 전화번호를 요소로 하는 배열의 배열이다. 각 내부 배열은 한 사람의 정보를 나타냄.
2. 중복 제거 준비: `uniquePeople`라는 이름의 `Set` 객체를 생성 -> `Set`은 자바스크립트의 내장 객체로, 고유한 값만을 저장,
중복된 값을 추가하려고 하면 `Set`은 그 값을 무시함.
3. 데이터 처리: `peopleArray` 배열을 `forEach` 메서드로 순회하면서 각 사람의 정보를 문자열로 변환.
이 때, 각 사람의 이름과 전화번호를 `personStr` 변수에 저장하며, 이 변수의 값은 "이름: 전화번호" 형태의 문자열
4. 중복 제거: 변환된 문자열(`personStr`)을 `uniquePeople` `Set`에 추가
이 과정에서 자동으로 중복이 제거.
만약 동일한 이름과 전화번호의 조합이 이미 `Set`에 존재한다면, 해당 데이터는 추가되지 않음.
5. 결과 출력: 최종적으로 `Set`의 `size` 속성을 사용하여 `uniquePeople`에 저장된 고유한 요소의 개수를 출력합. 이
값은 중복이 제거된 실제 접수 인원 수를 나타냄.
핵심 개념
- Set 객체: 중복을 허용하지 않는 데이터 집합을 관리하기 위해 사용
- 문자열 변환: 데이터의 고유성을 판단하기 위해, 복합 데이터(이름과 전화번호)를 단일 문자열로 변환.
- forEach` 메서드: 배열의 각 요소를 순회하며 주어진 함수를 실행합니다. 이 예시에서는 각 사람의 정보를 처리하기 위해 사용.
- `size` 속성: `Set` 객체에 저장된 고유한 요소의 개수를 반환.
아래 표는 위 두 코드의 차이점을 표로 정리했다.
| 기준 | 배열을 사용한 코드 | 객체를 사용한 코드 |
| 데이터 구조 | 2차원 배열 사용. 각 요소는 [이름, 전화번호] 형태의 배열. | 객체 사용. 키는 이름, 값은 전화번호. |
| 중복 제거 기준 | 이름과 전화번호의 조합으로 중복 제거. 각 요소를 문자열로 변환하여 Set에 추가. | 전화번호만을 사용하여 중복 제거. 객체의 값만을 이용. |
| 중복 검사 방법 | forEach 메서드를 사용하여 배열의 각 요소를 순회하며 Set에 추가. | Object.values를 사용하여 객체의 모든 값(전화번호)을 배열로 변환 후 Set에 추가. |
| 고유성 판단 기준 | 이름과 전화번호의 조합. | 전화번호만 고려. |
| 결과 도출 과정 | 배열의 각 요소를 문자열로 변환하여 Set에 추가 -> Set의 크기로 고유 요소 수 계산. | 객체의 값을 배열로 변환 -> Set으로 중복 제거 -> Set의 크기로 고유 요소 수 계산. |
| 유연성 | 이름과 전화번호 모두 고려. 다양한 정보를 조합하여 고유성 판단 가능. | 전화번호에 한정된 고유성 판단. 이름 정보는 고려되지 않음. |
| 실용성 | 더 복잡한 데이터 구조에 적합. 이름과 전화번호 같은 다수의 정보를 포함하는 경우 사용 가능. | 단일 정보(전화번호)에 대한 중복 제거에 적합. |
| 확장성 | 데이터 구조나 중복 제거 로직을 변경하기 쉬움. 추가 정보가 있는 경우에 유리. | 전화번호 외의 다른 정보를 고려하려면 코드 수정 필요. |