배열의 타입

타입스크립트에서 배열의 타입은 '아이템 타입[]'입니다. 예를 들어, 배열의 아이템이 number타입이면 배열의 타입은 number[]이고, 아이템이 string타입이면 string[]입니다. 다음 코드는 배열에 타입 주석을 붙이는 방법을 나타냅니다.

let numArray: number[] = [1, 2, 3]
let strArray: string[] = ['Hello', 'World']

for...in문

ESNext 자바스크립트와 타입스크립트는 for문을 좀더 쉽게 사용하도록 for...in문을 제공합니다. for...in문은 객체를 대상으로 사용하지만, 앞서 설명한 것처럼 배열도 객체이므로 배열에 사용할 수도 있습니다.

let names = ['Jack', 'Jane', 'Steve']

for(let index in names) {
  const name = names[index]
  console.log(`[${index}]: ${name}`) // name: Jack age: 32

for...of문

ESNext 자바스크립트와 타입스크립트는 for...in과는 사용법이 약간 다른 for...of문도 제공합니다. for...of문은 배열의 아이템값을 대상으로 순회합니다.

for(let name of ['Jack', "Jane', 'Steve'])
                 console.log(name)

제네릭 방식 타입

배열을 다루는 함수를 작성할 때는 number[]와 같이 타입이 고정된 함수를 만들기보다는 T[]형태로 배열의 타입을 한꺼번에 표현하는 것이 편리합니다. 타입을 T와 같은 일종의 변수로 취급하는 것을 제네릭타입이라고 합니다. 예시를 보면 이렇습니다.

const arrayLength = <T>(array: T[]): number => array.length
const isEmpty = <T>(array: T[]): boolean => arrayLength<T>(array) == 0

let numArray: number[] = [1, 2, 3]
let strArray: string[] = ['Hello', 'World']

type IPerson = {name: string, age?: number}
let personArray: IPerson[] = [{name: 'Jack'}, {name: 'Jane', age: 32}]

console.log(
  arrayLength(numArray), // 3
  arrayLength(strArray), // 2
  arrayLength(personArray), // 2
  isEmpty([]), // true
  isEmpty([1]) // false

전개 연산자

03장에서 점 세 개가 나란히 있는 ...을 전개 연산자라고 했습니다. 전개 연산자는 배열에도 적용할 수 있습니다. 다음 코드는 전개 연산자를 사용해 두 배열과 특정 값을 동시에 결합하는 예입니다.

let array1: number[] = [1]
let array2: number[] = [2, 3]
let mergedArray: number[] = [...array1, ...array2, 4]
console.log(mergedArray) //[1, 2, 3, 4]

range 함수 구현

배열에 전개 연산자를 적용하면 재귀 형식으로 range함수를 구현할 수 있다.

const range = (from: number, to: number): number[]
=> from < to ? [from, ...range(from + 1, to)] : []

let numbers: number[] = range(1, 9 + 1)
console.log(numbers) // [1, 2, 3, 4, 5, 6, 7, 8, 9]