JS로 코딩을 하다보면 여러 데이터를 한 곳에 모아 관리할 때가 많습니다. 이럴 때 우리는 '자료구조'를 사용하게 됩니다. 특히 JS에서는 Array, Set, Map 이 세가지가 가장 기본적으로 많이 쓰이게 됩니다.

셋 다 여러 데이터를 담는 역할을 하는 공통점을 가지고 있지만 데이터를 저장하고 사용하는 방식에는 차이가 존재합니다.

📌 Array - 순서가 있는 컬렉션

JS에서 가장 익숙한 자료구조입니다. Array는 순서가 있는 데이터의 집합입니다. 여기서 '순서'란 각 데이터가 고유한 번호인 index를 갖는다는 의미입니다.

특징

• 순서 보장: 데이터는 추가된 순서대로 인덱스를 부여 받습니다.
• 중복 허용: 동일한 값을 여러 번 저장할 수 있습니다.
• index 기반 접근 : array[0]처럼 인덱스를 통해 특정 위치의 데이터에 빠르게 접근할 수 있습니다.
• 내장메서드: push, pop, forEach, map, filter 등 데이터를 다루는 메서드가 존재합니다.

순서가 중요하거나 리스트 형태의 데이터를 다룰 때 가장 적합합니다.
e.g) 게시물 목록, 사용자 리스트 등을 관리할 때

📌 Set - 중복을 허용하지 않는 유일한 값들의 집합

Set은 유일한 값을 저장하는 자료구조입니다. 가장 큰 특징은 중복을 허용하지 않는다는 점입니다. 순서가 중요하지 않고 오직, 값 자체의 유무가 중요할 때 사용됩니다.

특징

• 중복 불가: 동일한 값은 단 한번만 저장됩니다.
• 순서 없음: Array랑 다르게 인덱스로 특정 값에 접근할 수 없습니다.(삽입 순서는 기억하지만 인덱스 기반 접근은 불가능 합니다)
• 값의 존재 유무 확인에 용이: has 메서드를 통해서 특정 값이 존재하는지 매우 빠르게 확인 할 수 있습니다.

배열에서 중복된 값을 제거하거나 특정 데이터가 존재하는지 여부만 빠르게 확인하고 싶을 때 사용합니다.

📌 Map - 유연한 키(Key)를 가진 키-값 쌍의 컬렉션

Map은 key-value을 하나의 쌍으로 묶어 저장하는 자료구조입니다. 일반 객체와 비슷하지만 모든 타입의 값을 키로 사용할 수 있다는 장점이 있습니다.

특징

• 키-값 쌍: 모든 데이터는 고유한 키와 그에 대응하는 값으로 구성됩니다.
• 다양한 키 타입: 일반 객체는 문자열 또는 심볼만 키로 사용할 수 있지만, Map은 함수, 객체, 숫자 등 모든 값을 키로 사용할 수 있습니다.
• 순서 보장: 데이터는 추가된 순서대로 순회됩니다.
• 명확한 크기 확인: size property를 통해 저장된 요소의 개수를 알 수 있습니다.

데이터에 고유한 식별자(키)를 부여하여 관리하고 싶을 때, 특히 키가 문자열이 아닌 복잡한 데이터 타입일 때 유용합니다.

📌 성능

Array

• index로 조회 O(1)-상수 시간:fruits[2]처럼 인덱스를 알고 있다면, 배열의 크기와 상관없이 한번에 해당 요소를 찾아냅니다.

• 값으로 조회 O(n)-선형 시간: fruits.includes('딸기')처럼 특정 값을 찾으려면 배열의 처음부터 끝까지 하나씩 순회하며 비교해야 합니다. 최악의 경우 배열의 모든 요소를 확인해야 하므로 데이터양(n)이 늘어날수록 조회 시간도 정비례하여 늘어납니다.

const fruits = ['사과', '바나나', '딸기'];

// 인덱스로 접근 (O(1))
console.log(fruits[1]); // '바나나'

// 값으로 존재 여부 확인 (O(n))
console.log(fruits.includes('딸기')); // true

Set

• 값으로 조회: O(1)-상수 시간: Set은 내부적으로 해시 테이블 형태로 데이터를 저장합니다. 이 덕분에 특정 값의 존재 여부를 확인할 때 매우 빠르게 찾아낼 수 있습니다. 데이터의 양이 아무리 많아져도 조회 속도는 거의 일정합니다. '
  (Array의 includes와 비교되는 Set의 가장 큰 장점)

const uniqueNumbers = new Set([1, 2, 3]);

// 값 존재 여부 확인 (O(1))
console.log(uniqueNumbers.has(2)); // true
console.log(uniqueNumbers.has(4)); // false

Map

• 키로 조회 O(1)-상수 시간: Map도 Set과 마찬가지로 해시 기반으로 구현되어 있습니다. 따라서 키를 통해 값을 찾는 속도가 데이터의 양과 상관없이 거의 일정합니다. 이는 Map이 단순 객체보다 더 선호되는 이유 중 하나이기도 합니다.

const userMap = new Map();
const user1 = { id: 1, name: 'Alice' };
userMap.set(user1, 'Admin');

// 키로 데이터 접근 (O(1))
console.log(userMap.get(user1)); // 'Admin'

📌 표로 한눈에 보기

구분	데이터 구조	순서	중복	접근 방식	조회 성능	주요 사용 목적
Array	순서가 있는 값 목록	있음 (인덱스 기반)	허용	arr[0] 등 인덱스로 접근	값 기준 O(n), 인덱스 접근 O(1)	순차적 데이터 관리
Set	유일한 값 집합	없음	불가	has(value)로 존재 여부 확인	O(1)	중복 없는 데이터 관리, 존재 여부 빠르게 확인
Map	키-값 쌍 컬렉션	있음 (삽입 순서)	키는 불가, 값은 허용	map.get(key)	O(1)	고유 키로 데이터 관리