[typescript] 7. 함수 (선언적 함수, 익명 함수, 콜백 함수)

[typescript] 7. 함수 (선언적 함수, 익명 함수, 콜백 함수)

1. 함수란?

  - 함수는 애플리케이션 코드를 구성하는 기본 요소입니다. 

  - 자주 사용되는 코드를 묶어놓은 코드 덩어리 입니다.

  - typescript에서 함수는 클래스나 네임스페이스 내에 선언 할 수 있습니다. 

  - 함수는 모듈로 서도 사용됩니다. 

2. 자바스스크립트 함수의 종류

  참조 : [javascript] 2.자바스크립트 함수란?

  1) javascript 함수

    (1) 선언적 함수

      - 호이스팅이 발생 합니다.

      *호이스팅 이란? 코드를 실행 하게 되면 호이스팅이되는 코드를 맨위로 올리는 것을 말합니다. 

                         따라서 함수를 사용후에 나중에 정의해도 됩니다.

    (2) 익명 함수 

      - 호이스팅 이 발생하지 않습니다. 

      - 함수를 선언이 후에만 사용 할 수 있습니다.

    

3. typescript 함수

  1) 선언적 함수

    - 함수의 매개변수나 반환 타입을 추가해 타입 안전성을 강화 합니다. 

    (1) 매개 변수의 활용

      - typescript는 는 매개변수에 초기 값을 줄수 있습니다.

      - 다음 코드에서 age에서 32라는 초기값을 주었습니다.(아.. 내 나이, OTL...)

function profile(name: string, age: number = 32) {

console.log(name, age);

}

profile("doitnowm-man");

    (2) 전개 연산자를 사용한 매개 변수 전달

      - 다음 코드에서 ...info 에 전개 연산자를 사용하여, name, age를 제외하고 모두 info로 받았습니다.

      - 매개변수에 전개 연산자를 사용 할경우 배열로 받아 합니다.

function profile(name: string, age: number = 32, ...info: any[]) {

console.log(name, age, info.join(""));

}

profile("doitnowm-man", 32, "where am i ?", " i am in suwow", " all right");

    (3) 선택 매개 변수

    - 선택 매개변수는 변수명 뒤에 ?를 붙이는 식으로 선언을 합니다. 

    - 선택 매개변수를 사용하며 선택 매개변수로 지정한 변수는 생략 할 수 있습니다.

    - 선택 매개변수는 매개변수 초기 값은 사용 할수 없습니다.

function secretProfile(name: string, age?: number) {

return name + age;

}

console.log(secretProfile("doitnow-man ")); // 결과 : doitnow-man undefined

console.log(secretProfile("doitnow-man ", 32)); // 결과 : doitnow-man 32

    (4). typescript함수 오버로드

      - 함수명은 같지만 매개변수와 반환 타입이 다른 함수를 여러개 선언 할 수 있는 특징을 말합니다. 

      - 컴파일 시간에 가장 적합한 오버로드를 선택해 컴파일 함으로 자바스크립 실행 시 런타임 비용이 발생하지 

        않습니다. 

      - 오버로드는 목록 형태로 선언 할수 있습니다.

        * 모든 타입이 any인것은 맨 아래 선언 합니다. 

function add(a: string, b: string): string;

function add(a: number, b: number): number;

function add(a: number, b: string): number;

function add(a: any, b: any): any {

return a + b;

}

console.log(add("1", "2")); // 결과 12

console.log(add(1, 2)); // 결과 3

console.log(add(1, "2")); // 결과 12

  

  - 선택 연산자를 사용 한 예제

function add(a: string, b: string): string;

function add(a: number, b: number): number;

function add(a: number, b: string): number;

function add(a: number): number;

function add(a: any, b?: any): any { // 선택 연산자를 사용

if (b === undefined) {

return a;

} else {

return a + b;

}

}

console.log(add("1", "2")); // 결과 12

console.log(add(1, 2)); // 결과 3

console.log(add(1, "2")); // 결과 12

