JavaScript 컬렉션 (Array, Object, Set, Map)

JavaScript 컬렉션

자바스크립트에서 올바른 데이터 구조를 선택하는 것은 효율적이고 가독성 높은 코드를 작성하는 핵심입니다. 이 가이드는 네 가지 주요 컬렉션 자료형(Array, Object, Set, Map)의 특징과 주요 메서드를 정리하고, 실제 시나리오에 맞는 최적의 자료형을 선택하는 방법을 안내합니다.

---

1. Array: 순서가 있는 데이터 목록

배열은 순서가 있는 값의 목록을 저장하는 데 가장 기본적인 자료형입니다. 강력한 내장 메서드를 통해 데이터 목록을 순회하고 변환하는 데 최적화되어 있습니다.

✔ 언제 사용해야 할까요?

• 리스트 처리: API 응답으로 받은 데이터 목록처럼 순서가 중요한 데이터를 다룰 때
• 정렬 및 필터링: sort(), filter() 등 강력한 메서드를 활용해 데이터를 가공해야 할 때

메서드	설명 / 예시
map()	배열의 모든 요소를 변환하여 새로운 배열을 반환합니다. 예시: arr.map(x => x * 2)
filter()	주어진 조건에 맞는 요소만 추출하여 새로운 배열을 반환합니다. 예시: arr.filter(x => x > 10)
reduce()	배열의 각 요소를 순회하며 누적 계산을 수행하고 단일 값을 반환합니다. (합계, 평균 등) 예시: arr.reduce((acc, val) => acc + val, 0)
find()	조건에 맞는 첫 번째 요소를 반환합니다.
includes()	배열에 특정 값이 존재하는지 여부를 true/false로 반환합니다. 예시: arr.includes('apple')
sort()	배열 요소를 정렬합니다. (주의: 기본적으로 문자열 유니코드 순서로 정렬되므로, 숫자 정렬 시 비교 함수 필요) 예시: arr.sort((a, b) => a - b)
flat()	중첩된 배열을 지정된 깊이까지 평탄화합니다. 예시: [[1], [2, 3]].flat() → [1, 2, 3]
Array.from(iterable)	이터러블(iterable) 객체나 유사 배열 객체를 실제 배열로 변환합니다. 예시: Array.from('abc') → ['a', 'b', 'c']

---

2. Object: 키-값 구조의 속성 저장소

객체는 문자열 또는 심볼(Symbol) 키를 사용하여 값의 컬렉션을 저장합니다. 데이터의 속성을 설명하거나, 고유 ID를 키로 사용하여 데이터에 빠르게 접근할 때 유용합니다.

✔ 언제 사용해야 할까요?

• 키-값 구조: 데이터의 속성을 명확한 이름(키)으로 저장하고 싶을 때
• 빠른 조회: 키를 통해 값에 O(1) 시간 복잡도로 접근해야 할 때 (예: ID로 사용자 정보 찾기)

메서드 / 연산자	설명 / 예시
Object.keys(obj)	객체의 키(key)들로 이루어진 배열을 반환합니다.
Object.values(obj)	객체의 값(value)들로 이루어진 배열을 반환합니다.
Object.entries(obj)	[key, value] 쌍으로 이루어진 배열을 반환합니다.
Object.fromEntries(arr)	[[key, value]] 형태의 배열을 다시 객체로 변환합니다.
"key" in obj	객체에 특정 키가 존재하는지 확인하는 in 연산자입니다.
hasOwnProperty()	객체가 상속받은 속성이 아닌, 자기 자신의 속성으로 특정 키를 가지고 있는지 확인합니다.
delete obj.key	객체의 속성을 삭제합니다.

💡 활용 예시: Object.entries와 map을 이용한 객체 값 변환

const obj = { a: 1, b: 2 };

// 1. Object.entries로 [키, 값] 배열로 변환
// 2. map으로 각 값에 2를 곱한 새 배열 생성
const doubled = Object.entries(obj).map(([k, v]) => [k, v * 2]);

