[TypeScript]튜플(Tuple)

튜플(Tuple)이란?

튜플은 배열의 서브타입입니다. 인덱스의 타입이 알려져 있지만, 동일할 필요는 없으며 요소의 수가 고정된 배열을 표현하는 경우 사용됩니다.

 

다음은 인덱스의 타입이 stirng, string, number, boolean이며, 4개의 요소를 가지는 튜플입니다.

let tupleArray: [string, string, number, boolean] = ['A', 'HI', 123, true];

첫 번째 인덱스 타입이 string이므로 string이 아닌 다른 값을 할당하는 경우 다음과 같이 오류가 발생합니다.

이러한 이유로 튜플은 요소의 수가 고정되었고 특정 순서 또는 특정 패턴으로 이루어진 데이터를 표현하는 경우 사용됩니다.

 

예를 들어, RGB 색상을 표현하기 위해 다음 예제처럼 튜플을 사용할 수 있습니다.

let rgbColor: [number, number, number] = [255, 255, 0];

 

만약, RGB 색상에 10진수, 16진수 둘 다 가능하다면 타입을 string과 number로 정의합니다.

type rgb = number | string;

let rgbColor1: [rgb, rgb, rgb] = [255, 255, 0];
let rgbColor2: [rgb, rgb, rgb] = ['FF', 'FF', '00'];

 

튜플의 타입은 생략 가능하며, 할당된 값으로 타입이 정의됩니다.

let arrTuple = ['A', 255, true];

튜플 arrTuple는 타입을 생략했으며, string, number, boolean 값으로 할당되었습니다. 튜플 요소의 타입은 string | number | boolean으로 정의됩니다.

반응형

---

튜플 조작

튜플은 배열의 서브타입이므로 배열이 가지고 있는 모든 함수(push, pop, find, indexOf 등)에 접근할 수 있습니다. 튜플에 요소를 추가하기 위해서는 push() 함수를 사용하며, 요소를 제거하기 위해서는 pop() 함수를 사용합니다.

 

다음은 push() 함수를 사용하여 튜플의 요소를 추가하는 예제입니다.

let arrTuple = [100, "HI"];

arrTuple.push(200);

console.log(arrTuple);
// (3) [100, "HI", 200]

 

※ 튜플에서 push() 함수 사용 시 주의사항

튜플에 push() 함수를 사용하여 요소를 추가하는 경우 처음 할당된 값의 타입과 정확히 일치해야 합니다.

 

arrTuple이라는 튜플은 number 타입인 100과 string 타입인 "HI"라는 값으로 초기화되었습니다.

let arrTuple = [100, "HI"];

만약, push() 함수로 boolean 타입의 값을 추가하는 경우 다음과 같이 오류가 발생합니다.

arrTuple은 처음에 number, string 타입의 값으로 할당되었기 때문에 push() 함수로 요소를 추가하는 경우 string 또는 number 타입의 값만 허용합니다.

 

다음은 pop() 함수를 사용하여 튜플의 요소를 제거하는 예제입니다.

const arrTuple = [100, "HI", 200, "World"];

arrTuple.pop();

console.log(arrTuple);
// (3) [100, "HI", 200]

---

튜플의 요소 값 수정

튜플 요소의 값을 수정하는 경우 인덱스로 접근하여 변경할 수 있습니다.

const arrTuple = [100, "HI"];

arrTuple[0] = 500;

console.log(arrTuple);
// (2) [500, "HI"]

 

다음과 같이 2개의 값을 할당했으나 4번째 인덱스 값을 변경하는 경우 2, 3번째 인덱스의 값은 undefined로 할당되고 4번째 인덱스에 값이 추가됩니다.

const arrTuple = [100, "HI"];

arrTuple[4] = 500;

console.log(arrTuple);
// (5) [100, "HI", undefined, undefined, 500]

 

튜플에서 push() 함수 사용 시 주의사항과 마찬가지로 변경되는 값이 처음 할당된 값의 타입과 다른 경우 오류가 발생합니다.

---

정리

이번 포스팅에서는 Tuple에 대해 소개하였습니다.

• 튜플은 배열의 서브타입으로 배열 내장 함수를 사용할 수 있습니다.
• 튜플의 값 추가, 변경은 처음 할당된 값의 타입만 허용합니다.
• push() 함수로 튜플 요소를 추가합니다.
• pop() 함수로 튜플 요소를 제거합니다.