반응형
Set, Map, 배열의 차이점과 활용법
JavaScript에서는 데이터를 저장하고 관리하는 다양한 방법이 있다.
배열(Array), Set, Map은 각각 고유한 특성을 가지며, 상황에 따라 적절한 자료구조를 선택해야 한다.
1. 배열 (Array)
특징
- 순서가 있는 데이터 구조
- 중복 허용
index
(숫자)를 기반으로 요소에 접근
배열 사용 예제
const arr = ["apple", "banana", "cherry", "banana"]; // 중복 허용
console.log(arr[1]); // "banana"
배열 사용 시 장점
✔ 순서가 있는 데이터 저장이 가능
✔ index 기반 접근(arr[0]
)이 가능
✔ map()
, filter()
, reduce()
등 강력한 배열 메서드 지원
단점
- 중복 허용 (중복을 제거하려면
Set
필요) - 검색 속도가 느림 (
indexOf()
,includes()
는O(n)
) - key-value 형식 데이터 저장 불가 (
Map
필요)
2. Set (집합)
특징
- 순서가 없는 데이터 구조
- 중복을 자동으로 제거
- 배열보다 검색 속도가 빠름 (
O(1)
)
Set 사용 예제
const set = new Set(["apple", "banana", "cherry", "banana"]); // 중복 제거됨
console.log(set); // Set { "apple", "banana", "cherry" }
// 값 추가
set.add("grape");
console.log(set); // Set { "apple", "banana", "cherry", "grape" }
// 값 존재 여부 확인
console.log(set.has("banana")); // true
// 값 삭제
set.delete("apple");
console.log(set); // Set { "banana", "cherry", "grape" }
// Set → 배열 변환
const arrFromSet = [...set];
console.log(arrFromSet); // ["banana", "cherry", "grape"]
Set 사용 시 장점
✔ 중복 자동 제거 (배열보다 유용함)
✔ 검색 속도가 빠름 (has()
는 O(1)
)
✔ 배열로 변환 쉬움 (Array.from(set)
, [...set]
)
단점
- 순서 보장 안 됨
- index 기반 접근 불가능 (
set[0]
사용 불가) - key-value 저장 불가능 (
Map
필요)
3. Map (키-값 저장)
특징
- 객체(Object)처럼 key-value 형식으로 저장 가능
- 모든 타입의 key 사용 가능 (
Object
는 문자열만 가능) - 검색 속도가 빠름 (
O(1)
)
Map 사용 예제
const map = new Map();
// 값 추가 (key-value)
map.set("name", "Alice");
map.set("age", 25);
map.set("job", "Developer");
console.log(map.get("name")); // "Alice"
console.log(map.get("age")); // 25
// 값 존재 여부 확인
console.log(map.has("job")); // true
// 값 삭제
map.delete("age");
console.log(map); // Map { "name" => "Alice", "job" => "Developer" }
// key-value 반복
map.forEach((value, key) => {
console.log(key, value);
});
// name Alice
// job Developer
Map 사용 시 장점
✔ 객체보다 성능이 뛰어남 (특히 많은 데이터를 다룰 때)
✔ 모든 타입(key) 저장 가능 (Map.set(obj, value)
)
✔ 반복문(forEach()
, for...of
) 사용 용이
✔ size
속성으로 크기 확인 가능 (map.size
)
단점
- JSON으로 변환하려면
Object.fromEntries(map)
사용 필요 - 배열보다 메모리 사용량이 많음
Set, Map, 배열의 차이점 정리
비교 항목 | 배열 (Array) | Set | Map |
---|---|---|---|
데이터 구조 | 순서가 있는 리스트 | 중복 없는 집합 | key-value 저장소 |
중복 허용 | 허용 | 불가 | 가능 (key 다르면 허용) |
순서 유지 | 유지됨 | 보장 안 됨 | key 순서 유지 |
index 접근 | 가능 (arr[0] ) |
불가능 | 불가능 |
검색 속도 | O(n) (느림) |
O(1) (빠름) |
O(1) (빠름) |
key-value 저장 | 불가능 | 불가능 | 가능 |
반복 가능 (forEach ) |
가능 | 가능 | 가능 |
사용 예 | 리스트, 순서가 있는 데이터 | 중복 제거, 빠른 검색 | 객체 대체, 키-값 저장 |
언제 어떤 자료구조를 사용해야 할까?
사용 상황 | 추천 자료구조 |
---|---|
리스트를 저장하고 순서 유지해야 함 | 배열(Array) |
중복을 자동으로 제거해야 함 | Set |
데이터를 key-value 형태로 저장해야 함 | Map |
빠른 데이터 검색이 필요함 | Set 또는 Map |
객체(Object)보다 더 강력한 key-value 저장이 필요함 | Map |
대량의 데이터에서 검색을 빠르게 하고 싶음 | Set 또는 Map |
결론
- 순서가 있는 데이터는
배열(Array)
이 적합 - 중복을 제거해야 하면
Set
사용 - Key-Value 저장이 필요하면
Map
사용 - 검색이 많으면
Set
과Map
이 더 빠름 (O(1)
) - 객체(Object)는
Map
보다 느릴 수 있음 (많은 데이터를 다룰 때는Map
이 유리함)
👉 배열이 기본이지만, 중복 제거는 Set
, Key-Value 저장은 Map
을 활용하면 더욱 최적화된 코드 작성 가능
반응형
'Frontend > Javascript Typescript' 카테고리의 다른 글
[Javascript] 객체 생성자, 객체 리터럴, JSON (2) | 2025.03.20 |
---|---|
[Javascript] 자주 쓰이는 배열 메서드(map(), filter() 등) (0) | 2025.03.19 |
[Javascript] Array.from() 활용하여 배열 생성하기 (0) | 2025.03.19 |
DOM과 DOM 조작하기 (1) | 2025.03.18 |
[Javascript] 함수 선언식, 함수 표현식, 화살표 함수 비교 (1) | 2025.03.14 |