해시 테이블과 JavaScript 객체

 

해시 테이블과 JavaScript 객체

해시 테이블이란?

해시 테이블(Hash Table): 키(key)를 값(value)에 매핑하는 자료구조

// 전화번호부와 비슷
키          값
─────────  ──────────
"zzimzzim" → "010-1234-5678"
"claude"   → "010-9876-5432"
"alice"    → "010-5555-6666"

특징:

• 키로 값을 빠르게 찾을 수 있음 (O(1) 평균 시간 복잡도)
• 순서가 보장되지 않음 (원래는, ES2015 이후 JavaScript는 삽입 순서 유지)

JavaScript 객체는 해시 테이블

const user = {
  name: 'zzimzzim',
  age: 25,
  job: 'developer'
};

// 내부적으로는:
해시 테이블
┌──────────┬────────────┐
│   키      │    값      │
├──────────┼────────────┤
│ "name"   │ "zzimzzim" │
│ "age"    │ 25         │
│ "job"    │ "developer"│
└──────────┴────────────┘

배열 vs 객체 (해시 테이블)

배열 - 인덱스는 숫자

const arr = ['a', 'b', 'c'];

// 내부 구조 (단순화)
인덱스(숫자)    값
────────────  ───
0            → 'a'
1            → 'b'
2            → 'c'

arr[0]  // 'a' - 숫자 인덱스 사용
arr[1]  // 'b'

객체 - 인덱스는 문자열(프로퍼티 키)

const obj = {
  name: 'zzimzzim',
  age: 25
};

// 내부 구조
인덱스(문자열)    값
──────────────  ────
"name"         → 'zzimzzim'
"age"          → 25

obj['name']  // 'zzimzzim' - 문자열 키 사용
obj.name     // 'zzimzzim' - 점 표기법도 가능

해시 함수의 동작

해시 테이블은 해시 함수를 사용해 키를 저장 위치로 변환합니다:

// 개념적 동작
const obj = { name: 'zzimzzim' };

// 내부 동작 (단순화):
// 1. 키 "name"을 해시 함수에 넣음
hash("name") → 12345  // 저장 위치

// 2. 12345 위치에 값 저장
메모리[12345] = "zzimzzim"

// 3. 값 찾을 때
obj.name
→ hash("name") → 12345
→ 메모리[12345] → "zzimzzim"

왜 빠른가?

const user = {
  id: 1,
  name: 'zzimzzim',
  email: 'zzim@example.com',
  // ... 1000개의 프로퍼티
};

// 배열이라면:
// arr[999]를 찾으려면 999번 순회 필요 (최악의 경우)

// 해시 테이블(객체)라면:
user.email  // 바로 찾음 (O(1))
// 1. "email" 해시 계산
// 2. 해당 위치에서 바로 가져옴

시간 복잡도:

• 배열 검색: O(n) - 모든 요소 확인 필요
• 해시 테이블: O(1) - 바로 찾음

실제 예시

객체를 해시 테이블로 사용

// 사용자 데이터를 ID로 빠르게 찾기
const users = {
  'user_1': { name: 'Alice', age: 25 },
  'user_2': { name: 'Bob', age: 30 },
  'user_3': { name: 'Charlie', age: 35 }
};

// 빠른 조회
const user = users['user_2'];  // O(1) - 바로 찾음
console.log(user.name);  // 'Bob'

배열로 했다면?

// 배열로 저장
const usersArr = [
  { id: 'user_1', name: 'Alice', age: 25 },
  { id: 'user_2', name: 'Bob', age: 30 },
  { id: 'user_3', name: 'Charlie', age: 35 }
];

// 느린 조회
const user = usersArr.find(u => u.id === 'user_2');  // O(n) - 순회 필요

Map도 해시 테이블

// ES6 Map - 명시적 해시 테이블
const map = new Map();
map.set('name', 'zzimzzim');
map.set('age', 25);

// 객체와 비슷하지만:
// - 키로 모든 타입 사용 가능 (객체, 함수 등)
// - 순서 보장
// - size 프로퍼티 제공

map.get('name');  // 'zzimzzim' - O(1)

객체 vs Map

// 일반 객체
const obj = {
  name: 'zzimzzim',
  age: 25
};

// Map
const map = new Map([
  ['name', 'zzimzzim'],
  ['age', 25]
]);

// 둘 다 해시 테이블!
// 하지만 Map은:
// - 키로 객체도 사용 가능
// - 반복이 더 쉬움
// - 크기를 쉽게 알 수 있음

해시 충돌

같은 해시 값이 나오는 경우:

// 개념적 예시
hash("name") → 100
hash("mane") → 100  // 충돌!

// 해결 방법:
메모리[100] = [
  { key: "name", value: "zzimzzim" },
  { key: "mane", value: "horse hair" }
]

// 체이닝으로 둘 다 저장

JavaScript 엔진이 내부적으로 처리합니다.

정리

"JavaScript 객체는 해시 테이블"의 의미:

const obj = {
  name: 'zzimzzim',
  age: 25,
  job: 'developer'
};

// 프로퍼티 키를 인덱스로 사용
obj['name']  // 키로 값을 빠르게 조회 (O(1))
obj.age      // 점 표기법도 내부적으로는 동일

// 해시 테이블처럼:
// - 키 → 값 매핑
// - 빠른 조회/삽입/삭제
// - 순서 유지 (ES2015+)

핵심:

• 해시 테이블: 키-값 쌍을 저장하는 자료구조
• JavaScript 객체: 프로퍼티 키를 해시 테이블의 키로 사용
• 빠른 접근: 키로 값을 O(1)에 찾을 수 있음

비유:

• 배열: 책장의 순서대로 꽂힌 책 📚 (0, 1, 2...)
• 객체(해시 테이블): 도서관의 청구기호 시스템 🏛️ (제목으로 바로 찾기)