프로그래밍프론트엔드 개발자

TypeScript에서 'readonly' 키워드에 대해 설명해 주세요. 언제 어떻게 사용해야 하나요? const와의 차이점은 무엇인가요?

Hintsage AI 어시스턴트로 면접 통과

답변.

TypeScript에서 readonly 키워드는 객체와 배열의 속성을 수정할 수 없도록 초기화 후 변경을 방지할 때 사용됩니다:

  • 인터페이스, 타입 및 클래스 설명에서 사용되어 필드가 설정된 후 값을 변경할 수 없도록 합니다.
  • readonly는 변수에 대한 것이 아니라 객체의 속성에만 적용됩니다.
  • const는 변수를 다시 할당할 수 없음을 나타내지만 객체의 내용을 변경하는 것은 허용하는 것과 달리, readonly는 필드 또는 배열 요소의 수정 자체를 금지합니다.

예시:

interface User { readonly id: number; name: string; } const user: User = { id: 1, name: 'Anna' }; user.id = 2; // 오류: read-only 속성이므로 'id'에 할당할 수 없습니다.

배열의 경우:

const nums: readonly number[] = [1, 2, 3]; nums.push(4); // 오류: 'readonly number[]' 유형에 'push' 속성이 존재하지 않습니다.

함정 질문.

TypeScript에서 constreadonly의 차이점은 무엇인가요? 서로 대체할 수 있나요?

답변: 아닙니다, 대체할 수 없습니다. const는 변수 자체에 대한 제약(재할당 불가)인 반면, readonly는 객체의 개별 속성이나 배열 요소에 대한 제약이지만 변수 자체는 바뀔 수 있습니다(맥락에 따라 허용되는 경우).

예시:

const arr: readonly number[] = [1, 2, 3]; // arr = [2, 3, 4]; // const 때문에 오류 // arr[0] = 5; // readonly 때문에 오류

역사

재무 플랫폼 프로젝트에서 사용자 데이터 작업 시 readonly number[] 대신 일반 배열 number[]를 사용했습니다. 이로 인해 한 함수가 우연히 입력 데이터 — 배열의 합계가 다른 곳에서 사용되면서 보고서의 불일치를 초래하게 되었습니다. 오류는 며칠 후 발견되어 회사가 데이터 감사 및 복구에 시간을 낭비하게 되었습니다.


역사

내부 API에서 constreadonly를 혼동하여 const user: User가 필드 변경을 방지한다고 생각했습니다. 결과적으로 필드를 변경할 수 있게 되어, 이는 요구 사항에서는 허용되지 않았습니다. 차이점을 모르고 인해 서비스 간에 기밀 데이터 유출이 발생했습니다.


역사

오픈 소스 라이브러리의 데이터를 정의할 때 readonly를 잊어버려 의도치 않게 변경 가능한 구조체가 만들어졌습니다. 이로 인해 외부 개발자가 런타임에 비공식적인 데이터를 변경할 수 있게 되어 버그가 발생했으며, 이를 수정하는 데 리팩토링이 필요했습니다.