[TypeScript] Spread Syntax

안녕하세요 동기 여러분! 오늘은 타입스크립트의 튜플과 자바스크립트의 전개 구문(Spread Syntax)의 환상적인 조화에 대해 알아봅시다!

 

Spread Syntax

전개 구문은 ...을 붙힌 축약형이라 말할 수 있겠다. 아래의 코드를 보자.

let arcaneChamps = ['바이', '징크스', '케이틀린', '제이스', '빅토르', '에코'];

리그 오브 레전드의 애니메이션 아케인의 챔피언들을 모아놓은 배열이다. 이걸 전개 구문으로 당겨오는데 방법이 상당히 깔끔하고 간단하다.

 

let arcaneChamps = ['바이', '징크스', '케이틀린', '제이스', '빅토르', '에코'];
let newAcaneChamps = [...arcaneChamps];

앞에 ... 붙여서 가져오면 끝이다.

 

한번 출력해보도록하자.

 

주의할 점이 하나 있다면 arcaneChamps와 newAcaneChamps는 같지 않다.

요소만 같지 다른 배열이 된다.

 

---

튜플과 전개 구문의 조합

스타크래프트 유닛의 정보를 넣는 함수가 있다고 치고 매개 변수에 일일이 타입선언을 하면 아래와 같이 나오는데.

function terranUnit(name: string, hp: number, mp: number, damage: number, armour: number, skill: string){
  //뭔가 함수가 쭉 적혀 있다고 치자
}

지금 매개 변수가 6개 밖에 없으니까 코드를 읽는게 불편하지 않지만 이게 수십개가 된다고 하면 상당히 불편하고 함수에 독립 변수를 넣을 때는 엄청나게 복잡할 것이다.

 

그래서 배열에 타입선언을 한 변수를 함수에 집어 넣으면 상당히 코드가 간편해 보인다. (함수의 매개 변수에 일일이 타입을 선언할 필요도 없어진다.)

let marine: [string, number, number, number, number, string] = ['해병', 40, 0, 6, 0, '스팀팩'];

terranUnit(...marine);

와 이렇게 간단해 지다니!

 

---

 

오늘의 느낌

불닭볶음면에 가장 잘어울리는 고기는 무엇이라 생각하나요?