함수 (function)

함수 (function)

1. 함수 (function)

• 이번엔 함수에 대해 알아보겠습니다.
• 함수는 JavaScript와 유사하지만 몇가지 차이가 있습니다.

 

2. 함수 선언과 정의

 1) 선언 및 정의 방법

• TypeScript는 다음과 같이 정의할 수 있습니다.

// 함수 선언
function add(num1: number, num2: number): number {
    return num1 + num2;
}

// 함수 호출
let result = add(10, 20);
console.log(result); // 30

 

 2) 선택적 매개변수

• TypeScript에서는 함수의 매개변수를 선택적으로 만들 수 있습니다.
• 매개변수의 이름 뒤에 물음표(?)를 붙여서 정의합니다.

// 함수 선언
function hello(name?: string) {
    return `hello, ${name || "world"}`;
}

// 함수 호출
const result = hello();
const result2 = hello("Kim");

console.log(result);
console.log(result2);

 

• 선택적 매개변수를 활용하여, 다음과 같이 섞어서 사용할 수 있습니다.

    → 이 때, 선택적 매개변수가 필수 매개변수보다 앞으로 오면, 오류가 발생합니다.

// 함수 선언
function hello(name: string, age?: number): string {
    if (age !== undefined) {
        return `Hello, ${name}. You are ${age}.`;
    } else {
        return `Hello, ${name}`;
    }
}

// 함수 호출
const result = hello("Lee");
const result2 = hello("Kim", 20);

console.log(result);
console.log(result2);

 

• 선택적 매개변수를 앞으로 배치하려면, 다음과 같이 입력하면 됩니다.

// 함수 선언
function hello(age: number | undefined, name: string): string {
    if (age !== undefined) {
        return `Hello, ${name}. You are ${age}.`;
    } else {
        return `Hello, ${name}`;
    }
}

// 함수 호출
const result = hello(undefined,"Lee");
const result2 = hello(20, "Kim");

console.log(result);
console.log(result2);

 

 3) 기본 매개변수

• 매개변수에 기본 값을 할당하여 호출 시, 해당 매개변수를 생략할 수 있게 합니다.

// 함수 선언
function add(num1: number, num2: number = 20) {
    return num1 + num2;
}

// 함수 호출
console.log(add(10)); // 30

 

 4) 나머지 매개변수

• 나머지 매개변수는 함수의 동적인 수의 인수를 전달할 수 있도록 합니다.
• 매개변수의 이름 앞에 세 개의 점(...)을 사용하여 정의합니다.

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

// 함수 호출
console.log(add(1, 2, 3)); // 6
console.log(add(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 45

 

 5) 화살표 함수

• TypeScript에서는 화살표 함수(=>)를 사용하여, 정의할 수 있습니다.

const square = (num:number): number => num * num;

console.log(square(4)); // 16

 

 6) this를 활용한 함수

• this와 bind를 활용하여 만들 수 있습니다.

interface User {
    name: string;
}

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

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

const a = showName.bind(Kim);
a(30, "m");

 

  7) 함수 오버로딩

• 동일한 함수명을 사용하여, 서로 다른 시그니처(매개변수의 유형과 개수)를 가지는 여러 버전의 함수를 정의할 수 있습니다.

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

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

const Kim: User = join("Kim", 20);
const Lee: string = join("Lee", "30");

 

 

3. 정리하며

• 지금까지 TypeScript의 함수에 대해 알아보았습니다.
• 다음 시간에 리터럴 타입, 유니온 타입, 교차 타입에 대해 알아보겠습니다.

리터럴, 유니온/교차 타입

 

※ 코딩앙마님의 유튜브 강좌를 참고하였습니다.