열거형으로 자바스크립트 개선하기

열거형(Enums)은 많은 프로그래밍 언어에서 공통적인 데이터 구조 기능입니다. JavaScript에는 기본적으로 이 기능이 없지만 빠르고 쉽게 추가할 수 있습니다.

열거형이란 무엇입니까?

코드로 이동하여 Enum을 만드는 방법을 배우기 전에 Enum이 무엇인지 논의해야 합니다. 배열부터 시작하겠습니다. 이 배열은 웹 앱에서 발생할 수 있는 가능한 오류 유형 목록입니다.

const errors = ['Data Error', 'Lunch Error', 'Mom Error'];

배열을 사용하면 나중에 사용할 수 있는 오류 유형 목록을 저장할 수 있지만 개발자는 배열에 나타나는 이름과 순서를 기억해야 합니다.

console.log( errors[0] );
//if you remember that zero refers to 'DataError'
//then you get the right value.

Enumeration은 각 값이 문자열 이름을 키로 갖는 편집할 수 없는 값 목록을 생성하여 이 문제를 해결합니다.

따라서 이것은 JavaScript 객체로 더 밀접하게 복제될 수 있습니다.

const errors = {
  DATAERROR: 'Data Error',
  LUNCHERROR: 'Lunch Error',
  MOMERROR: 'Mom Error'
}

객체를 사용하면 각 값의 위치를 ​​기억해야 하는 이 문제를 피할 수 있습니다.

console.log( errors['DATAERROR'] );

여전히 키나 값을 편집하거나 제거할 수 있는 문제가 있습니다.

따라서 Enumeration은 런타임에 변경할 수 없는 키-값 쌍 목록입니다.

자바스크립트 열거형 만들기

열거형을 복제하기 위해 객체가 배열보다 더 나은 선택임을 인정하고 읽기 전용 문제를 해결해야 합니다. 그러면 Object.freeze 방법이 나옵니다.
Object.freeze 메서드를 사용하면 키나 값을 변경할 수 없도록 모든 개체를 가져와 모든 속성의 구성 및 쓰기 가능한 속성 설명자를 변경할 수 있습니다.

const errors = Object.freeze({
  DATAERROR: 'Data Error',
  LUNCHERROR: 'Lunch Error',
  MOMERROR: 'Mom Error'
});

console.log( errors['LUNCHERROR'] );
//we can use either square bracket syntax 
//or dot notation to access the values
console.log( errors.MOMERROR );

const를 사용하면 새 값이 errors에 할당되고 원래 개체가 대체되는 것을 방지할 수 있습니다.

열거형의 응용

Enum을 사용할 수 있는 방법에 대한 예로 일부 비동기 작업을 순서대로 수행하려고 시도하는 간단한 웹 앱을 상상할 수 있으며 그 중 하나라도 실패하면 작업과 관련된 오류가 발생합니다.

Promise.resolve(123)
  .then(async (id)=>{
    let url = `https://example.com/users/${id}`;
    let resp = await fetch(url)
    if(!resp.ok) throw new Error(errors['DATAERROR']);
    return 'burger';
  })
  .then(async (food) => {
    let isGood = await enjoyAsyncLunch(food);
    if(!isGood) throw new Error(errors['LUNCHERROR']);
    return true;
  })
  .then((ready) => {
    if( !askMomForPermission() ) throw new Error(errors.MOMERROR);
  })
  .catch((err)=> {
    console.error(`Reason for failure is ${err.message}`);
  });

Enum 객체를 생성하면 VSCode와 같은 대부분의 IDE에서 코드 완성을 사용하여 가능한 오류 값을 표시할 수 있다는 추가 이점이 있습니다.