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

⚡️함수 rest 파라미터

함수에 어떤 파라미터가 몇개 들어올지 미리 정의가 불가능한 경우가 있습니다. 

3개일지 4개일지 100개일지 모른다면 점3개 ...로 rest 파라미터를 만들어주면 됩니다.

function 전부더하기(...a :number[]){
  console.log(a)
}

전부더하기(1,2,3,4,5)

1. 함수 파라미터 작명할 때 점3개 붙여주면 여기엔 파라미터 잔뜩 들어올 수 있습니다~라고 정의가 가능합니다. 

2. 전문 용어로 rest 파라미터라고 합니다.

   ⓵ rest 파라미터는 다른 일반 파라미터 뒤에만 올 수 있습니다. 

   ⓶ rest 파라미터자리에 집어넣은 값들은 전부 [ ] 안에 담겨있습니다. 

3. rest 파라미터 타입지정 : rest 파라미터는 항상 [ ] 안에 담겨오기 때문에 타입지정도 array처럼 해주시면 됩니다

⚡️Spread operator와 다르다

코드짜다보면 점 3개 붙이는 경우가 또 있는데

array 혹은 object 괄호 벗기고 싶을 때 왼쪽에 사용합니다.

let arr = [3,4,5];
let arr2 = [1,2, ...arr]
console.log(arr2   // [1,2,3,4,5]

1. array 혹은 object 왼쪽에 점3개 붙이면 괄호 벗겨주세요~ 라는 뜻입니다.

2. arr2 출력해보면 [1,2,3,4,5] 나옵니다. 

3. ⓵ 괄호벗겨주는 ...spread는 array, object 자료 왼쪽에,

    ⓶ 여러개의 파라미터를 의미하는 ...rest는 함수선언할 때 소괄호 안에 출몰합니다. 

---

⚡️Destructuring 문법 개념설명

자바스크립트에서 array, object 안에 있는 데이터를 빼서 변수로 만들고 싶을 때 쓰는 문법이 있습니다. 

let 사람 = { student : true, age : 20 }
let student = 사람.student;   // true
let age = 사람.age   // 20

Destructuring 이라는 것인데 변수로 빠르고 쉽게 뺄 수 있도록 도와주는 문법입니다. 

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

1. 이렇게 쓰면 똑같이 변수로 뺄 수 있습니다. 

2. student 한 번 출력해 보면 true가 나옵니다.

3. destructuring 문법이라고 하며 왼쪽 오른쪽 틀린그림찾기처럼 변수 작명해주시면 끝입니다. 

let [a, b] = ['안녕', 100]

1. array 자료도 왼쪽오른쪽 똑같아보이게 변수 작명해주시면 변수로 쉽게 뺄 수 있습니다. 

2. 다만 특징은 object destructuring할 땐 변수이름을 속성이름과 맞춰주는게 편리하고 (안맞추면 더 복잡함)

3. array destructuring할 땐 변수이름 맘대로 작명가능합니다. 

⚡️Destructuring 문법도 함수 파라미터에 사용가능

함수 파라미터 작명하는 것도 변수만드는 문법과 똑같아서 그렇습니다 

변수만들 때 기존 object에 있던 자료를 파라미터로 집어넣고 싶으면 

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

function 함수(a, b){
  console.log(a, b)
}
함수(person.student, person.age)

기존 object에 있던걸 person.student 이렇게 각각 찝어서 집어넣으면 되지만

destructuring 문법을 이용하면 약간 더 쉽게 사용가능합니다. 

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

function 함수({student, age}){
  console.log(student, age)
}
함수({ student : true, age : 20 })

1. 파라미터 변수만들 때 { student, age }라고 쓰면

2. 파라미터로 들어오는 { student : true }는 student 라는 변수에 저장해주세요~라는 뜻입니다.

3. 파라미터로 들어오는 { age : 20 }은 age 라는 변수에 저장해주세요~라는 뜻입니다.

(object 자료니까 변수 작명할 때 object 속성명으로 잘 작명해야함)

항상 같은 모습의 object, array 자료가 들어올 때 쓰는 문법이라고 보면 되겠습니다.

 

Q. 위의 함수 파라미터에 타입지정해보도록 합시다

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

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

1. object가 들어있으니까 object 처럼 타입지정을 했다고 합니다.

2. 너무 길면 type 키워드 쓰는게 좋아보입니다.