자바스크립트 활용 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의 크기로 고유 요소 수 계산.
유연성	이름과 전화번호 모두 고려. 다양한 정보를 조합하여 고유성 판단 가능.	전화번호에 한정된 고유성 판단. 이름 정보는 고려되지 않음.
실용성	더 복잡한 데이터 구조에 적합. 이름과 전화번호 같은 다수의 정보를 포함하는 경우 사용 가능.	단일 정보(전화번호)에 대한 중복 제거에 적합.
확장성	데이터 구조나 중복 제거 로직을 변경하기 쉬움. 추가 정보가 있는 경우에 유리.	전화번호 외의 다른 정보를 고려하려면 코드 수정 필요.