1. Object Lookup Table이란?
키-값 쌍으로 이루어진 객체를 사용하여 조건문을 대체하는 패턴이다. 많은 분기문이 필요한 상황에서 코드를 더 깔끔하고 관리하기 쉽게 만들어 준다.
1.1 기존의 문제점 ❌
if문이나 switch문을 사용하면 새로운 요구사항이 추가될 때마다 코드가 계속 길어진다
// ❌ if문 사용 - 조건이 늘어날수록 코드가 길어짐
function getUserType(type) {
if (type === 'ADMIN') return '관리자';
if (type === 'INSTRUCTOR') return '강사';
if (type === 'STUDENT') return '수강생';
return '해당 없음';
}
// ❌ switch문도 마찬가지
function getUserType(type) {
switch(type) {
case 'ADMIN': return '관리자';
case 'INSTRUCTOR': return '강사';
case 'STUDENT': return '수강생';
default: return '해당 없음';
}
}2. Object Lookup Table 적용하기 ✨
2.1 기본적인 사용법
function getUserType(type) {
const USER_TYPE = {
ADMIN: '관리자',
INSTRUCTOR: '강사',
STUDENT: '수강생'
};
return USER_TYPE[type] || '해당 없음';
}여기서 USER_TYPE은 상수로 선언되어 있어 값이 변경되지 않음을 명시한다. Computed Property Name을 사용해서 USER_TYPE[type]으로 해당 타입의 값을 가져올 수 있다.
하지만 || 연산자는 falsy값0, ''등)을 제대로 처리하지 못할 수 있다.
const USER_TYPE = {
ADMIN: '관리자',
STUDENT: '학생',
SCORE: 0 // 점수가 0점인 경우
};
// ❌ 0점이어도 '해당 없음' 출력
console.log(USER_TYPE['SCORE'] || '해당 없음'); // '해당 없음'개선해보자
2.2 null병합 연산자(??)를 사용한 더 안전한 방식
?? 연산자는 null이나 undefined일 때만 우측 값을 반환
function getUserType(type) {
const USER_TYPE = {
ADMIN: '관리자',
INSTRUCTOR: '강사',
STUDENT: '수강생',
UNDEFINED: '해당 없음' // 기본값도 상수로 관리
};
return USER_TYPE[type] ?? USER_TYPE[UNDEFINED];
}null 병합 연산자(??)를 사용하면 0이나 빈 문자열도 안전하게 처리할 수 있다. 기본값도 USER_TYPE객체 안에서 관리하면 더 일관성 있게 코드를 작성할 수 있다.
2.3 임시 변수 제거
function getUserType(type) {
return {
ADMIN: '관리자',
INSTRUCTOR: '강사',
STUDENT: '수강생'
}[type] ?? '해당 없음';
}이렇게 하면 임시 변수 없이도 깔끔하게 코드를 작성할 수 있다. 객체가 매번 새로 생성되기는 하지만, 현재 JavaScript 엔진에서는 이 정드 크기의 객체 생성 비용은 미미하므로 실제 성능에 큰 영향을 주지 않는다.
정리 💫
Object Lookup Table 패턴을 사용하면
- 코드가 더 깔끔해진다
- 새로운 타입 추가가 쉬워진다(객체에 속성만 추가하면 됨)
- 유지보수가 편해진다
- 실수할 가능성이 줄어든다
Hello