Array.prototype.includes()로 조건문 리팩토링하기

문제 상황

어드민 페이지에서 사용자 권한에 따라 메뉴를 노출하는 로직을 수정하던 중, 다음과 같은 코드를 발견했다.

if (userRole === 'admin' || userRole === 'manager' || userRole === 'supervisor' || userRole === 'operator') {
  showMenu();
}

권한이 추가될 때마다 OR 조건이 늘어나 가독성이 떨어지고 실수하기 쉬운 구조였다.

해결 방법

ES7(ES2016)에서 추가된 Array.prototype.includes()를 활용했다.

const allowedRoles = ['admin', 'manager', 'supervisor', 'operator'];

if (allowedRoles.includes(userRole)) {
  showMenu();
}

훨씬 명확해졌고, 권한 목록을 배열로 관리하면서 유지보수도 편해졌다.

브라우저 호환성

IE11은 지원하지 않지만, 프로젝트에서 이미 Babel을 사용하고 있어 polyfill로 해결했다. babel-preset-env에 useBuiltIns: 'usage' 옵션을 설정해두면 자동으로 필요한 polyfill이 포함된다.

추가 활용

비슷한 패턴을 프로젝트 전체에서 찾아 일괄 리팩토링했다. 특히 상태 체크 로직에서 효과가 좋았다.

// Before
if (status === 'pending' || status === 'processing' || status === 'reviewing') {
  return true;
}

// After
const inProgressStatuses = ['pending', 'processing', 'reviewing'];
return inProgressStatuses.includes(status);

작은 변화지만 코드가 의도를 더 명확하게 드러내게 되었다.