Tuple: 위치가 중요

"Tuple 은 각 slot 이 자기 일 가진 배열."

Tuple 이 뭐

Tuple 은 각 위치가 자기 타입 가질 수 있는 고정 길이 배열. [string, number] 는 정확히 2 element 의 배열: 첫 번째는 string, 두 번째는 number. Compiler 가 길이와 위치별 타입 둘 다 추적.

Tuple 은 위치가 의미 담을 때 유용. 좌표 쌍 (`[x, y]`), key-value 쌍 (`[key, value]`), return-with-status 패턴 (`[error, result]`) — 다 개념적으로 위치적, 그리고 tuple 타입이 compiler 가 그걸 강제하게 해줘.

Tuple 의 optional 과 rest element

Tuple 이 함수 parameter 와 비슷한 modifier 지원:

Optional element: [string, number?] — 두 번째 element 빠질 수.
Rest element: [string, ...number[]] — 첫 element 가 string, 그다음 어떤 수의 number.
Named tuple element: [name: string, age: number] — 순수 cosmetic label, IDE hover 에 나타나. 행동 안 바꾸지만 가독성 도와.

Tuple 이 object 이길 때, 안 이길 때

Tuple 이 빛날 때:

둘 이상의 값이 흔히 함께 반환되고 위치가 잘 알려진 의미 가질 때 (React 의 `useState` 가 `[value, setter]` 반환).
Destructuring 이 모양 직접 match 하길 원할 때: const [x, y] = getCoords().
값 수가 작고 (2-3) 이름이 명백한 context 일 때.

Object 가 tuple 이길 때:

4+ 값 — 인간이 위치 못 추적.
값이 역할이 이질적이고 이름이 명확히 할 때 (`{ user, role, permissions }` vs `[User, Role, Permission[]]`).
모양이 시간이 지나며 자랄 수 있을 때 — tuple 추가가 모든 destructuring call site 깨.

경험 법칙: 위치 모양이 contract 일 때 tuple 써 (return-with-status, useState). 이름이 contract 일 때 object 써. 선택이 다음 reader 한테 의도 신호.

Inference: default 로 배열, 요청 시 tuple

배열 literal 이 default 로 배열로 넓혀. Literal 에서 tuple 타입 얻으려면 명시 annotation 또는 `as const` 써:

const a = [1, 'two'];           // (string | number)[] — union 의 배열
const b: [number, string] = [1, 'two'];   // tuple, 명시
const c = [1, 'two'] as const;            // readonly [1, 'two'] — tuple + literal

피파의 고백

cwkPippa frontend 가 tuple 아껴 써 — 주로 React 의 useState/useReducer (이미 React 타입이 선언) 와 `[ok, value]` 또는 `[error, result]` 반환하는 utility 함수 몇 개. 대부분 데이터는 object-shaped. Tuple 은 literal 타입 같아 — 모양이 진짜 위치적일 때 이기는 좁고 날카로운 tool.

Code

Modifier 다 가진 tuple·typescript

// Tuple — 고정 길이, 위치별 타입.

type Coord = [number, number];
const origin: Coord = [0, 0];
const point: Coord = [3, 4];
// const bad: Coord = [3];          // ❌ Element 빠짐
// const bad2: Coord = [3, 4, 5];   // ❌ Element 너무 많음

// Optional 과 rest element.
type OptionalSecond = [string, number?];
const x1: OptionalSecond = ['hi'];
const x2: OptionalSecond = ['hi', 42];

type Spread = [string, ...number[]];
const y: Spread = ['header', 1, 2, 3, 4];

// Named tuple element — 가독성용 label.
function getRange(): [start: number, end: number] {
  return [0, 100];
}
const [s, e] = getRange();  // s 와 e 명확성 위해 이름 붙음

Tuple 을 contract 로 — useState 와 Go-style 에러 반환·typescript

// useState 패턴 — 위치 contract.

type StateHook<T> = [T, (next: T) => void];

function useCounter(initial: number): StateHook<number> {
  let value = initial;
  const set = (next: number) => { value = next };
  return [value, set];
}

const [count, setCount] = useCounter(0);
setCount(count + 1);

// Return-with-status 패턴.
function parse(input: string): [error: string | null, result: number | null] {
  const n = Number(input);
  if (Number.isNaN(n)) return ['not a number', null];
  return [null, n];
}

const [err, result] = parse('42');
if (err === null) console.log(result);

Exercise

분자와 분모 받고 몫과 나머지를 tuple 로 반환하는 divmod 함수 써. Return 타입에 named tuple element 써. 그다음 호출하고 명확히 이름 붙은 변수로 destructure. Object 반환 버전과 비교 — 어느 거 ship 하겠어?

Hint

개념적으로 함께 가는 두 값 (몫과 나머지) 엔, named element 가진 tuple 이 destructuring ergonomics 와 문서화 둘 다 줘. 3개 이상엔 object 가 보통 더 깨끗.

Tuple 이 뭐

Tuple 의 optional 과 rest element

Tuple 이 object 이길 때, 안 이길 때

Inference: default 로 배열, 요청 시 tuple

피파의 고백

Code

External links

Exercise

Progress

댓글 0