ES6에 새롭게 소개된 문법에는 다양한 것들이 있습니다. 그 중 매우 유용하고 자주 사용되는 것 중에는 rest 문법과 디스트럭쳐링 할당이 있죠. 이 친구들도 타입스크립트에서 더욱 안정적으로 써먹을 수 있습니다.
Rest와 디스트럭쳐링 할당
Rest와 디스트럭쳐링 할당은 엄밀히 따져서 ES6, 즉 자바스크립트의 영역입니다.
다만, 다른 게시글에서처럼 자바스크립트 내용을 다시 다지고 새로운 타입스크립트 문법을 시원하게 이해하기 위해 간략하게 요약해보겠습니다.
Rest Parameter
함수를 다루게 되면, 코드로 작성한 함수에 다양한 인자를 넣는 일이 빈번합니다.
그런데 사용자와 상호 작용이 많거나, 변수가 많은 코드를 짜다 보면 함수에 들어갈 인자를 특정할 수 없는 경우가 많습니다.
특히, 인자가 몇 개나 들어올 지 미리 예상할 수 없는 경우가 있죠.
Rest 문법을 활용하면 여러 인자들을 하나의 배열로 반환할 수 있습니다.
function plus(...rest) {
let sum = 0;
for (let n of rest) {
sum += n;
}
return sum;
}
console.log(plus(1,3,5)); // 9
console.log(plus(1,3,5,7,9)); // 25코드 블럭을 살펴보시면, plus라는 함수에 인자를 변수 형식으로 특정하는 대신, ...rest를 사용하여 rest라는 이름의 배열에 인자가 담기게 해주었습니다.
(이름이 반드시 rest일 필요는 없습니다. 인자를 담는 배열의 이름이므로 자기 원하는대로 지으면 되겠습니다.)
따라서 인자로 3개의 숫자를 넣든 5개를 넣든 정상적으로 잘 작동하게 됩니다.
디스트럭쳐링 할당
디스트럭쳐링 할당이란, 배열이나 객체의 속성을 분해해서(destructuring) 그 값을 변수에 담을 수 있게끔 하는 Javascript 표현식입니다.
말이 복잡하죠? 다음 코드 블럭을 참조하세요.
const [a, b, ...rest] = [1, 2, 3, 4, 5]
a; // 1
b; // 2
rest // [3,4,5]const 뒤에 변수명을 적는 것이 아니라 하나의 배열 표현식을 적고, 첫 번째 a, 두 번째 b, 그리고 방금 배운 rest 문법으로 나머지를 표현해 주었습니다.
그러면 아래처럼 자동으로 a에는 배열의 첫째 아이템인 1, b에는 둘째 아이템인 2, 그리고 rest라는 이름의 배열에 나머지가 들어가게 됩니다.
React에서, useState를 써보신 분들이라면 이 디스트럭쳐링 할당에 익숙하실 거라고 생각합니다.
Rest와 디스트럭쳐링 할당 타입 지정하기
Rest Parameter
아까 Rest 문법을 설명하면서, 여러 항목들을 하나의 배열로 배출한다고 말씀드렸습니다.
즉, rest parameter의 결과로는 여러 인자들로 이루어진 배열이 반환되는 것이고, 따라서 배열을 타입 지정하듯이 타입 지정을 하시면 되겠습니다.
function makeArr(...a :number[]){
console.log(a)
}
makeArr(1,2,3,4,5) // [1,2,3,4,5]이러면 결과적으로 인자에 숫자만 넣을 수 있는 구조가 완성됩니다.
디스트럭쳐링 할당 타입 지정하기
let person = { adult : true, age : 20 }
function func({adult, age}){
console.log(adult, age)
}
func({ adult : true, age : 20 })위 코드 블럭은 디스트럭쳐링 할당을 사용해서 함수 인자를 만든 예시입니다. 아직 타입 지정을 하지는 않았어요.
(주의할 점은, 함수에 인자로 들어간 adult와 age는 객체의 속성과는 다른 것입니다. 다만 헷갈리지 않도록 제가 이름을 맞춘 것일 뿐)
여기에서 타입 지정은 함수 인자의 타입 지정과, 객체 타입 지정을 섞으면 되겠습니다.
let person = { adult : true, age : 20 }
function func({adult, age} :{adult : boolean, age : number}){
console.log(adult, age)
}
func({ adult : true, age : 20 })배열의 경우에는 다음 코드 블럭도 참고해보세요.
type 문법을 사용해서 독립된 타입 하나를 만들어 둔 뒤, 간편하게 디스트럭쳐링 할당을 활용한 인자에 붙여주었습니다.
type arr = (number | string | boolean)[];
function 함수([a,b,c]:arr){
console.log(a,b,c)
}
함수( [40, 'Park', true] ) // 40 'Park' true 