JavaScript 열거형(Enum) 완벽 가이드: 객체로 구현하는 방법

JavaScript는 Enum(열거형)을 기본적으로 지원하지 않습니다. Java나 C# 같은 언어와 달리 별도의 enum 키워드가 없기 때문에, JavaScript에서 열거형을 사용하려면 객체(Object)를 활용해 직접 구현해야 합니다.

객체의 속성과 값을 이용하면 간단하게 열거형처럼 동작하는 구조를 만들 수 있으며, 관련된 상수들을 하나로 묶어 코드의 가독성과 유지보수성을 높일 수 있습니다.

JavaScript에서 열거형 구현 예제

다음은 객체를 사용하여 색상 열거형을 정의하고, 버튼 클릭 시 각 색상에 대응되는 값을 화면에 출력하는 전체 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScript의 열거형</h1>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 색상 값이 출력됩니다</h3>
<script>
    let resEle = document.querySelector(".result");
    let color = {
        orange: 1,
        red: 2,
        green: 3,
        blue: 4,
        pink: 5,
    };
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML += "color.orange = " + color.orange + "<br>";
        resEle.innerHTML += "color.red = " + color.red + "<br>";
        resEle.innerHTML += "color.green = " + color.green + "<br>";
        resEle.innerHTML += "color.blue = " + color.blue + "<br>";
        resEle.innerHTML += "color.pink = " + color.pink + "<br>";
    });
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.

JavaScript 열거형(Enum) 완벽 가이드: 객체로 구현하는 방법

여기서 '클릭하세요' 버튼을 누르면 아래와 같이 각 색상 이름에 해당하는 값들이 순서대로 출력됩니다.

JavaScript 열거형(Enum) 완벽 가이드: 객체로 구현하는 방법

코드 설명

열거형 정의: color 객체에 orange, red, green, blue, pink라는 속성을 만들고 각각 고유한 숫자 값을 할당했습니다. 이것이 JavaScript에서 열거형을 흉내 내는 가장 일반적인 방식입니다.
값 접근: 점 표기법(color.orange)을 사용해 각 상수 값에 쉽게 접근할 수 있습니다.
이벤트 처리: 버튼에 클릭 이벤트 리스너를 등록하여, 클릭할 때마다 결과 영역에 열거형 값들이 추가되도록 구현했습니다.

참고: Object.freeze()로 불변 열거형 만들기

실무에서는 열거형 값이 실수로 변경되지 않도록 Object.freeze()를 함께 사용하는 것이 좋습니다.

const Color = Object.freeze({
    ORANGE: 1,
    RED: 2,
    GREEN: 3,
    BLUE: 4,
    PINK: 5,
});

이렇게 하면 객체가 동결되어 외부에서 속성을 수정하거나 삭제할 수 없으므로, 진정한 의미의 상수 집합 역할을 하게 됩니다.