함수에 rest parameter타입 지정이 가능하다.
위 함수에서 변수를 받으려 하는 상황에서 몇개의 변수 즉 몇개의 파라미터가 들어올지 모르는 상황일때 변수를 무한이 a,b,c,이런식으로 붙이는게 아니라 ... 을 붙여주면 rest parameter가 되는것이다.
하지만 이 rest parameter는 다른 파라미터 맨 뒤에 적어야한다. 위처럼 num 파라미터 그 뒤는 무한이 들어올수 있다는 뜻이다.
이런식으로 확인해보면 저 모든 숫자가 들어오지만 구분을 해야하기 때문에 array형식으로 저장해준다.
그렇다면 rest parameter의 타입 지정은 어떻게 해야할까? 타입을 지정하지 않으면 any타입이 되니 문제가 발생 할 것이다.
그러니 숫자가 들어온다는 가정에는 위처럼 number를 붙여주면 된다.
- 함수내에서 -> rest parameter 무한변수
- array / object -> 괄호 벗겨주세요~라는 뜻 spread operator라는 문법이다.
destructuring 개념 설명
원래는 arr이에 담긴 변수를 따로 저장할때는 1번 처럼 arr이에 담긴걸
let 변수1 = arr[0] 이런식으로 담아줬었다. 하지만 이러면 코드가 너무 길어지기때문에 아래처럼 destructuring 문법을 사용해서 자료들을 변수로 쉽게 빼서 쓸수 있게된다.
object도 이렇게 가능하다.원래는 1번 처럼 양쪽을 그대로 맞춰줘야하는데 타입까지 js버전이 업데이트 되면서 아래처럼 사용해도 무방하다.
함수 파라미터에도 destructuring이 가능하다. 이런식으로 함수라는 곳에 똑같이 student 와 age를 맞춰주면 그대로 보내줄수있다.
위 함수의 파라미터의 타입지정은 이렇게 할수도 있다.
숙제1) 숫자 여러개를 입력하면 최댓값을 return 해주는 함수를 만들어봅시다.
최댓값(6,3,7,2) 이렇게 쓰면 7이 return 되어야합니다.
(조건1) 넣을 수 있는 숫자 갯수는 제한없음, 0 이상의 정수만 가능합니다.
(조건2) Math.max() 사용금지 반복문이나 쓰셈
나의 풀이
function findMax(...a:number[]) {
let max = a[0]; // 일단 배열의 첫 번째 값을 최대값으로 설정
for (let i = 1; i < a.length; i++) {
if (a[i] > max) {
max = a[i]; // 현재 값이 최대값보다 크면 최대값 갱신
}
}
return max;
}센세 풀이
function 최댓값(...x : number[]) {
let result = 0;
x.forEach((i)=>{
if (result < i) {
result = i
}
})
return result;
}
console.log(최댓값(4,6,3,2))
1. 함수를 만들었는데 파라미터 하나를 입력가능하게 만들었습니다. 근데 rest 파라미터라서 개많이 입력가능
2. 변수하나 만들었습니다. result = 0 이렇게요
3. 반복문을 써서 파라미터로 들어온 숫자를 계속 result와 비교합니다.
그래서 숫자가 더 크면 result 를 그 숫자로 갈아치우고
그게 아니면 냅둡니다.
반복문이 끝나면 result라는걸 return 해줍니다.
return 값 타입지정은 알아서 해보도록 합시다. 숙제2) 이렇게 생긴 object 자료를 파라미터로 입력할 수 있는 함수를 만들어봅시다.
함수( { user : 'kim', comment : [3,5,4], admin : false } )
어떻게 코드를 짜야할까요?
(조건1) 오늘 배운 파라미터 destructuring 문법을 써봅시다.
(조건2) 함수실행시 입력한 파라미터의 value들 (kim, [3,5,4] 이런거)을 전부 콘솔창에 출력해줘야합니다.
나의 풀이
function 함수2({user, comment, admin}:{user:string,comment:number[],admin:boolean}) {
console.log(user)
console.log(comment)
console.log(admin)
}
함수2({user: 'kim', comment: [3, 5, 4], admin: false})센세 풀이
type UserType = {
user : string,
comment : number[],
admin : boolean
}
function 함수({user, comment, admin} :UserType) :void{
console.log(user, comment, admin)
}
함수({ user : 'kim', comment : [3,5,4], admin : false })
설명은 생략하겠습니다
파라미터 변수명은 object 속성명 그대로 작명해야 편리합니다. 숙제3) 이렇게 생긴 array 자료를 파라미터로 입력할 수 있는 함수를 만들어봅시다.
함수( [40, 'wine', false] )
어떻게 코드를 짜야할까요?
(조건1) 오늘 배운 파라미터 destructuring 문법을 써봅시다.
(조건2) 함수실행시 입력한 파라미터들을 전부 콘솔창에 출력해줘야합니다.
나의 풀이
function 함수3([a,b,c]:(number | string | boolean)[]){
console.log(a,b,c)
}
함수3( [40, 'wine', false] )센세 풀이
type 어레이 = (number | string | boolean)[];
function 함수([a,b,c]:어레이){
console.log(a,b,c)
}
함수( [40, 'wine', false] )
array destructuring할 때는 자유작명이 가능합니다.