자바스크립트 Sets: 유기한 데이터를 위한 친절한 안내서

안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 자바스크립트 Sets의 세계로 흥미로운 여행을 떠납니다. 프로그래밍에 새로운 사람이라면 걱정 마세요 - 저는 당신의 신뢰할 수 있는 안내자가 되겠습니다. 우리는 이 주제를 단계별로 탐구하겠습니다. 이 튜토리얼이 끝나면, Sets를 마치 프로처럼 조작할 수 있을 것입니다!

JavaScript - Sets

Set이란 무엇인가요?

코드에 들어가기 전에, Set이 무엇인지 이야기해 보겠습니다. 상상해 보세요. 당신이 구슬이 들어있는 가방을 가지고 있는데, 이 가방은 특별합니다 - 각 색상의 구슬 하나씩만 들을 수 있습니다. 자바스크립트에서 Set은 바로 그런 것입니다: 중복되지 않은 값을 포함할 수 있는 컬렉션입니다. 중복은 허용되지 않습니다!

문법: Set 생성

기본적인 것으로 시작해 보겠습니다. 새로운 Set을 어떻게 생성하는지 보세요:

let mySet = new Set();

이렇게 하면 됩니다! 지금 당신은 빈 Set을 생성했습니다. 그런데 초기 값으로 Set을 생성하고 싶다면 어떻게 하나요? 문제 없습니다:

let fruitSet = new Set(['apple', 'banana', 'orange']);

이제 당신은 세 가지 과일로 구성된 Set을 가지고 있습니다. 기억하세요, 'apple'을 다시 추가하려고 해도 포함되지 않습니다. Set은 중복된 값을 유지하지 않습니다.

파라미터: Set에 무엇을 넣을 수 있나요?

자바스크립트의 Sets는 매우 유연합니다. 다양한 유형의 값을 추가할 수 있습니다:

숫자
문자열
객체
배열
심지어 다른 Sets도!

예제를 보겠습니다:

let mixedSet = new Set([1, 'two', {three: 3}, [4, 5]]);
console.log(mixedSet);

이 코드를 실행하면, 우리의 Set이 이 모든 다른 유형의 값을 포함하고 있음을 볼 수 있습니다.

예제: Sets와 놀아보기

이제 기본적인 것을 알았으니, Sets를 조금 더 재미있게 사용해 보겠습니다!

추가하고 삭제하기

let colorSet = new Set();

// 요소 추가
colorSet.add('red');
colorSet.add('blue');
colorSet.add('green');

console.log(colorSet); // 출력: Set(3) { 'red', 'blue', 'green' }

// 중복 추가 시도
colorSet.add('red');
console.log(colorSet); // 출력: Set(3) { 'red', 'blue', 'green' }

// 요소 삭제
colorSet.delete('blue');
console.log(colorSet); // 출력: Set(2) { 'red', 'green' }

보셨죠, 'red'을 다시 추가하려고 했을 때 Set은 변하지 않았습니다. Set의 매력은 여기 있습니다 - 중복을 자동으로 처리해 줍니다!

요소 확인

Set에 특정 값이 있는지 확인하고 싶다면 has() 메서드를 사용하세요:

let animalSet = new Set(['dog', 'cat', 'bird']);

console.log(animalSet.has('dog')); // 출력: true
console.log(animalSet.has('fish')); // 출력: false

Set의 크기

Set에 몇 개의 고유한 요소가 있는지 확인하려면 size 프로퍼티를 사용하세요:

let numberSet = new Set([1, 2, 3, 4, 5, 5, 5]);
console.log(numberSet.size); // 출력: 5

우리가 세 개의 5를 추가했지만, Set은 그것을 하나로 계산합니다!

수학적 Set 연산

이제 수학 모자를 쓰고, Sets로 할 수 있는 몇 가지 연산을 살펴보겠습니다.

합집합

합집합은 두 Sets를 결합하여 모든 고유한 요소를 유지합니다:

let set1 = new Set([1, 2, 3]);
let set2 = new Set([3, 4, 5]);

let unionSet = new Set([...set1, ...set2]);
console.log(unionSet); // 출력: Set(5) { 1, 2, 3, 4, 5 }

교집합

교집합은 두 Sets 모두에 존재하는 요소만 유지합니다:

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let intersectionSet = new Set([...set1].filter(x => set2.has(x)));
console.log(intersectionSet); // 출력: Set(2) { 3, 4 }

차집합

차집합은 첫 번째 Sets에 있지만 두 번째 Sets에 없는 요소를 유지합니다:

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let differenceSet = new Set([...set1].filter(x => !set2.has(x)));
console.log(differenceSet); // 출력: Set(2) { 1, 2 }

자바스크립트 Set 참조

이제 우리가 논의한 모든 메서드와 프로퍼티, 그리고 몇 가지 더 추가된 것을 정리한 표를 보여드리겠습니다:

메서드/프로퍼티	설명
`new Set()`	새로운 Set을 생성합니다
`add(value)`	새로운 요소를 Set에 추가합니다
`delete(value)`	Set에서 요소를 제거합니다
`has(value)`	값이 Set에 존재하는지 확인합니다
`clear()`	Set에서 모든 요소를 제거합니다
`size`	Set의 요소 개수를 반환합니다
`forEach(callback)`	Set의 각 요소에 대해 함수를 호출합니다
`values()`	Set의 모든 값을 포함하는 이터레이터를 반환합니다
`keys()`	`values()`와 동일합니다
`entries()`	Set의 [value, value] 쌍을 포함하는 이터레이터를 반환합니다

이제, 여러분은 자바스크립트 Sets에 대한 충분한 이해를 갖추셨습니다. Sets는 중복을 피하고 데이터를 유기적으로 유지하는 친구들과 같습니다 - 중복이 없는 데이터를 다루는 데 매우 유용합니다.

Sets를 생성하고 조작하는 연습을 계속하면, 곧 자연스럽게 Sets를 사용하게 될 것입니다. 누구 knows? Set을 어디서 많이 볼 수도 있을 것입니다 - 마치 그 한 쌍의 닦이지 않은 신발처럼, 두 개의 닦이지 않은 신발이 없습니다!

coding을 계속하시고, 호기심을 유지하시고, 기억하세요: Sets의 세계에서, 독특함이 게임의 이름입니다!

Credits: Image by storyset