[TypeScript] 함수 - 함수 정의 방법과 다양한 사용

 

📌 함수의 기본 사용

function add(num1:number, num2:number): void {
  // return num1 + num2
  console.log(num1 + num2);
}

function isAdult(age:number): boolean {
  return age > 19
}

 

📌 함수와 선택적 매개변수

// 함수의 매개변수도 옵션으로 지정할 수 있다. ✅ 선택적 매개변수
function hello(name?: string):string {
  return `Hello, ${name || "world"}`;
}

// 혹은, 매개변수에 default 값을 줄 수도 있다.
function hello2(name = "World"):string {
  return `Hello, ${name}`;
}

const result = hello();
const result2 = hello("Sam");
// const result3 = hello(123);  -> Error

function greeting(name:string, age?:number):string {
  if (age !== undefined) {
    return `Hello, ${name}. You are ${age}`
  } else {
    return `Hello, ${name}`;
  } 
} 

console.log(greeting("Sam", 39));
console.log(greeting("Sam"))

• 선택적 매개변수를 쓰더라도, return값의 type(string)은 항상 지켜줘야 한다.
• 선택적 매개변수가 필수 매개변수 앞으로 오면 에러가 발생한다.  ✅ age가 앞으로 오면 안됨!

 

📌 배열을 매개변수로 받는 함수

function add(...nums:number[]) {
  return nums.reduce((result, num) => result + num, 0);
}

add(1, 2, 3);
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

Rest parameter를 사용하여, 매개변수를 배열로 전달받을 수 있다. ✅ 타입도 배열 형태로 기입

 

📌 함수에서 this의 타입 정하기

interface User {
  name: string;
}

const Sam:User = {
  name: "Sam"
}

function showName(this:User, age:number, gender:"m"|"f") {
  console.log(this.name, age, gender)
}

const a = showName.bind(Sam);
// bind를 이용해서, this를 "Sam" 객체로 강제한다.

a(30, 'm')

• 타입스크립트에서 this의 타입을 정할 때에는, 첫번째 매개변수 자리에 this를 쓰고 타입을 지정해준다.
• 이는 매개변수가 있을 때나 없을 때 마찬가지이다.
• 매개변수가 있을 경우, 전달한 매개변수는 this 다음부터 순서대로 전달된다.

 

📌 함수 오버로드

interface User {
  name: string;
  age: number;
}

// 함수 오버로드
function join(name:string, age: number): User;
function join(name:string, age: string): string;

function join(name:string, age: number | string): User | string {
  if (typeof age === "number") {
    return {
      name,
      age,
    };
  } else {
    return "나이는 숫자로 입력해주세요.";
  }
}

const sam: User = join("Sam", 30);
const jane: string = join("Jane", "30")

함수 오버로드는 전달받은 매개변수의 개수나 타입에 따라 다른 동작을 하도록 하는 것이다.

 

---

🚀 참고

• JavaScript의 Rest 파라미터 사용하기
• [JavaScript] 자바스크립트 reduce 메서드 이해하기
• Function.prototype.bind() - JavaScript | MDN
• [ JavaScript ] 자바스크립트 바인딩과 this | 자바스크립트 개념
• JavaScript 객체 지향 프로그래밍 - 14.3. bind

 

➰ 더 공부할 것

• JavaScript 객체 지향 프로그래밍 - 14.3. bind : 영상보고 정리
• reduce()
• Rest parameter
• 함수 오버로드