[Javascript] 중복되지 않는 데이터 배열, Set - 기본편

일반적으로 일련의 데이터 목록을 등록할 때는 다음과 같이 선언해서 사용할 수 있습니다.

 

// 1. 사전정의
var arr1 = [1, 3, 3, 4];

// 2. 정의 후 추가 (1)
var arr2 = new Array();
arr2.push(1);
arr2.push(3);
arr2.push(3);
arr2.push(4);

// 3. 정의 후 추가 (2)
var arr3 = [];
arr3.push(1);
arr3.push(3);
arr3.push(3);
arr3.push(4);

 

 이에 대한 자세한 사항은 이전 글에서 확인하실 수 있습니다.

 

2020/09/18 - [개발 창고/웹 개발] - [Javascript] 배열(Array) 활용하기

[Javascript] 배열(Array) 활용하기

 그런데 개발을 하다 보면 다음과 같은 요구사항이 생길 수 있습니다.

 

Q1. 상품코드는 중복되지 않게 해 주세요.

Q2. 소설의 등장인물의 이름은 중복되지 않게 해 주세요.

Q3. 판매자의 사업자등록번호는 중복되지 않게 해 주세요.

Q3. 가입자의 이메일 주소는 중복되지 않게 해 주세요.

 

 이 질문들은 SQL문을 알고 있는 사람들이라면 Distinct나 Group By가 연상될 수도 있을 겁니다. 하지만 지금 다루려는 부분은 "입력되어 있는 데이터의 중복제거"가 아니라 "입력되는 데이터의 중복제거"이라는 점입니다.

 

 한 줄로 설명하면 보다 더 쉽게 설명을 드리면, 

 

"중복되지 않도록 목록에 저장"

 이게 Set의 존재 이유입니다.

 

예를 들어 위의 배열은 모두 다음과 같은 배열로 구성됩니다.

 

 

하지만 만약에 사용자가 저렇게 3이 중복되어 저장되지를 않길 바랄 수도 있습니다.

 

 

이 경우 두 가지 방식으로 처리가 가능합니다.

 

// 1. Set의 사전정의
var arr4 = new Set([1, 3, 3, 4]);

// 2. Set 정의 후 추가
var arr5 = new Set();
arr5.add(1);
arr5.add(3);
arr5.add(3);
arr5.add(4);

 

 

 이와 같이 입력은 1 → 3 → 3  → 4 순으로 입력되었지만, 저장은 아래와 같이 되었음을 확인하실 수 있습니다.

 

 

예제는 아래 링크에서 확인 가능하십니다.

 

jsfiddle.net/pumso9yr/7/

Edit fiddle - JSFiddle - Code Playground