지난 장의 ‘타입 알아보기 챕터’에서 배열에 대해 간단히 알아보았다. 자바스크립트 뿐만 아니라 타입스크립트에서도 배열은 유용하게 사용하는 데이터 타입이므로 이번 챕터에서 조금 더 자세하게 다뤄보려고 한다.
일반적으로 변수를 사용하는 것과 배열을 사용해서 데이터를 관리하는 것에는 차이가 있다. 바로 값의 개수이다. 변수를 사용하는 경우에는 한 번에 하나의 값만 할당하여 사용할 수 있지만, 배열을 사용하는 경우 여러 개의 값을 담아 사용할 수 있다. 배열 안에 담긴 값 하나하나를 요소라고 부르며 인덱스를 통해 배열 안의 요소에 접근이 가능하다. 인덱스를 사용한다는 점에서 배열은 순번을 중요하게 여긴다는 것을 알 수 있다.
자바스크립트의 배열의 선언 방식에는 배열 리터럴인 [] 대괄호를 사용하여 선언하는 방식과 Array 생성자 함수를 사용하는 방식으로 두 가지가 존재한다. Array 생성자 함수로 배열을 만드는 것은 조금 번거롭고 대부분 배열 리터럴 방식을 많이 사용하므로 이 책에서는 배열 리터럴을 사용하겠다.
// 배열 리터럴
let arr = [item1, item2, item, ...];
// Array 생성자 함수
let arr = new Array();
// 배열 리터럴
let arr: 데이터타입[] = [item1, item2, item, ...];
// 제네릭 배열
let arr: Array<데이터타입> = [item1, item2, item3, ...];
타입스크립트의 배열도 마찬가지로 두 가지 선언 방법이 존재한다. 첫 번째로 배열 리터럴을 통해서 선언한 경우에는 변수 바로 뒤에 : 데이터 타입[] 을 적어주며, 우항의 [] 안에는 앞서 명시한 데이터 타입만 배열의 요소로 담길 수 있다. 두 번째로는 제네릭 배열을 통해 Array<데이터타입> 과 같은 형태로 선언을 할 수 있다.
하나의 배열에 다양한 데이터가 섞여 들어와도 에러를 내뿜지 않는 자바스크립트의 배열과 다르게 타입스크립트의 배열은 보다 엄격하고 명시적으로 데이터를 다룰 수 있다는 장점이 있다. 아래 예시를 통해서 배열에 요소를 직접 추가했을 경우 발생하는 상황을 확인해 보겠다.