[코딩애플] ts part 2-1. rest parameter & destructuring

함수 rest 파라미터, destructuring 할 때 타입지정

rest parameter 타입 지정 가능

rest parameter 문법 설명

함수에 여러 파라미터가 들어간다고 하자. 근데 몇 개의 파라미터가 들어올지 아직 모른다.

function 함수() {

}
함수(1,5,23,6,2,3)

그럴 때 점 3개를 붙여서 rest parameter를 쓰면 된다. 파라미터 100만개 들어올 수 있다는 뜻이다.

function 함수(...a){
	console.log(a); // [1, 5, 23, 6, 2, 3]
}
함수(1,5,23,6,2,3)

특징

• 다른 파라미터 있으면 맨 뒤에만 사용 가능
• rest parameter 자리에 들어온 데이터는 전부 **[어레이]에 담아줌**

rest parameter 타입지정은 어떻게?

안하면 any 타입이라고 안내문을 띄워준다. any 타입이라 부작용이 일어날 수 있다.

type은 이렇게 줄 수 있다. 만약 type이 number만 들어올 수 있어야 한다면

function 함수(...a :number){ ... } // Error!

이렇게 하면 에러가 발생한다. 왜냐면 rest parameter는 기본적으로 [어레이] 타입이기 때문에 [어레이] 타입으로 지정해주어야만 한다. 그래서

function 함수(..a :number[]) { ... }

이렇게 해야한다!

rest parameter에 문자 or boolean or number 가능하면?

function 함수(..a :(number|boolean|string)[]) { ... }

... spread operator 잠깐 상식

let arr = [1,2,3];
let arr2 = [4,5];
let arr3 = [...arr, ...arr2]; // [1,2,3, 4,5]

=> rest parameter랑 spread operator 다른 문법임

destructuring 타입 지정 가능

잠깐 destructuring 개념설명

이런 자료가 있다고 하자.

let arr = ['안녕', 100]

이 자료가 귀중한 나머지, 각각 변수로 따로 빼서 갖다 쓰고 싶다면?

let 변수 = arr[0];
let 변수 = arr[1];

근데 이러면 넘 귀찮아서 쉽게 빼는 문법이 개발됐다.

let [변수1, 변수2] = ['안녕', 100];

이렇게 자료들을 변수로 쉽게 빼서 쓸 수 있다.

console.log(변수1); // 안녕

array 뿐 아니라 object도 똑같다. 근데 속성명을 맞춰줘야한다.

let { student, age } = { student: true, age: 20 };

정확히는 이렇게 써야한다.

let { student: student, age: age } = { student: true, age: 20 };

똑같으면 생략 가능해서 윗윗처럼 쓸 수 있다.

함수 파라미터 작명할 때 destructuring 쓰면 object 넣기 쉬워짐

함수만들 때 destructuring 문법을 가끔 쓰기 때문에 알아야 한다!

예로 들면 함수에 파라미터로 일케 넣을 수 있는데

function 함수(a, b) {
    console.log(a, b);
}
함수(1, 2)

만약 object 안에 있던 자료를 파라미터로 집어넣고 싶다면? 파라미터 자리에 오브젝트를 쓰면 되겠지.

let 오브젝트 = { student: true, age: 20};

function 함수(a, b) {
    console.log(a, b);
}
함수(오브젝트.student, 오브젝트.age);

근데 이게 너무 귀찮고 번거롭다 이거다. 오브젝트 하나를 통째로 넣고 싶다. 그럴 때 destructuring 문법 쓰면 쉽게 개발할 수 있다!

let 오브젝트 = { student: true, age: 20};

function 함수({student, age}) {
    console.log(student, age);
}
함수(오브젝트);

근데, 함수에 파라미터 만드는 건 변수 만드는거랑 동일하다.

(상식) 파라미터 만들기 === 변수 만들기

let a = 10;
function 함수(a) { ... }

암튼 함수를 부를 때마다 student라는 변수에 true, age라는 변수에 20이 들어가서 변수가 만들어진다.

결론: 파라미터 destructuring 시엔 타입지정 어떻게 하게요

딱봐도 object처럼 생겼으니까 object처럼 타입지정하면 된다.

function 함수({student, age} :({student: boolean, age: number}) {
    console.log(student, age);
}

근데 너무 길면 type 키워드 쓰는게 좋아보인다.

숙제

1) 숫자 여러개를 입력하면 최댓값을 return 해주는 함수를 만들어봅시다.

최댓값(6,3,7,2) 이렇게 쓰면 7이 return 되어야합니다.

(조건1) 넣을 수 있는 숫자 갯수는 제한없음, 0 이상의 정수만 가능합니다.

(조건2) Math.max() 사용금지 반복문이나 쓰셈

function maxNumber(...rest :number[]) :number {
    let max = 0;
    maxNumber.forEach(i => {
        if(i > max){
            max = i;
        }
    });
    return max;
}
maxNumber(1,3,2,5,2,3,6,7,3,9)

2) 이렇게 생긴 object 자료를 파라미터로 입력할 수 있는 함수를 만들어봅시다.

함수( { user : 'kim', comment : [3,5,4], admin : false } )

어떻게 코드를 짜야할까요?

(조건1) 오늘 배운 파라미터 destructuring 문법을 써봅시다.

(조건2) 함수실행시 입력한 파라미터의 value들 (kim, [3,5,4] 이런거)을 전부 콘솔창에 출력해줘야합니다.

type UserType = {
    user : string,
    comment : number[],
    admin : boolean
}

function printFunc({user, comment, admin} :UserType) :void {
    console.log(user, comment, admin)
}
printFunc({ user : 'kim', comment : [3,5,4], admin : false })

3) 이렇게 생긴 array 자료를 파라미터로 입력할 수 있는 함수를 만들어봅시다.

함수( [40, 'wine', false] )

어떻게 코드를 짜야할까요?

(조건1) 오늘 배운 파라미터 destructuring 문법을 써봅시다.

(조건2) 함수실행시 입력한 파라미터들을 전부 콘솔창에 출력해줘야합니다.

type PrintType = (number|string|boolean)[]

function printFunc([a,b,c] :PrintType) :void {
    console.log(a,b,c);
}
printFunc( [40, 'wine', false] );