함수는 자주 사용되는 코드를 묶어놓는 코드 덩어리로 TypeScript에서 함수는 클래스나 네임스페이스 내에서 선언할 수 있다.
JavaScript에서의 함수는 호이스팅이 발생하는 선언적 함수 또는 호이스팅이 발생하지 않는 익명 함수로 사용되어진다. 그렇다면 TypeScript에서는 어떻게 사용되는지 알아보자.
✨ Function
- 함수의 파라미터(매개변수) 타입
- 함수의 반환 타입
- 함수의 구조 타입
3가지 타입을 정의할 수 있다.
✨ 함수의 매개변수
함수의 매개변수나 반환 타입을 지정해 코드의 안전성을 강화시킬 수 있다.
여기서 매개변수와 인자란?
function profile(name:string, age:number){
return `My name is ${name}, I am ${age} years old.`;
}
profile("seohee", 24);위의 코드에서 매개변수와 인자는 각각에 대해 아래와 같다.
-
매개변수name, age
전달된 인자를 받아들이는 변수이다. -
인자"seohee", 24
어떤 함수를 호출할 때 전달되는 값이다.
타입 지정
function <function_name> (매개변수1 : type, 매개변수2 : type) : type { ... }👇 예제 코드를 살펴보자.
function minus(a: number, b: number):number {
return a - b;
}minus함수를 선언할 때, 매개변수와 함수의 반환 값에 타입을 지정하였다.
💡 함수의 반환 값을 지정하지 않을 때는 void라도 사용하는 것이 좋다.
해당 함수를 호출해보자.
console.log(minus(10, 20)); // -10
console.log(minus(10, 20, 30));
// Error, 2개의 인수가 필요한데 3개를 가져왔습니다.ts(2554)
console.log(minus(10));
// Error, 2개의 인수가 필요한데 1개를 가져왔습니다.ts(2554)인자가 2개가 들어간 첫번째 호출 방식은 올바른 방법이므로 빼기 연산이 수행되어 정상적으로 작동된다.
하지만, 지정된 매개변수보다 인자가 많거나 적을 경우에는 오류를 발생시키는 것을 알 수 있다.
매개변수의 초기화
👇 minus함수의 두번째 매개변수의 초기값으로 10을 넣어보자.
function minus(a: number, b = 10) {
return a - b;
}
console.log(minus(10, 20)); // -10
console.log(minus(10, 20, 30));
// Error, 1-2개의 인수가 필요한데 3개를 가져왔습니다. ts(2554)
console.log(minus(10)); // 0매개변수의 갯수 만큼 인자를 넘기면 해당 인수를 사용하여 결과를 반환하지만, 그보다 적은 수의 인자를 전달받을 시에는 초기값을 사용하여 함수를 작동시킨다.
하지만, 인자보다 많은 수를 전달하면 여전히 오류를 발생시키게 된다.
선택적 매개변수
선택적 매개변수로 만들기 위해서는 매개변수 뒤에
?를 붙인다.
👇 예제 코드를 살펴보자.
function profile(name: string, age?: number): string {
return `My name is ${name}, I am ${age} years old.`;
}
console.log(profile("seohee", 24));
// My name is seohee, I am 24 years old.
console.log(profile("seohee"));
// My name is seohee, I am undefined years old.
console.log(profile("seohee", 24, 25));
//1-2개의 인수가 필요한데 3개를 가져왔습니다.ts(2554)age를 선택적 매개변수로 만들었기 때문에, name값만 넘기게 되면 age는 undefined의 값을 가지면서 정상적으로 작동한다.
하지만, 인자가 매개변수보다 많을 경우에는 여전히 오류를 발생시키고 있는 것을 확인할 수 있다.
🤔 만약, 선택적 매개변수가 앞에 오면 어떻게 될까?
// 필수 매개 변수는 선택적 매개 변수 뒤에 올 수 없습니다.ts(1016)
function changeProfile(name?: string, age: number): string {
return `My name is ${name}, I am ${age} years old.`;
}필수 매개 변수는 선택적 매개 변수 뒤에 올 수 없습니다라는 오류를 발생시킨다.
이를 해결하기 위해 | 를 사용하였다.
function changeProfile(name: string | undefined, age: number): string {
return `My name is ${name}, I am ${age} years old.`;
}
// My name is undefined, I am 24 years old.
console.log(changeProfile(undefined, 24));따라서 타입스크립트에서 선택적 매개변수를 사용할 때는 ❗️ 맨 앞에 오지 않도록 ❗️ 해야 하며, 인자로 사용하지 않고 싶을 때는 유니온을 사용해 undefined를 설정해주어야 한다.
REST 문법의 적용
TypeScript는 ES6의 문법을 사용할 수 있기에 Rest문법 또한 함수에 사용될 수 있다.
👇 예제 코드를 살펴보자.
function minus(a: number, ...numbers: number[]): number {
let totalOfNums = 0;
for (const index in numbers) {
totalOfNums += numbers[index];
}
console.log(numbers); // [2,3,4,5]
console.log(a, totalOfNums); // 1, 14
return a - totalOfNums;
}
console.log(minus(1, 2, 3, 4, 5)); // -13a로 1이 전달, numbers에 [ 2, 3, 4, 5]가 전달되어짐을 확인할 수 있다.
✨ overload
함수명은 같지만, 매개변수와 함수의
반환 타입이 다른함수를 여러개 선언할 수 있는 특징이다.
오버로드는 목록 형태로 선언할 수 있으며, 구현체는 단 하나뿐이다.
👇 예제 코드를 살펴보자.
// 선언문들
function add(a: number, b: number): number;
function add(a: number, b: number): string;
function add(a: string, b: string): string;
// 구현체
function add(a: any, b: any): any {
return a + b;
}
console.log(add(2, 3)); // 5
console.log(add("2", "3")); // "23"
console.log(add("2", 3));
// 이 호출과 일치하는 오버로드가 없습니다.우선, 매개변수의 자료형이 같은 함수가 두 개 선언되면, 처음 선언된 함수의 형식을 가지게 됨을 알 수 있다.
그리고 인자로 전달된 값들의 자료형을 미리 선언된 함수의 매개변수 자료형과 비교하여 그에 맞는 함수가 존재하면 정상적으로 함수를 호출하고, 없다면 오류를 나타냄을 알 수 있다.
타입스크립트에서 함수 오버로딩을 지원하기는 하지만, 온전히 타입 수준에서만 동작함을 알고 있어야 한다.
✨ this
타입스크립트에서 자바스크립트의 this가 잘못 사용되었을 때 감지할 수 있다.
👇 아래와 같은 형식으로 사용한다.
function 함수명(this: 타입) {
// ...
}this와 화살표 함수
let deck = {
suits: ["hearts", "spades", "clubs", "diamonds"],
printSuits: function () {
return () => {
console.log(this.suits);
};
},
};
console.log(deck.printSuits());🌈 결론
JavaScript와 TypeScript에서 함수를 사용하는 방법에 대한 비교를 통해 차이점을 명확하게 알 수 있었다. 문제를 풀어보면서 체화시키기 위해 노력해야겠다.
📚 학습할 때, 참고한 자료 📚
