JavaScript의 Map과 Set 2주차 탐구

JavaScript는 웹 개발의 기본 언어로서, 다양한 자료구조를 통해 데이터를 효율적으로 처리할 수 있는 방법을 제공합니다. 특히 `Map`과 `Set` 자료구조는 데이터의 구성 및 검색을 더욱 간편하고 효율적으로 할 수 있도록 도와줍니다.

이번 글에서는 이 두 가지 자료구조의 특징과 사용 방법에 대해 깊이 있게 탐구해 보겠습니다.

Map 키와 값의 조합

Map은 키(key)와 값(value)의 쌍으로 데이터를 저장할 수 있는 자료구조입니다. 이 자료구조의 가장 큰 장점은 키에 어떤 데이터 타입도 사용할 수 있다는 점입니다.

즉, 문자열, 숫자, 객체 등 다양한 타입의 데이터를 키로 사용할 수 있으며, 이러한 키는 삽입된 순서대로 정렬됩니다.

Map의 주요 기능

1. 데이터 저장 및 검색: Map을 사용하면 set() 메소드를 통해 데이터를 쉽게 저장할 수 있으며, get() 메소드를 통해 해당 키에 대한 값을 검색할 수 있습니다.
2. 키와 값의 반복: keys(), values(), entries() 메소드를 사용하여 각각의 키, 값, 그리고 키-값 쌍을 반복할 수 있습니다.
3. 사이즈 확인: size 프로퍼티를 사용하여 현재 Map에 저장된 요소의 개수를 쉽게 확인할 수 있습니다.
4. 존재 여부 확인: has() 메소드를 통해 특정 키가 존재하는지 확인할 수 있습니다.

Map의 사용 예시

“`javascript
const myMap = new Map();
myMap.set(‘one’, 1);
myMap.set(‘two’, 2);
myMap.set(‘three’, 3);

console.log(myMap.get(‘two’)); // 2
console.log(myMap.size); // 3

for (const key of myMap.keys()) {
console.log(key); // ‘one’, ‘two’, ‘three’
}

for (const value of myMap.values()) {
console.log(value); // 1, 2, 3
}

for (const entry of myMap.entries()) {
console.log(entry); // [ ‘one’, 1 ], [ ‘two’, 2 ], [ ‘three’, 3 ]
}
“`

위의 코드 예시를 통해 Map의 기본 사용법을 확인할 수 있습니다. 다양한 타입의 키를 사용할 수 있으며, 데이터의 검색과 반복이 용이하다는 점이 특징입니다.

기능	메소드/프로퍼티	설명
데이터 추가	set(key, value)	주어진 키에 값을 설정
데이터 검색	get(key)	주어진 키에 대한 값을 반환
요소 개수 확인	size	현재 Map에 저장된 요소의 개수 확인
키 존재 여부 확인	has(key)	주어진 키가 존재하는지 확인
키 반복	keys()	모든 키를 반복하여 반환
값 반복	values()	모든 값을 반복하여 반환
키-값 쌍 반복	entries()	모든 키-값 쌍을 반복하여 반환

Set 고유한 값의 집합

Set은 중복되지 않는 고유한 값을 저장하는 자료구조입니다. 이는 값만 저장하며, 키는 저장하지 않기 때문에 요소들이 유일한 특성을 유지합니다.

Set의 주된 목적은 중복된 값을 자동으로 제거하고, 고유한 값만을 저장하는 것입니다.

Set의 주요 기능

1. 값 추가 및 검색: add() 메소드를 사용하여 값을 추가하고, has() 메소드를 사용하여 특정 값이 존재하는지 확인할 수 있습니다.
2. 값의 개수 확인: size 프로퍼티를 통해 Set에 저장된 값의 개수를 확인할 수 있습니다.
3. 값 반복: values() 메소드를 사용하여 저장된 값을 반복할 수 있습니다.
4. 값 삭제 및 전체 삭제: delete() 메소드를 사용하여 특정 값을 삭제하고, clear() 메소드를 통해 모든 값을 삭제할 수 있습니다.

Set의 사용 예시

“`javascript
const mySet = new Set();
mySet.add(‘value1’);
mySet.add(‘value2’);
mySet.add(‘value3’);
mySet.add(‘value1’); // 중복된 값은 무시됨

console.log(mySet.size); // 3
console.log(mySet.has(‘value2’)); // true

for (const value of mySet.values()) {
console.log(value); // ‘value1’, ‘value2’, ‘value3’
}
“`

위의 예시에서는 Set이 중복된 값을 허용하지 않음을 보여줍니다. value1을 두 번 추가했지만, 두 번째 추가는 무시되었습니다.

이처럼 Set은 고유한 값만을 저장하여 데이터의 무결성을 유지합니다.

기능	메소드/프로퍼티	설명
값 추가	add(value)	주어진 값을 추가
값 검색	has(value)	주어진 값이 존재하는지 확인
요소 개수 확인	size	현재 Set에 저장된 요소의 개수 확인
값 삭제	delete(value)	주어진 값을 삭제
모든 값 삭제	clear()	모든 값을 삭제
값 반복	values()	모든 값을 반복하여 반환

다른 내용도 보러가기 #1

Map과 Set의 차이점

Map과 Set은 서로 다른 목적을 가지고 설계된 자료구조입니다. Map은 키-값 쌍을 저장하는 데 중점을 두고 있으며, Set은 고유한 값만 저장하는 데 집중합니다.

아래는 두 자료구조의 주요 차이점을 정리한 표입니다.

특성	Map	Set
저장 방식	키-값 쌍	값만 (고유한 값)
키 사용	키를 사용하여 값에 접근 가능	키를 사용하지 않음
중복 허용 여부	중복된 키는 허용되지 않음	중복된 값은 허용되지 않음
데이터 타입	키는 다양한 데이터 타입 가능	값은 중복되지 않는 데이터 타입
주요 메소드	set(), get(), has() 등	add(), has(), delete() 등

결론

JavaScript의 Map과 Set은 각각의 특성과 기능을 통해 데이터를 효율적으로 저장하고 관리할 수 있는 방법을 제공합니다. 복잡한 데이터 구조를 다룰 때 이 두 자료구조는 개발자에게 많은 도움이 될 수 있습니다.

Map을 사용하여 키-값 쌍으로 데이터를 저장하고, Set을 통해 고유한 값만을 저장함으로써 데이터의 무결성을 유지할 수 있습니다. 이번 탐구를 통해 Map과 Set의 다양한 기능과 사용법을 이해하는 데 도움이 되었기를 바랍니다.

이러한 자료구조를 활용하여 더욱 효율적인 JavaScript 프로그래밍을 해보시기 바랍니다.

관련 영상

같이 보면 좋은 글