[TypeScript] 배열 이해하기(1)

ㅁ 배열 이해하기

  자바스크립트에서 배열은 Array 클래스의 인스턴스이며 다음처럼 선언함

let 배열 이름 = new Array(배열 길이)

  다음 코드는 Array 클래스의 인스턴스를 만든 후 push 메소드를 이용해 [1, 2, 3]으로 구성된 배열을 만듦

// array.ts
let array = new Array
array.push(1); array.push(2); array.push(3);
console.log(array)	// [1, 2, 3]

  배열에 담긴 각각의 값을 아이템(item) 또는 원소(element)라고 하는데, 이 글에서는 아이템이라고 부르겠음

  즉, 앞 코드의 array 변수에는 3개의 아이템을 담고 있음

 

- [] 단축 구문

  자바스크립트는 []라는 단축 구문을 제공함

  다음 코드는 [] 단축 구문을 이용해 number 타입의 값으로 채운 numbers 배열과 string 타입의 값으로 채운 strings 배열을 만듦

// shorthand.ts
let numbers = [1, 2, 3]
let strings = ['Hello', 'World']
console.log(numbers, strings)	//[1, 2, 3] ['Hello', 'World']

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

  자바스크립트에서 배열은 다른 언어와 다르게 객체임.

  배열은 Array 클래스의 인스턴스인데, 클래스의 인스턴스는 객체이기 때문임

  Array 클래스는 배열을 사용하는 데 필요한 여러 가지 메소드를 제공함

  그중 Array.isArray는 매개변수로 전달받은 심벌이 배열인지 객체인지 알려줌

// isArray.ts
let a = [1, 2, 3]
let o = { name: 'Jack', age: 32 }
console.log(Array.isArray(a), Array.isArray(o))	// true false

 

- 배열의 타입

  타입스크립트에서 배열의 타입은 '아이템 타입[]'임

  예를 들어, 배열의 아이템이 number 타입이면 배열의 타입은 number[]이고, 아이템이 string 타입이면 string[]임

  다음 코드는 배열에 타입 주석을 붙이는 방법을 나타냄

// array-type.ts
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}]

 

- 문자열과 배열 간 변환

  어떤 프로그래밍 언어는 문자열(string)을 문자(character)들의 배열(array)로 간주함

  그러나 타입스크립트에서는 문자 타입이 없고 문자열의 내용 또한 변경할 수 없음

  이러한 특징 때문에 문자열을 가공하려면 먼저 문자열을 배열로 전환해야 함

  보통 문자열을 배열로 전환할 때는 string 클래스의 split메소드를 사용함

  split 메소드는 문자열을 문자로 쪼개는 기준인 구분자(delimiter)를 입력받아 문자열을 string[] 배열로 만들어 줌

split(구분자: string): string[]

  다음의 split 함수는 매개변수로 전달받은 문자열과 구분자를 이용해 String 클래스의 split 메소드를 호출함으로써 string[] 타입의 배열로 만들어 줌

// split.ts
export const split = (str: string, delim: string = ''): string[] => str.split(delim)

  다음은 split 함수를 테스트하는 코드로서 구분자를 생략한 예와 '_'를 사용한 예 두 가지를 보여줌

// split-test.ts
import {split} from './split'
console.log(
	split('hello'),			// ['h', 'e', 'l', 'l', 'o']
    	split('h_e_l_l_o','_')	// ['h', 'e', 'l', 'l', 'o']
)

  string[] 타입의 배열을 다시 string 타입으로 변환하려면 Array 클래스의 join 메소드를 사용함

join(구분자: string): string

  다음은 join 메소드를 이용하는 사용자 정의 함수 join을 작성한 예임

  join 함수는 매개변수로 전달받은 string[] 타입 배열과 구분자를 이용해 String 클래스의 join 메소드를 호출함으로써 문자와 구분자를 결합한 새 문자열을 반환함

// join.ts
export const join = (strArray: string[], delim: string=''): string => strArray.join(delim)

  다음은 join 함수에 string[] 타입의 배열을 전달해서 구분자에 따라 어떤 내용의 문자열로 바뀌는지 보여주는 예임

// join-test.ts
import {join} from './join'
console.log(
	join(['h', 'e', 'l', 'l', 'o']),		// hello
    	join(['h', 'e', 'l', 'l', 'o'], '_'),	// h_e_l_l_o
)

 

[출처: Do it 타입스크립트 프로그래밍]