[Typescript] 배열과 튜플, 그리고 스프레드 연산자에 대해 알아보자.

1. 배열 (Array)

배열은 동일한 타입의 데이터를 순서대로 나열한 것입니다.

• 기본 선언: 타입[] 또는 Array<타입> 형식을 사용합니다.
• 유니온 타입 배열: 여러 종류의 타입을 하나의 배열에 담고 싶을 때 (number | string)[] 처럼 소괄호로 묶어 선언합니다.
• 읽기 전용 배열 (ReadonlyArray): 배열의 요소를 변경하거나 추가할 수 없도록 잠그는 기능을 제공합니다.

 

let numbers : number[] = [1,2,3,4,5];
let fruits : string[] = ['apple', 'banana', 'orange'];

// 배열의 유니온 타입: 숫자와 문자열이 섞여도 OK
let mixedArray : (number | string)[] = [1, 'two', 3, 'four'];

// 읽기 전용: 수정하려고 하면 에러가 발생합니다.
let readOnlyArray : ReadonlyArray<number> = [1,2,3];
// readOnlyArray.push(4); ❌ 에러 발생

---

2.  튜플 (Tuple)

배열과 비슷해 보이지만, 정해진 개수와 순서에 따라 타입이 고정된 배열입니다.

• 특징: 각 인덱스마다 타입이 다르더라도 정확히 그 위치에 맞는 값이 들어와야 합니다.
• 활용: 데이터의 구조가 엄격해야 하는 상황(예: API 응답, 좌표계 [x, y])에서 유용합니다.

 

// 튜플 : 타입의 순서와 개수가 정해져 있다. 
let greeting : [number, string, boolean] = [1, 'hello', true];

// greeting[0] = "world"; ❌ 0번째는 number여야 하므로 에러!

 

배열과 튜플 차이점

구분	배열 (Array)	튜플 (Tuple)
개수 제한	제한 없음 (가변적)	정해진 개수만 허용
타입 순서	동일한 타입이 반복됨	각 인덱스마다 타입이 다를 수 있음
선언 방식	number[]	[number, string]
주요 목적	같은 종류의 데이터를 나열할 때	서로 연관된 데이터 세트를 묶을 때

 

 

---

3. 스프레드 연산자 (Spread Operator)

점 세 개(...)를 사용하여 배열이나 객체의 요소를 낱개로 촤르르 펼치는(Unpack) 연산자입니다.

• 역할: 대괄호([])를 풀어서 안의 내용물만 꺼내온다고 생각하면 쉽습니다.
• 장점: 배열을 합치거나 기존 배열을 복사할 때 매우 직관적입니다.

let firstArray = [1, 2, 3];
let secondArray = [4, 5, 6];

// ... 이 대괄호를 풀어주기 때문에 [1, 2, 3, 4, 5, 6]이 됩니다.
let combineArray = [...firstArray, ...secondArray];