console.log(add(1)); // 결과 1

  2) 익명 함수 (ES6 기준 설명)

    (1) 구성

      - 매개 변수 목록

      - 뚱뚱한 화살표 (=>)

      - 함수 블록

    (2) 특징1 (매개 변수가 1개인 목록은 소괄호 생략이 가능하다)

      - tsconfig.json의 compilerOptions 옵션에서 strict false 이여야 한다.

let y1 = x => { return x; };

console.log(y1(12));

    (3) 가독성 향상

      - 익명 함수 사용시 가독성을 위해서 type 선언자 를 통해서 익명 함수의 형태를 지정하면 좋습니다.

      type 타입명칭 = (매개 변수명 : 매개변수 타입) => 리턴 타입

type funcType = (x: number) => number;

let typfunc: funcType = (x: number) => { return x; };

console.log(typfunc(10)); // 결과 10

  3) 익명 함수 (즉시 호출 함수[IIF : Immediately Invoked Fucntion)

    - 익명 함수를 만든 후 즉시 호훌을 해야하는 경우에 사용 할 수 있습니다.

    - 다음 코는 x에 3을 넣어 3을 return 합니다.

let iif = ((x:number) => { return x;})(3)

console.log(iif); // 결과 3

3. 콜백 함수(callback 함수)

  1) 정의 

    (1) 함수의 매개 변수로 전달 되는 함수 입니다.

  2) callback 의 활용

    (1) 처리 방식을 달리 하고 싶을 때 

      - call함수에 따라 처리 방식을 다르게 하고 싶을 때 사용합니다.

// 익명 callback 함수 타입, callback 함수의 가독성을 위해서 사용 합니다

type callBackType = (mesasge: string) => void ;

// 익명 콜백 함수

let crazy: callBackType = meessage => {

return "cray!!!";

};

// 익명 콜백 함수

let sad: callBackType = meessage => {

return "sad ㅠ.ㅠ";

};

// 콜백 함수를 실행 할 함수

function callfunc(message: string, callback) {

return "I am " + callback(message);

}

// cray 콜백 함수를 인자로 주어 함수 실행

let result1 = callfunc("hello", crazy);

console.log(result1);

// sad 콜백 함수를 인자로 주어 함수 실행

let result2 = callfunc("hello", sad);

console.log(result2);

    (2) 비동기로 무언가 처리 하고 싶을 때

      - 어떠한 처리를 비동기로 수행 하고 싶을때 사용합니다.

      - async 와 await를 용 합니다. 

        async 가 함수 정의 앞에 붙으면 해당 함수를 비동기로 실행 시키겠다는 의미입니다.

        await문은 async 함수의 실행을 중지 시키고, await 가 붙은 함수를 비동기 적으로 처리 하겠다는 의미 입니다.

        await 덕분에 함수 실해이 중지 되므로 그 다음 함수가 먼저 실행 되기 때문에 비동기적인 실행으로 보입니다.

        * async 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

        * await 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await

// 익명 callback 함수 타입, callback 함수의 가독성을 위해서 사용 합니다

type callBackType = (mesasge: string) => void ;

// 익명 콜백 함수

let crazy: callBackType = meessage => {

return "cray!!!";

};

// 익명 콜백 함수

let sad: callBackType = meessage => {

return "sad ㅠ.ㅠ";

};

// 콜백 함수를 실행 할 함수

function callfunc(message: string, callback) {

return "I am " + callback(message);

}

async function slowfunc() {

await (() => {

let sum = 0;

for (let i = 0; i < 100000000; i++) {

sum += i;

}

})();

console.log("i am lazy");

}

slowfunc();

// cray 콜백 함수를 인자로 주어 함수 실행

let result1 = callfunc("hello", crazy);

console.log(result1);

// sad 콜백 함수를 인자로 주어 함수 실행

let result2 = callfunc("hello", sad);

console.log(result2);

          

참고 서적 : 타입스크립트 퀵스타트