[TS] 배열 이해하기

자바스크립트에서 배열은 Array 클래스의 인스턴스이다.

let a = new Array

a.push(1);
a.push(2);
a.push(3);

console.log(a) // [1,2,3]

[] 단축 구문

앞에서 살펴본 스타일로 배열을 만드는 것은 번거롭다.
자바스크립트는 []단축 구문을 제공한다.

let numbers = [1,2,3]

자바스크립트에서 배열은 객체다

자바스크립트에서 배열은 다른 언어와 다르게 객체이다.
배열은 Array 클래스의 인스턴스인데, 클래스의 인스턴스는 객체이기 때문이다.

문자열과 배열 간 변환

어떤 프로그래밍 언어는 문자열을 문자들의 배열로 간주한다. 그러나 타입스크립트에서는 문자 타입이 없고 문자열의 내용 또한 변결할 수 없다. 때문에 문자열을 가공하려면, 먼저 문자열을 배열로 전환해야 한다.

문자열을 배열로 전환하기 위해서는 String 클래스의 split 메서드를 사용한다. split 메서드는 문자열을 문자로 쪼개는 기준인 구분자를 입력받아 문자열을 string[]으로 만들어준다.
배열로 다시 바꾸고 싶으면 join메서드를 호출하면 된다.

배열의 비구조화 할당

객체뿐 아니라 배열에도 비구조화 할당을 적용할 수 있다.

let a: number[] = [1,2,3,4,5]
let [first, second, third, ...rest] = a
console.log(first, second, third, rest) // 1 2 3 [4,5]

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}`) // [0]: Jack [1]:Jane [2]: Steve
 }

for...in문에 객체를 사용할 때는 객체가 가진 속성을 대상으로 순회한다.

let jack = {name: 'Jack', age: 32}
for(let property in jack)
	console.log(`${property}: ${jack[property]}`) // name: jack age: 32

for of 문

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

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

제네릭 방식 타입

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

다음 함수는 배열의 길이를 얻는 함수이다.

const arrayLength = (array) => array.length

이 함수가 다양한 아이템 타입을 가지는 배열에 똑같이 적용되게 하려면 배열의 타입 주석을 T[]로 표현한다.

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

제네릭 함수의 타입 추론

제네릭 형태로 구현된 함수는 원칙적으로 03행처럼 타입 변수를 다음과 같은 형태로 명시해주어야 한다.

함수 이름<타입 변수>(매개변수)

이런 코드는 번거로워서 타입스크립트는 타입 변수 부분을 생략할 수 있게 한다.
타입스크립트는 타입 변수가 생략된 제네릭 함수를 만나면 타입 추론을 통해 생략된 타입을 찾아낸다.

const identity = <T>(n: T): T => n
console.log(
	identity<boolean>(true)
    identity(true)
)

제네릭 함수의 함수 시그니처(함수 타입)

타입스크립트는 어떤 경우 함수 시그니처의 매개변수 부분에 이름을 기입하라고 요구한다.

const normal = (cb: (number) => number): void => {}
const error = (cb: (number, number?) => number): void => {} // error

error이름의 함수는 오류가 발생한다. 이런 경우, 타입스크립트가 해석하지 못하는 부분에 변수를 삽입하고 해당 변수에 타입을 명시하여 해결한다.

const fixed = (cb: (a: number, number?) => number): void => {}

전개 연산자

전개 연산자는 배열에도 사용할 수 있다.

let array1: number[] = [1]
let array2: number[] = [2,3]
let array3: number[] = [...array1, array2, 4]

console.log(array3) // [1,2,3,4]