0Pricing
TypeScript Academy · 강의

readonly 배열과 튜플

변경 메서드로부터 배열과 튜플을 보호합니다.

readonly 배열과 튜플은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

읽기 전용 배열

읽기 전용 배열은 읽을 수는 있지만 변경할 수 없는 배열입니다. readonly number[] 또는 이와 동일한 의미의 ReadonlyArray<number>로 작성합니다. 요소 타입은 그대로 유지되고 변경만 차단됩니다.

const nums: readonly number[] = [1, 2, 3];
console.log(nums[0], nums.length);
// nums[0] = 9; // Error: index signature is readonly

ReadonlyArray 타입

ReadonlyArray<T>는 readonly T[]와 의미가 동일한 제네릭 형식입니다. 더 읽기 좋은 쪽을 사용하면 되며, 두 형식은 서로 바꿔 사용할 수 있습니다.

const names: ReadonlyArray<string> = ['Ada', 'Sam'];
console.log(names.join(', '));

변경 메서드 없음

읽기 전용 배열에는 변경 메서드가 아예 없습니다. push, pop, splice, sort, reverse를 사용할 수 없습니다. 타입에 해당 메서드가 실제로 존재하지 않기 때문입니다.

const items: readonly string[] = ['a', 'b'];
// items.push('c'); // Error: push does not exist
// items.splice(0, 1); // Error
console.log(items.length);

변경하지 않는 메서드는 계속 사용할 수 있습니다

값을 변경하는 대신 새 값을 반환하는 메서드인 map, filter, concat, slice는 계속 사용할 수 있습니다. 이러한 메서드는 새 배열을 만들어 원본을 그대로 유지합니다.

const nums: readonly number[] = [1, 2, 3];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // new array, nums unchanged

매개변수로 사용하는 읽기 전용 배열

함수에서 readonly T[]를 받도록 하면 호출자의 배열을 변경하지 않겠다는 뜻을 전달할 수 있습니다. 의도가 문서화되고 컴파일러가 이 약속을 확인합니다.

function sum(values: readonly number[]): number {
  return values.reduce((a, b) => a + b, 0);
}
console.log(sum([10, 20, 30]));

변경 가능한 배열은 읽기 전용 배열에 할당할 수 있습니다

일반적인 number[]는 readonly number[] 매개변수에 할당할 수 있습니다. 해당 배열을 변경하지 않겠다고 약속하는 것뿐이기 때문입니다. 반대 방향의 할당은 허용되지 않습니다.

function total(v: readonly number[]): number {
  return v.reduce((a, b) => a + b, 0);
}
const mutable: number[] = [1, 2, 3];
console.log(total(mutable)); // ok

읽기 전용 튜플

튜플도 읽기 전용으로 만들 수 있습니다: readonly [string, number]. 요소의 타입과 순서가 고정되고 각 위치의 값을 다시 할당할 수 없습니다.

const pair: readonly [string, number] = ['age', 30];
console.log(pair[0], pair[1]);
// pair[1] = 31; // Error: readonly tuple

읽기 전용 튜플은 변경을 차단합니다

읽기 전용 배열과 마찬가지로 읽기 전용 튜플에서는 변경 메서드가 제거되고 인덱스를 통한 할당이 거부됩니다. 좌표 쌍과 같은 고정된 형태의 레코드에 적합합니다.

const point: readonly [number, number] = [3, 4];
// point.push(5); // Error
// point[0] = 0; // Error
console.log(point[0] + point[1]);

상수 단언과 읽기 전용 타입 비교

읽기 전용 배열을 만드는 두 가지 방법에는 미묘한 차이가 있습니다. readonly number[] 주석은 일반적인 요소 타입을 유지합니다. as const는 한 단계 더 나아가 리터럴 타입으로 이루어진 읽기 전용 튜플을 만듭니다.

const a: readonly number[] = [1, 2, 3]; // elements: number
const b = [1, 2, 3] as const;            // readonly [1, 2, 3]
console.log(a[0], b[0]);

둘 중 선택하기

불변성은 필요하지만 일반적인 요소 타입을 원한다면 readonly T[] 주석을 사용합니다. 정확한 리터럴 값도 필요하다면 as const를 사용합니다. 예를 들어 유니언 타입을 만들 때 유용합니다.

const DAYS = ['Mon', 'Tue', 'Wed'] as const;
type Day = typeof DAYS[number]; // 'Mon' | 'Tue' | 'Wed'
const d: Day = 'Tue';
console.log(d);

공유 데이터의 불변성

읽기 전용 배열과 튜플은 공유 상수와 설정 목록이 실수로 변경되지 않도록 보호합니다. 따라서 예기치 않은 변경으로 발생하는 버그를 컴파일 시점에 방지할 수 있습니다.

const ALLOWED_PORTS: readonly number[] = [80, 443, 8080];
function isAllowed(p: number): boolean {
  return ALLOWED_PORTS.includes(p);
}
console.log(isAllowed(443), isAllowed(22));

빠른 확인

읽기 전용 배열과 튜플에 대한 이해도를 확인해 보세요.

복습: 읽기 전용 배열과 튜플

다음과 같은 내용을 배웠습니다:

  • readonly T[] / ReadonlyArray<T>는 변경을 막지만 읽기와 변경하지 않는 메서드의 사용은 허용합니다.
  • push/splice와 같은 변경 메서드는 타입에서 제거됩니다.
  • 읽기 전용 튜플은 길이와 요소 타입을 모두 고정합니다.
  • as const는 한 단계 더 나아가 리터럴 타입으로 이루어진 읽기 전용 튜플을 만듭니다.

다음으로 읽기 전용 컬렉션 타입을 살펴봅니다.

const config: readonly string[] = ['a', 'b'];
const upper = config.map((s) => s.toUpperCase());
console.log(upper);

자주 묻는 질문

“readonly 배열과 튜플” 강의는 무료인가요?

네 — “readonly 배열과 튜플” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“readonly 배열과 튜플”에서 뭘 배우나요?

변경 메서드로부터 배열과 튜플을 보호합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“readonly 배열과 튜플” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. readonly 속성
  2. readonly 배열과 튜플
  3. ReadonlyArray와 ReadonlyMap
  4. 깊은 불변성 패턴
← TypeScript Academy(으)로 돌아가기