// 3. Object.fromEntries로 배열을 다시 객체로 변환
console.log(Object.fromEntries(doubled)); // { a: 2, b: 4 }

---

3. Set: 고유한 값들의 집합

Set은 중복을 허용하지 않는 유일한 값들의 컬렉션입니다. 값의 존재 여부를 빠르게 확인하거나 배열에서 중복을 제거하는 용도로 탁월합니다.

✔ 언제 사용해야 할까요?

• 중복 제거: 배열 등에서 중복된 값을 손쉽게 제거하고 싶을 때
• 빠른 존재 여부 확인: 특정 값이 컬렉션에 포함되어 있는지 O(1) 시간 복잡도로 확인해야 할 때

메서드	설명
add(value)	값을 추가합니다. (이미 존재하는 값이면 무시됩니다)
has(value)	특정 값이 포함되어 있는지 확인합니다.
delete(value)	값을 제거합니다.
clear()	모든 값을 제거합니다.
forEach(cb)	각 요소에 대해 콜백 함수를 실행하며 반복합니다.
size	요소의 개수를 확인합니다. (속성)

💡 활용 예시: Set을 배열로 변환

const set = new Set(['a', 'b']);
set.add('c'); // {'a', 'b', 'c'}
set.add('a'); // 중복이므로 무시됨

// 전개 구문(spread syntax) 또는 Array.from 사용
const array = [...set]; // ['a', 'b', 'c']

---

4. Map: 순서가 보장되는 유연한 키-값 저장소

Map은 Object와 유사하지만, 키로 모든 타입의 값을 사용할 수 있으며(객체, 함수 등), 키가 삽입된 순서를 기억한다는 중요한 차이점이 있습니다.

✔ 언제 사용해야 할까요?

• 유연한 키 타입: 키가 문자열이 아닌 객체, 함수 등 다양한 타입이어야 할 때
• 순서 보존: 요소가 삽입된 순서대로 순회해야 할 때

메서드	설명
set(key, value)	키-값 쌍을 추가합니다.
get(key)	키에 해당하는 값을 가져옵니다.
has(key)	특정 키가 존재하는지 확인합니다.
delete(key)	키-값 쌍을 삭제합니다.
forEach((value, key))	각 요소에 대해 콜백 함수를 실행하며 반복합니다.
size	요소의 개수를 확인합니다. (속성)

💡 활용 예시: Map을 배열로 변환

const map = new Map();
map.set('user1', 100);
map.set({ id: 2 }, 200); // 키로 객체 사용 가능

// Array.from을 사용하여 [키, 값] 쌍의 배열로 변환
const array = Array.from(map.entries()); 
// [['user1', 100], [{ id: 2 }, 200]]

---

5. 실전 패턴별 컬렉션 선택 가이드

패턴 / 시나리오	추천 자료형	이유 및 예시
리스트 처리 (데이터 목록)	Array	map(), filter() 등 강력한 내장 메서드를 지원하여 데이터 가공이 용이합니다.
고유한 값 저장 (중복 제거)	Set	생성자에 배열을 전달하는 것만으로 간단하게 중복을 제거할 수 있습니다. 예시: const unique =;
정적인 키-값 구조 (속성 저장)	Object	가장 일반적이고 간편한 키-값 저장소입니다. 예시: { name: 'Heeseong', age: 28 }
유연한 키 타입과 순서 보존	Map	키로 어떤 값이든 사용할 수 있고, 삽입된 순서가 유지되어야 할 때 적합합니다. 예시: new Map([['user1', score]])
빠른 존재 여부 확인	Set 또는 Object	값의 존재는 set.has(val), 키의 존재는 obj[key]!== undefined로 O(1) 조회가 가능합니다.
ID로 사용자 빠르게 찾기	Object 또는 Map	ID가 문자열/숫자라면 Object가, 다른 타입이거나 순서가 중요하다면 Map이 좋습니다.
키를 기준으로 데이터 정렬	Map → Array	Map은 순서를 보장하므로, Array.from(map).sort(...)를 통해 정렬된 배열을 얻을 수 있습니다.