TypeScript 강좌 14. 복합형 : 배열 튜플 스프레드 사용법

복합형

다른 원시형 또는 복합형을 내부에 포함하여 큰 데이터로 정의하는 데이터 자료형을 타입스크립트 「복합형」이라고 합니다. 배열, 객체 등이 이에 해당합니다. 클래스를 정의하고 만드는 인스턴스도 복합형이며, 리터럴로 정의하는 배열 및 오브젝트들을 소개합니다.

배열

배열은 TypeScript에서 많이 사용되는 리터럴입니다. 스프레드 구문, 분할, 할당 등이 더해져, 다양한 방법을 구사하여 함수형 언어처럼 쓰이기도 합니다. 배열은 다음에 소개하는 개체뿐만 아니라 리터럴로 정의할 수 있는 타입스크립트 복합형 중 하나입니다.

// 변수에 대입. 자료형을 부여하고  [ ] = 여기에 요소를 삽입합니다

// 자료형이 똑같으면, 자료형 생략 가능합니다

const years: number[] = [2019, 2020, 2021];

const divs = ['tig', 'sig', 'saig', 'scig'];

// 배열에 요소 추가, 여러개 추가도 가능합니다.

years.push(2022);

years.push(2023, 2024);

// 요소 중 일부 추출

const first = years[0];

튜플

Java 등은 배열 내부 요소의 자료형이 같습니다. TypeScript는 배열의 요소마다 형태가 다른 "튜플"을 데이터형으로 정의할 수 있습니다. 단, 정의된 형태와 다른 형태의 자료를 삽입할 경우 오류가 발생합니다.

const movie: [string, number] = ['Gozilla', 1954];

// error TS2322: Type 'number' is not assignable to type 'string'.

movie[0] = 2019;

배열에서 데이터 추출

이전 JavaScript는 배열이나 객체의 일부 내용을 변수에 담으려면 하나씩 꺼낼 수밖에 없습니다. 현재 JavaScript와 TypeScript는 분할 할당(=왼쪽에 배열을 쓰는 표기법)을 사용하여 여러 요소를 한꺼번에 꺼낼 수 있습니다. slice()를 사용하지 않고, 새로운 스프레드 구문(...)을 사용하면 됩니다.

스프레드 구문은 생략 기호처럼 마침표 세 개를 씁니다. 스프레드 구문은 꺼내는 것 이외에도 배열이나 객체의 가공, 함수 호출 시 인수 목록에서도 사용할 수 있는 강력한 구문입니다. 여기에서는 두 번째 이후의 모든 요소를 other에 저장합니다.

배열 요소 추출

const smalls = [

  "작은동물",

  "작은자동차",

  "작은책"

];

// 예전 방식 : 하나씩 추출

var smallCar = smalls[1];

var smallAnimal = smalls[0];

var other = smalls.slice(1);

// 요즘 방식 : 한꺼번에 추출

const [smallAnimal, smallCar, essay] = smalls;

// 2번째 이후 요소 추출

const [, ...other] = smalls;

배열 요소 유무 확인

이전엔 요소의 인덱스 값을 보고 판단했지만, 배열 유무를 boolean으로 반환하는 includes() 메소드가 있으므로 이것을 사용해 보겠습니다.

요소의 존재 확인

const places = ["서울역", "양주시", "당고개역"];

// 예전 방식 : index Of 이용

if (places.indexOf("서울역") !== -1) {

  // 찾았다!

}

// 새로운 방식 : includes 이용

if (places.includes("양주시")) {

  // 찾았다!

}

배열 가공

타입스크립트에서 배열 가공은 다른 언어를 습득했던 사람들이 JavaScript를 배울 때 겪는 어려움 중 하나였습니다.

splice()라는 요소의 제거, 추가를 한 번에 하는 수수께끼의 메소드를 사용하여 퍼즐처럼 배열을 가공했기 때문이죠. 배열 자체를 변경하거나 새로운 배열을 반환하는 등 통일되지 않은 것도 난해함을 늘렸습니다. 스프레드 구문을 사용하면 표준 문법 범위 내에서 이같은 가공이 가능합니다. 좀 전엔 스프레드 구문이 왼쪽에 있었는데, 이번엔 오른쪽에서 배열 내용을 확장합니다.

최근의 JavaScript는 함수형 언어의 기술을 빌려와 버그가 적은 코드를 만들자는 움직임이 있었습니다. 그 중 하나가 배열이나 객체를 가공하는 것이 아니라 값이 변경된 사본을 만들어 마지막에 리플레이스 하는 방법입니다. splice() 대상 배열을 변경합니만, 스프레드 구문을 사용하면 이 정책에 따라 typescript 코딩이 쉬워집니다. 배열의 복사도 쉽게할 수 있습니다.

// 배열 가공 

const smalls = [

  "작은동물",

  "소형차",

  "소심한사람"

];

const others = [

  "서민",

  "중산층"

];

// 예전 방법 : 3번째 요소를 삭제하고 1개의 요소를 추가. 다른 배열과 결합

smalls.splice(2, 1, "소심한사람");

// [ '작은동물', '소형차', '소심한사람' ]

var newSmalls = smalls.concat(others);

// [ '작은동물', '소형차', '소심한사람', '서민', '중산층' ]

// 새로운 방법 : 스프레드 구문으로 같은 작업하기

// 앞부분 요소 삭제 시 분할 대입 사용하면 slice()도 삭제 가능

const newSmalls = [...smalls.slice(0, 2), "소심한사람", ...others]

// [ '작은동물', '소형차', '소심한사람', '서민', '중산층' ]

// 예전 방법 : 배열 복사

var copy = Array.from(smalls);

// 새로운 방법 : 스프레드 구문으로 배열 복사

const copy = [...smalls];

미완성 강좌 문서입니다 ...