02.Arrays.and.Tuples.md

2. 배열과 튜플

배열

배열 타입의 정의 방법

TS에서는 다음과 같이 배열 타입을 정의함

let numArr: number[] = [1, 2, 3]

→ 배열을 저장하는 변수의 이름 뒤에 타입 주석의 시작을 의미하는 콜론을 작성한 다음 배열요소타입[] 형식으로 배열 타입을 정의함

만약 문자열을 담는 배열의 타입을 정의한다면 다음과 같이 하면 됨

let strArr: string[] = ["hello", "im", "winterlood"];

또 다음과 같은 형식으로도 배열의 타입을 정의할 수 있음

let boolArr: **Array<boolean>** = [true, false, true];

→ 꺽쇠와 함께 타입을 작성하는 문법을 TS에서는 제네릭이라고 부름

배열을 정의하는 두 형식 모두 모양만 다를뿐 기능은 동일함.

다양한 타입 요소를 갖는 배열 타입 정의하기

만약 다음과 같이 다양한 타입의 배열 요소를 갖는 배열 타입을 정의해야 할 때에는 어떻게 할 수 있을까?

let multiArr = [1, "hello"];

이럴 때는 다음과 같이 소괄호와 바(|)를 사용하여 배열 요소가 둘 중 하나의 타입에 해당하도록 타입을 정의하면 됨

let multiArr: **(number | string)**[] = [1, "hello"];

→ number | string은 배열 요소의 타입이 string이거나 number일 것을 의미

→ 따라서 이렇게 정의한 배열 타입은 요소가 number 타입이거나 string 타입이어야 함

유니온(Union) 타입: 바(|)를 이용해 여러 타입중 하나를 만족하는 타입을 정의하는 문법

다차원 배열 타입 정의하기

[]를 연달아 작성해 다차원 배열 타입도 간단하게 정의할 수 있음

let doubleArr : number[][] = [
  [1, 2, 3], 
  [4, 5],
];

튜플

JS에는 없는 TS의 특수한 타입으로 길이와 타입이 고정된 배열을 의미

튜플 타입을 이용하면 쉽게 고정된 길이를 갖는 배열 타입을 정의할 수 있음.

길이가 2로 고정된 2개의 number 타입 요소를 갖는 튜플은 다음과 같음

let tup1: [number, number] = [1, 2];

또 다음과 같이 다양한 타입을 갖는 튜플 타입도 정의할 수 있음

let tup2: [number, string, boolean] = [1, "hello", true];

튜플은 결국 배열이다.

tsc를 이용해 튜플 타입이 정의된 TS 코드를 컴파일 해 보면 결국 튜플은 JS 배열로 변환되는 것을 볼 수 있음

• 배열 메서드인 push나 pop을 이용해 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 이씅ㅁ

let tup1: [number, number] = [1, 2];

tup1.push(1);
tup1.push(1);
tup1.push(1);
tup1.push(1);

튜플을 왜 쓰는걸까?

ex. 회원 정보를 2차원 배열로 저장하는 상황을 가정

const users = [
  ["이정환", 1],
  ["이아무개", 2],
  ["김아무개", 3],
  ["박아무개", 4],
];

각 배열의 0번 인덱스에는 회원의 이름, 1번 인덱스에는 회원의 아이디를 저장해 두었음.

if. 🚨 동료 중 한병이 다음과 같이 순서를 잘못 배치해 요소를 추가할 경우 문제가 발생…

const users = [
  ["이정환", 1],
  ["이아무개", 2],
  ["김아무개", 3],
  ["박아무개", 4],
  [5, "조아무개"], // <- 새로 추가함
];

JS에서는 이런 문제를 확인할 방법이 없음. 그러나 TS에서는 튜플을 사용하면 위와 같은 실수를 빨리 잡을 수 있음

const users: [string, number][] = [
  ["이정환", 1],
  ["이아무개", 2],
  ["김아무개", 3],
  ["박아무개", 4],
  [5, "조아무개"], // 오류 발생
];