JavaScript의 집합 이해

자바스크립트 ES6의 Set 객체 완벽 분석

ES6에서 자바스크립트에 새롭게 추가된 기능인 Set 객체에 대해 알아봅시다.

Set이란 무엇일까요?

자바스크립트에서 Set 객체는 어떻게 사용될까요?

Set 객체는 어떤 문제들을 해결하는 데 도움이 될까요?

이 튜토리얼에서 위 질문들에 대한 해답을 찾아보도록 합시다.

Set 객체란?

이름에서 알 수 있듯이, Set은 고유한 요소들의 모음입니다. 중복된 값을 허용하지 않습니다.

자바스크립트의 Set은 요소를 삽입된 순서대로 저장합니다. 즉, 자바스크립트 Set은 순서가 있는 자료구조입니다. 또한, 기본 데이터 타입은 물론 객체도 저장할 수 있습니다.

자바스크립트에서 Set 객체를 생성하는 구문을 살펴봅시다.

아래 코드를 직접 실행해볼 수 있는 개발 환경이 있다면 더 좋습니다.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);
console.log(names);

const randomWord = new Set("Hiiiiiii");
console.log(randomWord);

const numbers = new Set([5, 5, 5, 2, 1, 1, 2, 3]);
console.log(numbers);

Set 객체의 속성 및 메서드

Set 객체는 다양한 문제를 해결하는 데 유용한 속성과 메서드를 제공합니다. 이러한 속성과 메서드는 사용법이 간단하며, 이름만으로도 그 기능을 쉽게 짐작할 수 있습니다. 하나씩 자세히 살펴보겠습니다.

size 속성

size 속성은 Set 객체 내의 요소 개수를 반환합니다.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);
console.log(`Size: ${names.size}`);

add 메서드

add 메서드는 Set 객체에 새로운 요소를 추가하는 데 사용됩니다. 만약 추가하려는 요소가 이미 Set 내에 존재한다면, 메서드는 아무런 동작도 하지 않습니다.

// 빈 Set 객체 생성
const names = new Set();

names.add("John");
names.add("Harry");
names.add("Wick");
names.add("Jack");
names.add("Harry");

console.log(names);

has 메서드

has 메서드는 하나의 인수를 받아, 해당 요소가 Set 안에 존재하면 true를, 그렇지 않으면 false를 반환합니다.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

console.log(names.has("Harry"));
console.log(names.has("Alley"));

delete 메서드

delete 메서드는 인수로 주어진 요소를 Set에서 삭제합니다. 만약 주어진 인수가 Set에 존재하지 않더라도 오류는 발생하지 않습니다.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.delete("John");

console.log(names);

entries 메서드

entries 메서드는 삽입된 순서대로 키-값 쌍 배열을 포함하는 반복자(iterator)를 반환합니다. 여기서 키와 값은 동일합니다.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const entries = names.entries();

console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);

keys 메서드

keys 메서드는 Set 객체 내 요소들의 반복자(iterator)를 삽입 순서대로 반환합니다.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const keys = names.keys();

console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);

values 메서드

values 메서드는 keys 메서드와 유사하게, Set 객체 내 요소들의 반복자(iterator)를 삽입 순서대로 반환합니다.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const values = names.values();

console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);

clear 메서드

clear 메서드는 Set 객체 내의 모든 요소를 제거합니다.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.clear();

console.log(names);

forEach 메서드

forEach 메서드는 Set 객체 내 모든 요소를 순회하며 각각의 요소에 대해 주어진 콜백 함수를 실행합니다.

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.forEach((element) => {
   console.log(element);
});

실제 활용 예시

Set 객체를 활용하여 간단한 문제를 해결하는 방법을 알아봅시다. 주어진 배열에서 모든 중복 값을 제거하는 문제입니다. Set의 속성을 활용하면 이 문제를 쉽게 해결할 수 있습니다.

해결 단계를 살펴봅시다.

샘플 데이터로 배열을 초기화합니다.
빈 Set 객체를 초기화합니다.
배열의 요소를 순회하며 다음을 수행합니다.
- Set에 모든 요소를 추가합니다.
- 중복된 요소는 자동으로 제거됩니다.
빈 배열을 초기화합니다.
Set 객체를 순회하면서 모든 요소를 새로운 배열에 추가합니다.
새로운 배열을 출력합니다.

직접 문제를 해결해보시길 바랍니다. 만약 코딩이 어렵다면 아래의 솔루션을 참고하세요.

const arr = ["John", "Harry", "Wick", "Jack", "Harry"];

const temp = new Set();

arr.forEach((element) => {
   temp.add(element);
});

const newArr = [];

temp.forEach((element) => {
   newArr.push(element);
});

console.log(newArr);

결론

이제 자바스크립트에서 Set 객체를 사용하는 데 필요한 모든 지식을 습득했습니다. 다음 프로젝트에서 Set 객체를 활용해보세요. Set 객체의 다양한 기능을 적극적으로 활용하시기 바랍니다.

즐거운 코딩하세요! 👨‍💻