✨ 실무에서 자주 쓰는 자료구조 _ 배열, 객체, 집합(Set), Map
안녕하세요! 오늘은 CS 지식인 자료구조에 대해 글을 작성하고자 합니다!
수 많은 자료구조의 내용 중 프론트엔드가 실무에서 많이 사용하게 되는 네 가지 자료구조에 대해 작성해보고자 합니다!
- 배열 (Array)
- 객체 (Object)
- 집합 (Set)
- 맵 (Map)
개발을 하면서 이미 다들 꽤나 익숙해졌을 자료구조들이죠!
하지만 막상 코딩할 땐 "이럴 땐 뭘 써야 하지?" 고민될 때가 있어서, 각각 언제 어떻게 쓰면 좋은지 정리해보려고 합니다!
✅ 배열 (Array)
가장 기본적이면서 가장 많이 쓰는 자료구조입니다.
순서가 있는 데이터 목록을 다룰 때 정말 자주 등장해요.
const fruits = ['사과', '바나나', '포도']
console.log(fruits[1]) // 바나나(배열의 순서는 0부터 시작합니다)
📌 특징
- 순서 있음 (index 기반)
- 중복 허용
- 반복 처리에 최적화 (map, filter, forEach 등 활용 가능한 메서드 많음)
📌 언제 쓸까요?
- 리스트 형태로 뭔가를 저장하고 순회할 때
- 특정 조건으로 필터링하거나 정렬할 때
- 결과 값을 쭉 모아서 보여줄 때
ex) 쇼핑몰 상품 목록, 댓글 리스트 등
✅ 객체 (Object)
객체는 키-값 쌍으로 이루어진 데이터를 저장할 수 있습니다.
무언가를 "이름"이나 "속성"으로 관리하고 싶을 때 좋아요!
const user = { name: '주연', age: 25, isAdmin: true }
console.log(user.name) // '주연'📌 특징
- 키는 문자열(또는 Symbol)만 가능
- 순서가 중요하지 않은 경우에 적합
- 속성 접근이 편함 (user.name 또는 user['name'])
📌 언제 쓸까요?
- 사용자 정보 같은 속성 데이터를 저장할 때
- 서버에서 받은 JSON 데이터 다룰 때
- 컴포넌트 상태 객체로 관리할 때 (예: useState({}))
참고로 키가 문자열로 고정된다는 점 때문에 더 유연한 데이터 키를 쓰고싶다면 다음에 소개하는 Map을 사용하는게 더 나을 수 있습니다!
✅ 집합 (Set)
Set은 중복을 허용하지 않는 유일한 값들의 집합입니다.
배열과 비슷해 보이지만, 중복 제거가 자동으로 되는 게 큰 장점입니다!
const numbers = [1, 2, 2, 3] const unique = [...new Set(numbers)]
console.log(unique) // [1, 2, 3]
📌 특징
- 중복 없음
- 순서 있음 (삽입 순서를 유지)
- 값만 저장 가능 (키 없음)
- add, has, delete 등의 메서드 사용 가능
📌 언제 쓸까요?
- 배열에서 중복 제거할 때
- 유일한 값 목록을 관리할 때
- 값의 존재 여부를 빠르게 체크할 때 (set.has(value))
두 배열간의 교집합이나 차집합을 구할 때 set을 자주 사용합니다! => set은 중복을 제거하고, 빠른 검색이 가능하기 때문에!
- 중복 제거: Set은 자동으로 중복된 값을 제거하므로, 배열 간의 교집합이나 차집합을 구할 때 중복된 요소를 손쉽게 처리할 수 있습니다.
- 빠른 검색: Set은 해시 기반으로 구현되므로 요소 검색 속도가 빠릅니다. 배열을 순차적으로 비교하는 것보다 Set을 사용해 교집합이나 차집합을 더 효율적으로 구할 수 있습니다.
*해시값을 비교하면 검색 속도가 더 빠른 이유*
1. 해시는 복잡한 데이터를 숫자로 변환한 것입니다.
- 문자열이나 객체처럼 비교하기 복잡한 데이터를 간단한 숫자로 바꾼 값이 해시값입니다.
- 예: apple → 530
2. 숫자 비교는 문자열 비교보다 훨씬 빠르다.
- 컴퓨터는 문자열보다 숫자를 더 빠르게 처리합니다.
- 문자열 "banana" vs "bandit"을 비교하려면 글자 하나씩 확인해야 하지만,
- 해시값 609 vs 625는 한 번에 비교 가능!
- 특히 숫자끼리 비교는 CPU 수준에서 즉시 가능함으로 더 빠르다!
✅ Map (맵)
Map은 객체처럼 키-값 쌍으로 데이터를 저장하지만, 객체보다 더 유연하고 기능이 많습니다.
특히 키로 어떤 타입이든 사용 가능하다는 점이 가장 큰 차이예요!!
const map = new Map() map.set('name', '주연') map.set({ id: 1 }, '데이터')
console.log(map.get('name')) // '주연'📌 특징
- 키로 문자열 외에도 숫자, 객체 등 가능
- 삽입 순서 유지
- size, has, delete, clear 등 다양한 메서드 제공
📌 언제 쓸까요?
- 동적으로 키를 관리해야 할 때
- 복잡한 데이터를 키로 써야 할 때 (예: 객체를 키로)
- 고성능 키-값 조회가 필요할 때
✅ 정리
| 자료구조 | 중복 | 키 타입 | 순서 | 특징 |
| 배열(Array) | O | 숫자(index) | O | 순서 있는 리스트 |
| 객체(Object) | O | 문자열 | O | 키-값 쌍 저장 |
| Set | X | 없음 | O | 중복 없는 리스트 |
| Map | O | 모든 타입 | O | 유연한 키-값 저장 |
