rest parameter
먼저 rest parameter 에 대해서 간단히 짚고 넘어가자
function PrintNumArr(...a){
console.log(a)
}
PrintNumArr(1,2,3,4,5)위처럼 함수 파라미터를 만들때 앞에 ... 을 붙여주면
그 위치에는 여러값들이 들어있는 리스트가 남는다고 생각할 수 있다.
[LOG]: [1, 2, 3, 4, 5]그럼 rest parameter 의 타입지정은 어떻게 할까?
rest parameter 의 타입지정
array 취급이기 때문에 (숫자가 들어가는 array 라는 가정하에) number[] 이런식으로 작성해줄 수 있겠다.
아래와 같다
function PrintNumArr(...a:number[]){
console.log(a)
}
PrintNumArr(1,2,3,4,5)
spread operator 와는 달라요
js 코드를 짜다보면 ... 을 붙이는 경우가 또 있는데
spread operator 가 그 경우이다
array 나 object 의 괄호를 벗기고 싶을 때 사용한다.
예를 들면 아래와 같다
let arr = [1,2,3]
let arr2 = [...arr, 4,5]
console.log(arr2)[LOG]: [1, 2, 3, 4, 5]arr 앞에 ... 을 붙였더니 [1,2,3] 이 1,2,3 이런식으로 값만 빼올 수 있었다.
destructing
js 에서 array, object 안의 데이터를 빼서 변수로 만들고 싶을 때 쓸 수 있는 문법이다.
object 의 경우를 먼저 보자
let person = { student : true, age : 20}
let student = person.student;
let age = person.age위 코드를
let person = { student : true, age : 20}
let {student, age} = { student : true, age : 20}이렇게 작성할 수 있다.
student 라는 변수와 age 라는 변수에 student 속성의 값 true 를 넣어주고, age 속성의 값 20 을 넣어주었다.
(object destructing 의 경우 변수이름과 속성이름을 맞춰주는 것이 편리하다고 한다)
이번에는 array 의 경우를 보자
let [x, y] = ['hi', 123]x 와 y 라는 변수를 만들어 array의 데이터 값을 쉽게 빼서 변수로 저장했다.
destructing 문법을 함수 파라미터에 적용하기
let person = { student : true, age : 20 }
function 함수(a, b){
console.log(a, b)
}
함수(person.student, person.age)let person = { student : true, age : 20 }
function 함수({student, age}){
console.log(student, age)
}
함수({ student : true, age : 20 })같은 내용이지만 아래의 코드가 destructing 문법을 사용한 예이다.
이 문법을 사용하면 파라미터로 들어오는 student 의 값인 true 는 student 라는 변수에 들어가고
age 의 값인 20 은 age 라는 변수에 들어간다.
만약 함수에 파라미터로써 들어가는 object, array 가 항상 같은 형태라면 이런 코드를 작성해도 좋겠다.
위 코드에서 함수 파라미터에 타입지정을 한 것은 아래와 같다
let person = { student : true, age : 20 }
function 함수({student, age}:{student:boolean, age:number}){
console.log(student, age)
}
함수({ student : true, age : 20 })object 처럼 타입지정을 하면 된다.
예제
array 자료를 파라미터로 입력할 수 있는 함수를 만들어보자
dexstructing 문법을 써야하며, 함수실행시 입력한 파라미터들을 콘솔창에 입력해야한다
type arr = (number | string | boolean)[];
function myfunc([a,b,c]:arr){
console.log(a,b,c)
}
myfunc( [20, 'hi', false] )ref: 코딩애플
