배열과 튜플

무엇이 담기는 배열인지 적습니다

배열에는 무엇이 담기는지를 적습니다. 타입 뒤에 [] 를 붙이면 됩니다.

number[]   // 숫자만 담는 배열
string[]   // 글자만 담는 배열

이렇게 적어 두면 배열에서 꺼낸 값의 타입도 함께 정해집니다. 꺼낼 때마다 무엇인지 확인할 필요가 없어집니다.

배열 만들고 다루기

const scores: number[] = [90, 85, 77];
const names: string[] = ["홍길동", "김철수"];

console.log(scores.length, names.length);
console.log(scores.map(v => v + 1).join(","));

map 의 v 에 타입을 적지 않았는데 v + 1 이 됩니다. number[] 라고 적어 두었으니 꺼낸 값이 숫자라는 것을 알기 때문입니다.

다른 것을 넣으면 막힙니다

const scores: number[] = [90, 85, 77];

scores.push("백점");

const 로 선언했지만 push 는 됩니다 — const 가 막는 것은 다른 배열로 바꾸는 것이지 안의 내용이 아닙니다(3.1에서 본 것과 같습니다). 막은 것은 타입입니다.

자리마다 다른 것을 담으려면 — 튜플

길이가 정해져 있고 자리마다 담기는 것이 다른 배열을 튜플이라고 합니다. 대괄호 안에 자리마다 타입을 적습니다.

const point: [number, number] = [3, 5];
const user: [string, number] = ["홍길동", 27];

console.log(point[0] + point[1]);
console.log(`${user[0]} (${user[1]})`);

user[0] 은 글자, user[1] 은 숫자입니다. 자리마다 타입이 다릅니다.

const user: [string, number] = ["홍길동", 27];

user[0] = 27;

튜플이 자주 보이는 자리가 여러 값을 한 번에 돌려주는 함수입니다. React 의 useState 가 그렇게 생겼습니다.

처음에 자주 걸리는 것

직접 해보기

const fruits: string[] = ["사과", "포도", "딸기"];

console.log(fruits.length);
console.log(fruits.join(" "));

이 단원의 정리